图解原型和原型链的关系

十分感谢参考中三篇文章的作者，笔者结合自身的知识和对文章的理解，总结了如下笔记和图
- 每个实例的__proto__属性指向它的构造函数的原型(prototype)上
  - 如：myPuppy的构造函数是Puppy，所以它的__proto__指向Puppy.prototype
  - Puppy的构造函数是Function，所以它的__proto__指向Function.prototype
  - Puppy.prototype的构造函数是Object,所以它的__proto__指向Object.prototype
  - Object.prototype没有构造函数，所以它的__proto__指向null
- 每个实例对象在查找一个属性时先找自身，然后再沿着__proto__这条原型链上寻找
- 每条原型链的最顶层是Object.prototype._ _proto _ _ -> null
- 静态方法在构造函数上，实例方法在实例上

补充

总结

最近在复习到instanof的时候，发现之前对原型和原型链的知识总结不够全面，因此在此补充
- 函数都是由Function创建的，而prototype属性指向的空间则是由function Object创建的
- __ proto __ 属性指向它的构造函数的原型上
- 特别的：Function.__ proto __ 指向Function.prototype，Object.prototype.__ proto __ 指向null

instanceof

object instanceof constructor：沿着object的原型链上判断是否存在constructor的原型

function instance_of(L,R) {
    var L = L.__proto__
    var R_pro = R.prototype
    // L不断沿着__proto__属性上寻找R.prototype
    while (true) {
        if (L === null) return false // Object.prototype.__proto__ 或 Object.create(null)
        else if (L === R_pro) return true
        L = L.__proto__
    }
}

测试案例

console.log('----------------------')
console.log(String instanceof String) // false
console.log(Object instanceof Object) // true
console.log(Function instanceof Function) // Function.prototype true
console.log(Function instanceof Object) // Object.prototype true

function Foo(){} 
function BFoo(){} 
Foo.prototype = new BFoo()
console.log(Foo instanceof Function) // Function.prototype true
console.log(Foo instanceof Foo) // false



console.log('----------------------')
console.log(instance_of(String,String))
console.log(instance_of(Object,Object))
console.log(instance_of(Function,Function))
console.log(instance_of(Function,Object))

function Foo1(){} 
function BFoo1(){} 
Foo1.prototype = new BFoo1()
console.log(instance_of(Foo1,Function))
console.log(instance_of(Foo1,Foo1))

JavaScript原型和原型链

图解原型和原型链的关系

补充

总结

instanceof

参考