2. 对象

1. 对象简介

对象的作用是：封装信息。比如 需要一种数据可以保存学生的姓名、年龄、成绩等信息。

可以这样理解对象：

1. 对象是单个事物的抽象。比如一支笔，一本书，一辆车都可以是一个对象。

2. 对象是一个容器，封装了属性和方法。比如：一辆车。它的颜色，大小，重量等是它的属性，而启动，加速，减速，刹车等是它的方法。

我们可以通过使用带有可选 属性列表 的花括号 {…} 来创建对象。将事物抽象成一条条的属性，一个属性就是一个键值对（”key: value”），其中键（key）是一个字符串（也叫做属性名），值（value）可以是任何值。

2. 对象的分类

1. 内置对象：

   • 由 ES 标准中定义的对象
   • 比如：Math

2. 宿主对象：

   • 由 JS 的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。
   • 比如console、document

3. 自定义对象：

   • 由开发人员自己创建的对象

3. 创建对象

方法一:

构造函数是专门用来创建对象的函数。

例如：

var obj = new Object();

方法二:

使用对象字面量来创建一个对象：

var obj = {};

我们可以在创建对象的时候，立即将一些属性以键值对的形式放到 {...} 中。

var user = {     // 一个对象
  name: "John",  // 键 "name"，值 "John"
  age: 30        // 键 "age"，值 30
};

属性有键（或者也可以叫做“名字”或“标识符”），位于冒号 ":" 的前面，值在冒号的右边。

在 user 对象中，有两个属性：

1. 第一个的键是 "name"，值是 "John"。
2. 第二个的键是 "age"，值是 30。

复杂一点的对象

var obj2 = {
    name: "张三",
    age: 26,
    sex: "男",
    children: {
        name: "小明",
    },
    //我们还可以在对象中增加一个方法。以后可以通过obj2.sayName()的方式调用这个方法
    sayName: function() {
        console.log("smyhvae");
    },
};

对象字面量的属性名可以加引号也可以不加，建议不加。

4. 获取对象中的属性

语法：

对象.属性名;

如果获取对象中没有的属性，不会报错而是返回undefined。

举例：

var obj = new Object();

//向obj中添加一个name属性
obj.name = "张三";

//向obj中添加一个sex属性
obj.sex = "男";

//向obj中添加一个age属性
obj.age = 18;

// 获取对象中的属性，并打印出来
console.log(obj.sex); // 打印结果：男
console.log(obj.color); // 打印结果：undefined

5. 向对象中添加属性

向对象添加属性的语法：

对象.属性名 = 属性值;

举例：

var obj = new Object();

//向obj中添加一个name属性
obj.name = "张三";

//向obj中添加一个sex属性
obj.sex = "男";

//向obj中添加一个age属性
obj.age = 18;

console.log(obj);

打印结果：

{
    name:"张三",
    sex:"男",
    age:18
}

补充1：对象的属性值可以是任何的数据类型，也可以是个函数：（也称之为方法）

var obj = new Object();
obj.sayName = function() {
    console.log("smyhvae");
};

console.log(obj.sayName); //没加括号，获取的是对象
console.log("-----------");
console.log(obj.sayName()); //加了括号，执行函数内容，打印该函数返回值

打印结果：

补充2：属性值，也可以是一个对象。

举例：

//创建对象 obj1
var obj1 = new Object();
obj1.test = undefined;

//创建对象 obj2
var obj2 = new Object();
obj2.name = "smyhvae";

//将整个 obj2 对象，设置为 obj1 的属性
obj1.test = obj2;

console.log(obj1.test.name); //smyhvae

6. 修改对象的属性值

语法：

对象.属性名 = 新值;

obj.name = "tom";

7. 删除对象的属性

语法：

delete obj.name;

8. 对象的[]语法

我们也可以使用[]语法,进行对象的增删改查。

var user = {
    name:"张三",
    sex:"男",
    age:18
}
// 使用中括号语法,操作某个属性时,需要以字符串的形式书写属性名
// user['属性名']

// 获取属性
user['sex'];
// 添加属性
user['height'] = 176;
// 修改属性
user['age'] = 24;
// 删除属性
delete user['name'];

// 注意:如果中括号里边没加引号,就会被当作变量解析
// 例如
var a = 'sex';
user[a]; // 这里a没有加引号,被当做变量对待,被解析出保存的数据是字符串'sex'
// 所以 相当于就是 user['sex'] ,就获取到了user的sex属性

总结:一般当对象的属性名是用某个变量代表(保存)的，我们就需要使用对象[]语法进行操作。

9. 遍历对象中的属性：for in

语法：

for (var key in user) {
    // xx.xx 这种形式 只能取原来具有的属性
    // 非常重要! xx.abc  abc如果是变量,就必须通过  xx[abc] 形式取值
    // 因为[]才具备解析变量的作用
    console.log("属性" + key + "==>" + user[key]);
}

10. arguments 对象

• 函数的实参对象，只能在函数内部使用，类数组形式。
• 具备索引和长度特性，能够使用for循环遍历，但是无法使用数组的方法
• arguments.length; 返回的是实参的个数。
• arguments.callee; 返回的是这个函数本身。在使用函数递归调用时推荐使用 arguments.callee 代替函数名本身。

// 利用arguments对象, 实现对任意多个数求和
function sum() {
    var res = 0;
    for (var i = 0; i < arguments.length; i++) {
        res += arguments[i];
    }
    return res;
}

11. 任务–对象操作练习

// 1. 依次获取该对象的所有属性值
// 2. 依次修改该对象的属性
var temp = {
    className:"danger text",
    tagName:"DIV",
    style:{
        color:"red",
        width:"200px",
        height:"100px",
        backgroundColor:"#fff",
        fontSize:"16px"
    },
    innerText:"不凡学院",
    onclick:function(){alert('hi')},
    onfocus:null,
    onmouseover:null,
    title:"hello",
}