美文网首页
原型与原型链

原型与原型链

作者: 饥人谷1904_陈俊锋 | 来源:发表于2019-08-28 11:56 被阅读0次

    关于原型方面的问题,有以下三句话总结:

    1. 当 new 一个函数的时候会创建一个对象,函数.prototype === 被创建对象.__proto__
    2. 一切函数都是由 Function 这个函数创建的,所以 Function.prototype === 被创建函数.__proto__
    3. 一切函数的原型对象都是由 Object 这个函数创建的,所以 Object.prototype === 一切函数.prototype.__proto__
    Function.prototype === Function.__proto__         
    Function.prototype === Object.__proto__           
    Function.prototype.__proto__ === Object.prototype 
    Function instanceof Object
    // 均为 true ~
    

    (1)任何函数都是 Function 创建,所以Function 创建了 Function,所以 Function.prototype === Function.proto
    (2)Object 也是函数。所以Function创建了Object,所以 Function.prototype === Object.proto
    (3)Function.prototype 是普通对象,普通对象是由Object创建的,所以 Function.prototype.proto === Object.prototype

    可以根据上面的代码理解原理来解决下面这些代码的问题

    Object instanceof Function
    Function instanceof Object
    Function instanceof Function
    Object instanceof Object
    // 均为 true~
    

    instanceof 的作用是判断一个对象是不是一个函数的实例。比如 obj instanceof fn, 实际上是判断fn的prototype是不是在obj的原型链上。比如: obj.proto === fn.prototype, obj.proto.proto === fn.prototype,obj.proto...proto_ === fn.prototype,只要一个成立即可。

    (1)对于 Function instanceof Function,因为 Function.proto === Function.prototype,所以为true。
    (2)对于 Object instanceof Object, 因为 Object.proto.proto === Function.prototype.proto === Object.prototype , 所以为true
    (3)对于 Function instanceof Object, 因为 Function.proto.proto === Function.prototype.proto === Object.prototype, 所以为 true
    (4)对于 Object instanceof Function, 因为 Object.proto === Function.prototype,所以为 true

    原型链.png

    由此可以看出 instanceof 内部的判断过程
    如图所示:判断 arr instanceof Object

    1. 先看 arr.__proto__ === Object.prototype 是否成立
    2. 如果不成立👆
    3. 再看arr.__proto__.__proto__ === Object.prototype 是否成立
    4. 如上一级一级的往上找,直到根基

    下面来看习题中的两题的原型图

    function People (name){
      this.name = name;
    }
    
    People.prototype.walk = function(){
      console.log(this.name + ' is walking');  
    }
    
    var p1 = new People('饥人谷');
    var p2 = new People('前端');
    
    上面代码的原型链图.png
    function People(){
    }
    var p = new People()
    p.toString()
    

    上面代码中并未添加 toString 方法,下面用原型链图做出解释

    解释.png

    参考:对原型、原型链、Function、Object的理解

    相关文章

      网友评论

          本文标题:原型与原型链

          本文链接:https://www.haomeiwen.com/subject/mnlpectx.html