JavaScript 对象基本用法与创建方法

素颜马尾好姑娘i 2023-01-15 08:09 81阅读 0赞

#### 对象基本用法 ####

对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）

**对象声明方式**：

let obj = {  name: "Troy", age: 18 };
    let obj2 = new Object({  identity: "your dad" });

以上两种都是Object的声明方式，要注意的是，其中的属性名keys为字符串，并非标识符，可含任意字符，但前提是不省略引号；若省略了引号，就只能写标识符，但仍代表字符串。

**删除对象的属性**

delete obj.name;
    delete obj['name'];

上述两种方式皆可实现属性的删除，但有以下两点需要注意：

*  ‘xxx’ in obj 返回的bool值可以确认’xxx’是否在obj中；
 *  obj.xxx === undefined 不能断定’xxx’是否为obj中的属性。

其中第二点的原因是，对象中的属性值可以是undefined，而当对象中不存在某属性时，输入第二点的代码也会返回undefined，所以无法判定。

**属性查看**：

*  查看所有属性名：Object.keys(xxx)
 *  查看自身和共有属性：console.dir(xxx)
 *  判断属性为自身还是共有属性：obj.hasOwnProperty(‘xxx’)
 *  查看特定属性值：obj\[‘key’\] 或 obj.key

**属性修改与增加**

*  直接赋值：obj.name=xxx 或 obj.\[‘name’\]=xxx
 *  批量赋值：Object.assign(obj, \{age:18, gender:‘man’, …\})
 *  修改原型：obj.*proto*.xxx=‘xx’ 或 Object.prototype.xxx=‘xx’ ,但要注意的是，修改原型的操作需要十分注意并小心，有可能带来更多的bug
 *  以特定对象作为原型建立对象：

let common = {  sex: "male", age: 66566 };
    let obj = Object.create(common); //以common为原型建立对象
    Object.assign(obj, {  name: "Troy", looks: "handsome" }); //批量添加属性

#### 创建对象的方法 ####

**工厂模式**

function createPerson(name, job) {  
        var o = new Object()
        o.name = name
        o.job = job
        o.sayName = function() { 
            console.log(this.name)
        } 
        return o
    }
    var person1 = createPerson('Jiang', 'student')
    var person2 = createPerson('X', 'Doctor')

*  可以无数次调用这个工厂函数，每次都会返回一个包含两个属性和一个方法的对象。

缺点：工厂模式虽然解决了创建多个相似对象的问题，但是没有解决对象识别问题，即不能知道一个对象的类型。

**构造函数模式**

function Person(name, job) { 
        this.name = name
        this.job = job
        this.sayName = function() { 
           console.log(this.name)  }
    }
    var person1 = new Person('Jiang', 'student')
    var person2 = new Person('X', 'Doctor')

没有显示的创建对象，使用new来调用这个构造函数，使用new后会自动执行如下操作

*  创建一个新对象
 *  这个新对象会被执行\[\[prototype\]\]链接
 *  这个新对象会绑定到函数调用的this
 *  返回这个对象

缺点：使用构造函数创建对象，每个方法都要在每个实例上重新创建一次。

**原型模式**

function Person() { 
    }
    Person.prototype.name = 'Jiang'
    Person.prototype.job = 'student'
    Person.prototype.sayName = function() { 
        console.log(this.name)
    }
    var person1 = new Person()

将信息直接添加到原型对象上。使用原型的好处是可以让所有的实例对象共享它所包含的属性和方法，不必在构造函数中定义对象实例信息。

缺点：原型中所有属性实例是被很多实例共享的，这种共享对于函数非常合适。对于那些包含基本值的属性也勉强可以，毕竟实例属性可以屏蔽原型属性。但是引用类型值，就会出现问题。

**组合使用构造函数模式和原型模式**

这是使用最为广泛、认同度最高的一种创建自定义类型的方法。它可以解决上面那些模式的缺点。使用此模式可以让每个实例都会有自己的一份实例属性副本，但同时又共享着对方法的引用；

function Person(name) { 
        this.name = name
        this.friends = ['Shelby', 'Court'] 
    } 
    Person.prototype.sayName = function() { 
        console.log(this.name) 
    }
    var person1 = new Person()
    var person2 = new Person() 
    person1.friends.push('Van')
    console.log(person1.friends)  //["Shelby", "Court", "Van"]
    console.log(person2.friends) // ["Shelby", "Court"]
    console.log(person1.friends === person2.friends) //false

**动态原型模式**

动态原型模式将所有信息都封装在了构造函数中，初始化的时候，通过检测某个应该存在的方法时候有效，来决定是否需要初始化原型

function Person(name, job) { 
        // 属性 
       this.name = name
       this.job = job
    
        // 方法
        if(typeof this.sayName !== 'function') { 
           Person.prototype.sayName = function() { 
               console.log(this.name)
           } 
        } 
    }
    var person1 = new Person('Jiang', 'Student') 
    person1.sayName()

只有在sayName方法不存在的时候，才会将它添加到原型中。这段代码只会初次调用构造函数的时候才会执行。

此后原型已经完成初始化，不需要在做什么修改了，这里对原型所做的修改，能够立即在所有实例中得到反映。

**寄生构造函数模式**

这种模式的基本思想就是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新建的对象。

function Person(name, job) { 
        var o = new Object()  
        o.name = name 
        o.job = job
        o.sayName = function() { 
           console.log(this.name)  
        }
        return o
    }
    var person1 = new Person('Jiang', 'student') 
    person1.sayName()

这个模式，除了使用new操作符并把使用的包装函数叫做构造函数之外，和工厂模式几乎一样。

构造函数如果不返回对象，默认也会返回一个新的对象，通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值。

**稳妥构造函数模式**

首先明白稳妥对象指的是没有公共属性，而且其方法也不引用this。

稳妥对象最适合在一些安全环境中(这些环境会禁止使用this和new)，或防止数据被其他应用程序改动时使用。

稳妥构造函数模式和寄生模式类似，有两点不同：一是创建对象的实例方法不引用this，而是不使用new操作符调用构造函数。

function Person(name, job) { 
        var o = new Object()
        o.name = name
        o.job = job
        o.sayName = function() { 
            console.log(name)
         } 
         return o
    }
    var person1 = Person('Jiang', 'student') 
    person1.sayName()

和寄生构造函数模式一样，这样创建出来的对象与构造函数之间没有什么关系，instanceof操作符对他们没有意义。