原型及原型链
一、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