Javascript对象的创建

╰+哭是因爲堅強的太久メ 2022-11-10 03:53 182阅读 0赞

# 一、创建对象的模式 #

虽然使用Object构造函数或者对象字面量可以方便地创建对象，但这种方式的不足是具有同样接口的多个对象需要重复编写很多代码。

### 工厂模式 ###

按照特定接口创建对象的方式：

function createPerson(name, age, gender) { 
      let obj = new Object()
      obj.name = name
      obj.age = age
      obj.gender = gender
      obj.sayName = function () { 
        console.log(this.name)
      }
      return obj
    }
    let person1 = new createPerson('Mike', 23, 'male')
    let person2 = new createPerson('Lily', 12, 'female')

这种工厂模式可以解决创建多个类似对象的问题，但不能标识新创建的对象是什么类型。

### 构造函数模式 ###

ECMAScript中的构造函数是用于创建特定类型对象的。可以通过自定义构造函数为自己的对象类型定义属性和方法。

function Person(name, age, gender) { 
      this.name = name
      this.age = age
      this.gender = gender
      this.sayName = function () { 
        console.log(this.name)
      }
    }
    let person1 = new Person('Mike', 23, 'male')
    let person2 = new Person('Lily', 12, 'female')

Person()构造函数的内部代码和createPerson()工厂函数基本一致，主要区别在于：

*  没有显示地创建对象
 *  属性和方法直接赋值给了this
 *  没有return  
    构造函数主要问题：其定义的方法会在每个实例上都创建一遍。

### 原型模式 ###

每一个函数都会创建一个prototype属性，这个属性是一个对象，包含特定引用类型的实例应该共享的属性和方法。原来在构造函数中直接赋给对象实例的值可以直接赋值给它们的原型以实现数据共享。

function Person () { }
    Person.prototype.name = 'Mike'
    Person.prototype.age = 23
    Person.prototype.gender = 'male'
    Person.prototype.sayName = function(){ 
      console.log(this.name)
    }
    let person1 = new Person()
    let person2 = new Person()
    console.log(person1.name === person2.name) // true

# 二、认识原型 #

### 1、理解原型 ###

只要创建一个函数，就会为这个函数创建一个prototype属性指向原型对象。默认情况下，所有原型对象自动获取一个constructor属性指向关联的构造函数。即Person.prototype.constructor指向了Person。每个对象上暴露了`__proto__`属性，从而访问到对象的原型。  
正常的原型链都会终止于Object的原型对象。Object的原型的原型是null。

console.log(Person.prototype.constructor === Person) // true
    console.log(person1.__proto__ === Person.prototype) // true
    console.log(Person.prototype.__proto__ === Object.prototype) // true
    console.log(Person.prototype.__proto__.constructor === Object) // true
    console.log(Person.prototype.__proto__.__proto__ === null) // true

`isPrototypeOf()`方法可以确定两个对象的原型关系：

console.log(Person.prototype.isPrototypeOf(person1)) // true

`Object.getPrototypeOf()`方法可以返回参数内部特性`[[Prototype]]`的值：

console.log(Object.getPrototypeOf(person1) === Person.prototype) // true

### 2、原型层级 ###

*  通过对象访问属性时，如果在这个实例上发现了给定的名称，则返回该名称对应的值。若没有找到这个属性，搜索沿着指针进入原型对象搜索，若找到返回。**可以通过实例读取原型对象上的值，但不能重写这些值。** 只要给对象实例添加一个属性，这个属性会遮蔽原型对象上的同名属性。
 *  `hasOwnProperty()`方法可以确定属性是在实例上还是在原型对象上。方法会在属性存在于实例对象上时返回true。

console.log(person1.hasOwnProperty('name')) //false
    person1.name = 'Jony'
    console.log(person1.hasOwnProperty('name')) // true

*  `in`操作符在可以通过对象访问指定属性时返回true。无论属性在实例上还是在原型上。

console.log(person1.hasOwnProperty('name')) //true
    person1.name = 'Jony'
    console.log(person1.hasOwnProperty('name')) // true

*  `Object.keys()`可以获得对象上所有可枚举的**实例**属性。

function Person () { }
    Person.prototype.name = 'Mike'
    Person.prototype.age = 23
    Person.prototype.gender = 'male'
    Person.prototype.sayName = function(){ 
      console.log(this.name)
    }
    let keys = Object.keys(Person.prototype)
    console.log(keys) // [ 'name', 'age', 'gender', 'sayName' ]

*  `Object.getOwnPropertyNames()`可以列出所有可枚举和不可枚举的实例属性。
 *  `Object.values()`和`Object.entries()`是进行对象迭代的两个静态方法。函数都接收一个对象，`Object.values()`返回对象值的数组，`Object.entries()`返回键/值对的数组。

const obj = { 
      a: 'apple',
      b: 'banana',
      c: { }
    }
    console.log(Object.values(obj)) // [ 'apple', 'banana', {} ]
    console.log(Object.entries(obj)) // [ [ 'a', 'apple' ], [ 'b', 'banana' ], [ 'c', {} ] ]

### 3、原型对象的重写 ###

为了体现原型对象功能的封装，可以直接通过一个包含所有属性和方法的对象字面量来重写原型。

function Person () { }
    Person.prototype = { 
      name: 'Mike',
      age: 23,
      gender: 'male',
      sayName: function() { 
        console.log(this.name)
      }
    }

这样重写原型的问题在于：**`Person.prototype`的`constructor`属性不再指向Person**。此时`constructor` 指向了完全不同的新对象，最终导致不能依靠`constructor`属性来识别对象的类型。  
要想重新指回构造函数，需要在重写原型对象时专门设置一个值：

function Person () { }
    Person.prototype = { 
      constructor: Person,
      name: 'Mike',
      age: 23,
      gender: 'male',
      sayName: function() { 
        console.log(this.name)
      }
    }