原型及原型链

原型及原型链

一、prototype

在JavaScript中，绝⼤部分的函数(少数内建函数除外)都有一个prototype属性，这个属性指向函数的原型对象。prototype 属性使你有能力向对象添加属性和方法。

function Person(age) {
    this.age = age       
}
Person.prototype.name = '唐三'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name) //唐三
console.log(person2.name)  //唐三

上述例子中，函数的prototype指向了一个对象，而这个对象正是调用构造函数时创建的实例的原型，也就是person1和person2的原型，即原型对象。

它们的关系如下：

二、原型对象

绝⼤部分的函数(少数内建函数除外)都有⼀个 prototype 属性,这个属性是原型对象⽤来创建新对象实例,⽽所有被创建的对象都会共享原型对象,因此这些对象便可以访问原型对象的属性。

例如 hasOwnProperty() ⽅法存在于Obejct原型对象中,它便可以被任何对象当做⾃⼰的⽅法使⽤.

⽤法： object.hasOwnProperty( propertyName )

hasOwnProperty()函数的返回值为 Boolean类型。如果对象 object 具有名称为 propertyName 的属性，则返 回 true ，否则返回 false 。

var person = { 
  name: "Messi", 
  age: 29
}

console.log(person.hasOwnProperty("name")) //true console.log(person.hasOwnProperty("hasOwnProperty")) //false console.log(Object.prototype.hasOwnProperty("hasOwnProperty")) //true

由以上代码可知, hasOwnProperty()并不存在于 person 对象中,但是 person 依然可以拥有此⽅法.

所以 person 对象是如何找到 Object 对象中的⽅法的呢?靠的是原型链。

三、__proto__

这是每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型。

function Person() {

}
var person = new Person()
console.log(person.__proto__ === Person.prototype) // true

补充： 现已不推荐使用,现在更推荐使用Object.getPrototypeOf/Reflect.getPrototypeOf和Object.setPrototypeOf/Reflect.setPrototypeOf

四、constructor

每个原型都有一个constructor属性，指向该关联的构造函数。

function Person() {

}
console.log(Person === Person.prototype.constructor)  //true
// 当获取 person.constructor 时，其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时，会从 person 的原型也就是 Person.prototype 中读取，正好原型中有该属性,所以：
console.log(person.constructor === Person.prototype.constructor) // true
console.log(person.constructor === Person); // true

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

五、原型链

原因是每个对象都有__proto__属性，此属性指向该对象的构造函数的原型。

对象可以通过 __proto__与上游的构造函数的原型对象连接起来，⽽上游的原型对象也有⼀个 __proto__ ，这样就形成了原型链。

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