对象简介

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

可以这样理解对象:

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

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

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

对象的分类

1.内置对象:

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

2.宿主对象:

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

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");
    },
};

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

向对象中添加属性

向对象添加属性的语法:

对象.属性名 = 属性值;

举例:

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

获取对象中的属性

语法:

对象.属性名;

如果获取对象中没有的属性,不会报错而是返回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

修改对象的属性值

语法:

对象.属性名 = 新值;
obj.name = "tom";

删除对象的属性

语法:

delete obj.name;

对象的[]语法

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

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属性

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

遍历对象中的属性:for in

语法:

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

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;
}

任务–对象操作练习

// 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",
}
文档更新时间: 2022-06-29 14:08   作者:张老师