JS创建对象的多种方式

Dear 丶 2021-09-19 00:06 459阅读 0赞

### 一、对象字面量创建 ###

var person = { 
      name: 'Jack',
      age: 18,
      sayName: function () { 
        console.log(this.name)
      }
    }

**缺点：** 比较麻烦，每个属性都需要添加

### 二、通过内置构造函数Object创建 ###

var person = new Object()
    person.name = 'Jack'
    person.age = 18
    
    person.sayName = function() { 
      console.log(this.name)
    }

**缺点：** 如果要批量生成多个对象，会产生大量重复代码

### 三、简单改进：工厂模式 ###

function createPerson(name, age) { 
      return { 
        name: name,
        age: age,
        sayName: function() { 
          console.log(this.name)
        }
      }
    }
    
    // 然后生成实例对象
    var p1 = createPerson('Jack', 18)
    var p2 = createPerson('Mike', 18)

**缺点：** 没有解决对象识别的问题，创建出来的对象都是Object类型的

### 四、继续改进：构造函数模式 ###

function Person(name, age) { 
      this.name = name
      this.age = age
      this.sayName = function() { 
        console.log(this.name)
      }
    }
    
    var p1 = new Person('Jack', 18)
    p1.sayName() // => Jack
    
    var p2 = new Person('Mike', 23)
    p2.sayName() // => Mike

**创建 Person 实例，则必须使用 new 操作符，以这种方式调用构造函数会经历以下 4 个步骤：**

1.  创建一个新的空对象
2.  设置新对象的constructor属性为构造函数的名称，设置新对象的 **proto** 属性指向构造函数的prototype对象
3.  函数中的 this 被指向新实例对象，使用新对象调用函数，并返回创建的新对象
4.  将初始化完毕的新对象地址，保存到等号左边的变量中

**注意：**

*  若构造函数中返回this或返回值是基本类型（number、string、boolean、null、undefined）的值，那么函数会忽略掉return语句,返回新实例对象
 *  若返回值是引用类型的值，则实际返回值为这个引用类型

**优点：**

*  没有显式地创建对象
 *  直接将属性和方法赋给了 this 对象
 *  没有 return 语句
 *  要创建新实例，必须使用new操作符（否则属性和方法将会被添加到 window 对象）

**缺点：**

*  浪费内存

### 五、原型模式 ###

function Person() { 
    }
      
    Person.prototype.name = "lisi"
    Person.prototype.age = 21
    Person.prototype.family = ["lida","lier","wangwu"]
    Person.prototype.say = function() { 
        console.log(this.name)
    }
    
    var person1 = new Person()         //创建实例person1
    console.log(person1.name)
    
    var person2 = new Person()         //创建实例person2
    person2.name = "wangwu"
    person2.family = ["lida","lier","lisi"]
    console.log(person2)

**优点：**

*  可以让所有对象实例共享它所包含的属性和方法（即所谓的共有属性）

### 六、混合模式（构造函数模式 + 原型模式） ###

function Person(name,age,job,friends){ 
        this.name = name
        this.age = age
        this.job = job
        this.friends = friends
    }
    
    Person.prototype = { 
    	//每个函数都有prototype属性，指向该函数原型对象，原型对象都有constructor属性，这是一个指向prototype属性所在函数的指针
        constructor: Person,
        sayName: function() { 
            console.log(this.name)
        }
    }
    
    var person1=new Person("lisi",21,["lida","lier","wangwu"])

**优点：**

*  混合模式共享着对相同方法的引用，又保证了每个实例有自己的私有属性，最大限度的节省了内存

另外还有 动态原型模式、寄生构造函数模式和稳妥构造函数模式