【JS中的对象相关整理】

原创已于 2022-05-07 10:16:55 修改 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

于 2022-05-07 10:14:15 首次发布

一、对象的概念：

对象是一组无序的相关属性和方法的集合（可以存放任意类型的元素）。

//为了让更好地存储一组数据，就可以用到对象。对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。
        var obj = {
            "name": "张三",
            "sex": "男",
            "age": 128,
            "height": 154
        }

二、对象的创建方式

1.对象的字面量创建方式

对象的字面量是{}

 var obj = {
            key: value,
            key2: value2,
            sayHi: function () {
                alert('Hi~~');
            }
        };

key - 键：相当于属性名
value - 值：相当于属性值，可以是任意的类型（数字类型、字符串类型、布尔类型，函数类型等）
⚠️需要注意：
1.每个键值（属性:属性名）之间用逗号隔开；
2.在对象中的函数（方法），也可以理解为是一个属性，可以称之为方法属性。对象里的函数都是匿名函数。

2.使用new Object 创建对象

 var obj = new Object() //创建一个新的空对象
//通过  对象名.属性名=属性值  的形式向空对象中添加新的元素（相当于赋值的形式）
//新添加的属性之间使用分号隔开
		obj.name = '小明';
		obj.sex = '男';
        obj.sayHello = function () {
            alert('拜拜👋');
        }
        //对象中方法的调用：
        // obj.sayHello();
        obj['sayHello']();

3.构造函数创建对象

1）什么是构造函数？

js中的构造函数，就是利用函数的方法把重复相同的代码封装，只是里面封装的不再是普通代码，而是对象。也就是为对象成员变量赋初始值，它总与new关键字一起使用。

2）为什么要使用构造函数？

可以通过一个构造函数创建多个对象，这些对象拥有相同的构造，都可以使用这个构造函数的方法和属性。这样可以节省我们的代码量。

3）使用构造函数创建对象

我们使用构造函数来创建对象时，首先要找出所需创建对象的公共部分，这样才能将其抽离，封装到函数中。

//语法
        function 构造函数名(形参1, 形参2, 形参3) { // 构造函数的形参与对象的普通属性是一致的
            this.属性名1 = 形参1; //形参就是要给属性赋的值
            this.属性名2 = 形参2;
            this.属性名3 = 形参3;
            this.方法名 = 函数体; // 函数体不需要传递
        }
        //调用 构造函数的调用语法：通过new调用
        var obj = new 构造函数名(实参1, 实参2, 实参3)

下面利用构造函数，来创建两个王者英雄的信息对象

//构造函数
        function Hero(name, type, blood, attack) {
            this.hisName = name
            this.hisType = type
            this.hisBlood = blood
            this.attack = function (attaction) {
                console.log(this.hisName + '的攻击方式为' + attaction)
            }
        }
        //对象
        var diaoChan = new Hero('貂蝉', '法刺型', '500血量')
        var houYi = new Hero('后羿', '射手型', '100血量')
        //控制台打印结果
        console.log(diaoChan.hisName)
        diaoChan.attack('法刺型')
        console.log(houYi.hisName)
        houYi.attack('远程型')

⚠️注意
1、构造函数约定函数名首字母大写。
2、函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
3、构造函数中不需要 return 返回结果。
4、当我们创建对象的时候，必须用 new 来调用构造函数。
5、构造函数中的属性和方法前必须加this。

4）为什么构造函数中不需要return返回值？

构造函数中new关键字的执行过程：

function Hero(name, type, blood, attack) {
            // 1、在构造函数代码开始执行之前，创建一个空对象；
            // 即隐式转化一个var this = new Object();

            // 2、修改this的指向，把this指向创建出来的空对象；
            // 3、执行函数的代码
            this.hisName = name
            this.hisType = type
            this.hisBlood = blood
            this.attack = function (attaction) {
                console.log(this.hisName + '的攻击方式为' + attaction)
            }
            // 4、在函数完成之后，返回this--- 即创建出来的对象
        }
        var lianPo = new Hero('廉颇', '力量型', '500血量')

所以构造函数不需要return来返回值。

三.调用对象的方法

1.点语法调用

点语法调用 对象名.属性

2.中括号调用

中括号调用 对象名['属性名']

//先创建一个对象
var person = {
            name: '影',
            sex: '女',
            getSkill: function () {
                return alert('寂灭，一念永恒')
            }
        }
        //点语法 调用对象
        // alert(person.name)
        // 中括号调用 对象名['属性名']
        alert(person['sex'])

        //调用方法
        //1、点语法
        // person.getSkill()
        //2、中括号
        person['getSkill']()

四.遍历对象

 //语法：
        for (var k in 对象名) {
            //隐式声明的这个k变量，在for循环中的每一次循环，表示的是对象中的某一个属性名
            console.log(k, 对象名[k]) //k必须是中括号包裹！！因为他是一个变量，不是一个字符串
        }