JavaScript中的对象详解

·  阅读 68

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第12天,点击查看活动详情

创建对象的方式

字面量创建对象

  1. 如果要创建大量的字面量对象, 则需要编写大量的代码
  2. 在创建相同的字面量对象时, 不可以保证所有手写的属性都是正确的, 一致的
  3. 每个对象都存在大量相同的方法, 占用大量空间
  4. 要修改或删除某个方法时, 必须在每个对象身上进行修改或删除, 不利于统一管理

构造函数创建对象

  1. 使用关键字new来调用构造函数
  2. 函数内部首先会创建一个空对象, 并且将对象引用赋值给this
  3. 通过this初始化对象中的属性和方法
  4. 将this作为返回值返回

注意事项

  1. 使用字面量创建对象, 在属性名上可能会犯无法预知的错误, 如user1和user2中的属性
  2. 使用字面量创建对象, 在使用console.log输出时, 为Object对象
  3. 使用构造函数创建对象, 在使用console.log输出时, 为构造函数名的对象, 如 User

        // 字面量
        let user1 = {
            name: 'shaosiming',
            age: 16
        }

        let user2 = {
            nmae: 'dasiming',
            aeg: 18
        }

        // 构造函数
        function User(name, age) {
            console.log(this);
            this.name = name;
            this.age = age;
        }
        let user3 = new User('tianming', 10);
        let user4 = new User('yuer', 8);
        console.log(user3);
        console.log(user4);
复制代码

构造函数 - 接收多个参数

当形参少时尚可使用, 如果形参很多的时候, 不但要注意形能的数量, 不要注意形参的顺序

否则会带来意想不到的bug

        // 构造函数
        function User(name, age) {
            // console.log(this);
            this.name = name;
            this.age = age;
        }
        let user3 = new User('tianming', 10);
        let user4 = new User('yuer', 8);
复制代码

构造函数 - 接收一个参数

当构造函数的形参很多时, 我们就可以考虑使用字面量对象来传递给构造函数

而构造函数也可以使用一个形参来接收这个字面量对象

这样就可以完美解决形参多时的顺序问题, 当然数量问题只能开发人员来注意了

        // 构造函数接收多个参数
        function Person1(name, age, gender, hobby, isNice) {
            this.name   = name;
            this.age    = age;
            this.gender = gender;
            this.hobby  = hobby;
            this.isNice = isNice;
        }

        // 构造函数接收一个字面量对象
        function Person2(params) {
            this.name   = params.name;
            this.age    = params.age;
            this.gender = params.gender;
            this.hobby  = params.hobby;
            this.isNice = params.isNice;
        }

        let p1 = new Person1('shaosiming', 16, 'female', 'da tianming', true);
        let p2 = new Person2({
            name: 'dasiming',
            age: 18,
            gender: 'female',
            hobby: 'da tianming',
            isNice: true
        });
复制代码

typeof

使用typeof来进行类型的判断, 只会返回boolean, number, string, undefined, object

instanceof

使用instanceof可以判断一个值是不是某个构造函数构造出来的实例

注意: 对于一个对象来说, 不管是添加一个属性, 还是删除一个属性, 它还是某个构造函数的实例

        user3.hobby = 'da tianming' // 添加属性
        delete user4.age; // 删除属性
        console.log(user3);
        console.log(user4);

        console.log(typeof(user3)); // Object
        console.log(user3.constructor.name); // User
        console.log(user3 instanceof User); // true
        console.log(user3 instanceof Object); // true
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改