javascrpt day-five

 

## 对象

何为对象：万物皆对象 客观世界中的具体的实体就是对象 如 一个人 一个气球  一辆汽车 每一个对象实体都有对应的特征

 

思考：

对象怎么描述  特征   行为

对象怎么描述  特征   行为

 

### 为什么要学习对象？

思考：上述对象都是客观世界的，那JS这门语言中为什么要有对象呢 又如何用代码去描述一个对象呢

数组：**是有序的元素集合** ，数组用于存放一组数据，比如一个班级所有人的名字，一个班级所有人的成绩。

函数：**封装一段重复的代码，只要声明一次，就可以多次调用。**

 

思考1：如果要存储一个人的信息，应该怎么办？

var name = "张三";
var age = 18;
var sex = "男";
var hobby = "上网";

思考2：这么做的缺点是什么？

这些变量都是属于一个人的，应该跟数组一样，使用一个集合把所有的信息都存储起来。

 

对象：**是一组无序的键值对的集合。**

- 事物的特征在对象中用属性来表示。

- 事物的行为在对象中用方法来表示。

 

//数组多个元素之间使用,隔开
//对象中多个键值对之间也用,隔开，，，键值对的格式： 键:值
var obj = {
  name:"张三",
  age:18,
  sex:"男",
  hobby:"上网",
  greet: function() {
    console.log('你好呀！！');
  }
}

 

### 操作对象

操作对象: 增 删 改 查

查语法: 对象.属性
console.log(obj.name);
console.log(obj.age);


改语法: 对象.属性 = 新的值;
obj.name = 'ls';
obj.age = 38;


增语法: 和改语法是一样的, 如果该属性是存在的就是改  如果不存在就是添加
obj.girlFriend = 'wmz';


删除语法: delete 对象.属性
delete obj.girlFriend

 

 

## 创建对象和使用

> 字面量的形式 11 “abc”  true  [] {}等

var o = {
  name : "zs",
  age : 18,
  sex : true,
  sayHi : function() {
    console.log(this.name);
  }
};

 

### 通过Object构造函数创建

var hero = new Object({
    name: 'zs',
    age: 18
});

 

## 实例(了解)

实例：就是实际的例子   例如：“人” 是一个模板（构造函数）  而l刘德华则是这个模板的一个实例

或者“猫” 是一个模板（构造函数） 而我家的猫 则是这个模板的一个实例

JS内部提供了不同数据的模板，都可以通过new去创建出一个新的实例出来

 

 // 得到数组的实例
  var arr = new Array(1,2,3);
  console.log(arr);

  // 得到普通对象的实例
  var obj = new Object({name:123});
  console.log(obj);

  // 得到函数的实例
  var fn = new Function('a','b','c','d');
  console.log(fn);

  // 得到数字的实例
  var num = new Number(123);
  console.log(num);

  // 得到布尔的实例
  var bool = new Boolean(true);
  console.log(bool);

  // 得到字符串的实例
  var str = new String('123');
  console.log(str);

  // 上述都是JS内部提供的 但JS没有提供学生（模板） 所以需要动手创建
  // var stu = new Student('小明',18);

 

##批量创建对象

> 在实际开发中，经常需要创建多个相同类型的对象，比如游戏中的怪物，班级的学生等。

### 使用工厂函数创建对象

// 上述都是重复去做一件事情 重复去做一件事情 我们就可以利用function封装 然后重复调用 传递对应的参数
    function creatStudent(name, age, height, hobby) {
      var obj = {
        name: name,
        age: age,
        height: height,
        hobby: hobby,
        sayHi: function () {
          console.log('Hello everyone');
        },
        study: function () {
          console.log('好好学习 天天向上');
        }
      }
      return obj;
    }

    var xmg =new creatStudent('xmg', '16', 180, '嘿嘿');
    console.log(xmg.name);
  var wt = creatStudent('wt', '14', 180, '嘻嘻');
  var ff = creatStudent('ff', '18', 110, '呼呼');

 

优点：可以同时创建多个对象

缺点：麻烦，并且没有原型关系（JS高级精讲）同时没有类型

 

## 构造函数 和 new运算符

// 构造函数名字大写
function Student (name, age, hobby, gender){
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.gender = gender;
}

var obj = new Student('刘德华', 18, '开车', '未知');

 

### new 运算符 ☆☆

+ 创建一个新的对象 类型从属于对应的构造函数

+ 将this指向这个新对象

+ 执行构造函数

+ 返回这个新对象

 

new运算符一般配合构造函数使用 这种方式创建对象更加简单。并且有原型关系（JS高级精讲）可以看到数据类型

 

## []语法操作对象属性

> 对象["属性名"]

var obj = {
    name: 'feifei',
    age: 18,
    gender: '男',
    i: 1
};
console.log(obj.age);

var obj1 = {
    name: '华哥,
    'true-age': 20
}
console.log(obj1);

// 关联数组的方式
console.log(obj1["true-age"]);

// 点语法可以操作对象的属性  但是如果属性名中有-这些特殊字符的  通过.语法就操作不了
// 但是我们可以利用关联数组的方式去操作
// 对象['属性名']  或者 对象.属性名

var i = "name";
console.log(obj.i); //  undefined 因为JS解析器会把I作为对象的属性  而当前对象并没有i这个属性  所以是udnefined
console.log(obj[i]);// 关联数组的方式不加引号  会解析成变量 将变量里面存的值作为对象属性
console.log(obj["i"]); // 添加上了引号  直接解析成对象对应的属性

**总结**:

- 如果对象的属性存在-这种的 那么使用.语法无法操作 但是[]形式可以

- []语法可以使用变量代替属性 但是.语法不可以  如果[]语法里面的值添加了引号 那么就和.语法一样

 

## 遍历对象

> for遍历的问题：

+ 对象的长度  也就是说循环多少次

+ 获取对象里面的具体属性

 

> 通过for in语法

var obj = {
    name: 'feifei',
    age: 15,
    gender: 'male'
  };

  /*for(var i = 0; i < 3; i++){
    obj[0]
  };*/

  // for循环遍历对象的两个问题：
  // 1、对象的长度  也就是说循环多少次
  // 2、获取变量里面的具体属性

  for(var attr in obj){
    // console.log('1');
    // console.log(attr);
    console.log(obj[attr]);
  }

 

## 引用数据类型和值数据类型

> 简单数据类型（值类型）

在存储时，变量中存储的是值本身，因此叫做值类型。

如：number string  boolean undefined null

> 复杂数据类型 （引用类型）

array object function

在存储时，变量中存储的仅仅是地址（引用），因此叫做引用数据类型

 

思考题：

//1.
function Person(name, age) {
    this.name = name;
    this.age = age;
}
var p1 = new Person("zs", 18);
var p2 = p1;
p2.name = "ls";
console.log(p1.name);
console.log(p2.name);

//2.
function Person(name, age) {
  this.name = name;
  this.age = age;
}
function f1(p) {
  p.name = "ls";
  console.log(p.name);
}
var p1 = new Person("zs", 18);
console.log(p1.name);
f1(p1);
console.log(p1.name);

 

 

结论：简单类型存储的是值本身，复杂类型存储的是地址，如果把第一个对象赋值给另一个变量，此时两个变量会指向同一个对象。