一篇就够-理解原型和原型链

prototype和proto

prototype是原型对象，proto是原型

prototype

每个函数都有一个prototype属性,指向了一个对象，这个对象正是构造函数的原型对象。原型拥有constructor属性，指向当前构造函数。

原型可以理解为，每一个js对象，在创建的时候就会与之关联另一个对象，这个对象就是原型，每个对象都会从原型继承属性。

proto

这个属性虽然可读可写，但是我们应该把它当做一种只读属性，在未来，该属性可能会变成不可写，尝试通过它来实现继承会造成性能问题。

每个对象都有一个 proto 原型属性，指向了该对象构造函数的原型对象，该原型对象是该对象构造函数的Prototype。

每个实例对象（ object ）都有一个私有属性（称之为 proto ）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型( proto ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

总结来说原型链就是 proto 的链表，最终指向null。

prototype和proto的不同点:

• 函数在创建的时候，就拥有prototype属性，并且为其初始化为一个拥有proto属性和constructor属性的对象，constructor属性指向该函数
• prototype是函数才有的属性，指向构造函数的原型
• proto是任意对象都有的属性，所以函数也有
• 任意构造函数的proto指向Function.prototype，因为任意函数的构造函数是function Function(){}
• proto===构造函数.prototype

说明prototype和proto

image

image

function Foo(){

}

var foo1 = new Foo()

console.log(foo1.__proto__ === Foo.prototype)

console.log(Foo.prototype.constructor === Foo)

//原型为对象，对象都是Object的实例
console.log(Foo.prototype.__proto__ === Object.prototype)

//原型链的顶端是null ，代表没有对象
console.log(Object.prototype.__proto__ === null)

//Foo也是对象，是Function构造函数的实例
console.log(Foo.__proto__ == Function.prototype)

//Function.prototype也是对象，也由Object构造函数实例化
console.log(Function.prototype.__proto__ === Object.prototype)

//Object函数也是由Function实例化
console.log(Object.__proto__ === Function.prototype)

真的是继承吗？
继承意味着复制操作，然而js不会复制对象的属性，相反，只是在两个对象之间创建一个关联，这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。

instanceof

instanceof用于判断一个对象是否为构造函数的实例

function Foo(){

}

var foo = new Foo()
//true
console.log( foo instanceof Foo)
//true
console.log( foo instanceof Object)

实际上的判断逻辑：判断对象的原型链上，是否包含构造函数的prototype

//由于原型链的顶端为null，则终止条件为null
function instanceof(obj,func){
    let proto = obj.__proto__
    let isInstanceFlag = false
    while(proto!==null){
        if(proto===func.prototype){
            isInstanceFlag = true
            break;
        }
        proto = proto.__proto__
    }
    return isInstanceFlag
}

hasOwnPrototype方法或者Object.keys()

在原型链上查找属性比较耗时，对性能有副作用，这在性能要求苛刻的情况下很重要。另外，试图访问不存在的属性时会遍历整个原型链。

要检查对象是否具有自己定义的额属性，而不是其原型链上的某个属性，使用hasOwnProperty(Object.prototype.hasOwnProperty)方法。

hasOwnProprty和Object.keys()不会遍历原型链上的属性。