JavaScript -- 原型

[mt51]

原型

原型和原型链

JavaScript中的对象有一个[[Prototype]]内置属性，该属性保存当前对象对于其他对象的引用，这里的[[Prototype]]属性指向的对象就是当前对象的原型。

当试图访问一个对象上的某个属性的时候，比如：

var obj = {}
Object.prototype.a = 'a'
obj.a  //  a

如果在obj上查找不到属性a,此时就会用到[[Prototype]]内置属性，会到[[Prototype]]指向的对象上继续查找，由于[[Prototype]]指向的也是个对象，也会拥有[[Prototype]]内置属性，所以会这样一直向上查找，直到找到属性a或者是[[Prototype]]指向null时结束。

这样就构成了原型链。

__proto__

当需要访问一个对象的原型时，有两种方式

大多数浏览器内部给对象提供了__proto__属性，通过该属性我们可以访问到对象的[[Prototype]]属性，但是这个方法并不在标准中，属于浏览器厂商自己提供的。

var obj = {}
console.log(obj.__proto__ === Object.prototype)  //  true

在ES5中可以使用Object.getPrototypeOf（）来获取对象的[[Prototype]]属性。

var obj = {}
console.log(Object.getPrototypeOf(obj) === Object.prototype)  // true

prototype

每一个函数都有一个prototype（原型）属性，这个属性是个指针，指向一个对象，这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法，这个对象就是该函数的原型对象。

function Person () {}
Person.prototype.name = '张三'
Person.prototype.sayName = function () {
    console.log(this.name)
}
var person = new Person()
person.sayName()

当通过new操作符调用函数的时候，会返回一个实例对象，该实例对象会和函数的原型对象关联起来，函数的原型对象会作为该实例对象的原型对象。

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

constructor

我们已经知道，在创建一个函数的时候，会根据特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象，在默认情况下，所有的原型对象都会自动获得一个constructor属性，这个属性包含一个指向prototype所在函数的指针。

function Person () {}
console.log(Person.prototype.constructor === Person)  //  true

constructor属性是不可靠的，当我们修改了函数的prototype时

function Person () {}
Person.prototype = {
    name: '张三',
    sayName: function () {
        console.log(this.name)
    }
}
console.log(Person.prototype.constructor === Person)  // false
console.log(Person.prototype.constructor === Object)  // true

这里，由于Person.prototype属性被重写了，导致Person.prototype.constructor不再是指向Person而是Object。

用一张图作为结束

function Person () {}
Person.prototype.name = '张三'
Person.prototype.sayName = function () {
    console.log(this.name)
}
var person = new Person()

参考

JavaScript深入之从原型到原型链