美文网首页
JS 原型和原型链

JS 原型和原型链

作者: simplue | 来源:发表于2018-11-08 23:19 被阅读0次

    不是对象的“对象”

    JS中的数据类型可分为基本类型(包括数字、字符串、布尔等)和对象,这两者是有有本质差别的。你可能见过类似“JS中一切都是对象”的描述,但实际上这是不够严谨的。更合理的表述应该是“一切都可以被视作对象(或者说表现的像个对象)”。

    var a = 1
    
    // 视作对象使用
    a.toString()
    "1"
    a.name = 'foo'
    "foo"
    
    // 如果是对象的话,a.name 应该是 foo,
    // 但是实际是 undefined 属性赋值并未生效
    a.name
    undefined
    

    透过上面的例子可以知道,简单类型并非对象,其可以被视作对象使用的原因是,JS引擎在处理a.toString()时,在内部临时创建了一个与该类型匹配的临时对象(如上例 a 是数字,那么就在其内部执行new Number(1)),然后把代码中对该简单的类型的操作“转移”到临时对象上,然后将执行结果返回并输出,有点类似代理的操作。而且,这个临时对象还是“一次性”的,所以先前的修改并不会生效(如上例中的 a.name = 'foo',实际上是在临时对象上执行的,所以后续的 a.name 又是一个新的临时Number(1),所以后面的a.name自然就是undefined了)。

    原型和原型链

    在获取对象的属性时,如果对象“自身”没有,就会到其原型上找(其原型是对象的__proto__属性,和其构造函数的prototype属性相等,实际上二者是指向同一对象的),如果原型也没有,就到原型的原型找,再没有就到原型的原型的原型找,以此类推。这条原型连着原型的“链”就是原型链。

    // 定义一个构造函数 Man
    function Man() {}
    Man.prototype.name = '张三'
    "张三"
    
    // 使用 Man 构造一个对象,并为对象属性赋值
    var stranger = new Man()
    stranger.name = '李四'
    stranger.name 
    "李四"
    
    // 删除已赋值属性后,实例已经没有 name 了
    // 再次访问该属性则会沿着“链”搜寻原型的 name
    delete stranger.name
    stranger.name  // === Man.prototype.name === stranger.__proto__.name
    "张三"
    
    // 一点补充
    stranger.__proto__.constructor === Man
    true
    
    Man.prototype.constructor === stranger.__proto__.constructor
    true
    

    因为原型本身也是对象,那么原型也有原型,沿着这条链就找到最原始的原型Object.prototype,而Object.prototype还是对象,按照先前的逻辑,那么它还有原型,不过Object.prototype.__proto__ === null,这条链到此为止了。

    总结

    // 内置
    Object.prototype === {constructor: ..., toString: ..., valueOf: ..., ...}
    Function.prototype === ƒ () { [native code] }
    
    // “公式 1”
    (对象).__proto__ === (该对象的构造函数).prototype
    
    // “公式 2” Object.prototype.__proto__ 并没有指向 Object.prototype
    // 而是等于 null,故原形链到此为止,Object.prototype 就是终极原型
    Object.prototype.__proto__ === null
    
    // “公式 3” 实际上是“公式 1”的补充
    // Function.__proto__ 不等于 Object.prototype
    // Function既是函数也是对象,实际上也是满足“公式 1”的
    Function.__proto__ === Function.prototype
    
    // 一些 可能错误 的推论
    // 由公式 1 3 推导出
    (任意函数).__proto__ === Function.prototype
    (任意函数).__proto__.__proto__ === Object.prototype
    (任意函数).prototype.prototype === (任意函数).__proto__.prototype === (任意函数).prototype .__proto__=== undefined
    
    // 由公式 1 2 推导出
    (任意非 Object 函数).prototype.__proto__ === Object.prototype
    
    // 有意思的是
    // (function fn(){}).__proto__.constructor === Function
    // (function(){}).__proto__.contructor === Function.prototype.contructor !== Function
    (任意非 Object.prototype 对象).__proto__.constructor === (该对象的构造函数)
    

    一些例子,可以用来巩固原型和原型链知识

    ('1').__proto__ === String.prototype
    ({}).__proto__ === Object.prototype
    (function(){}).__proto__ === Function.prototype
    
    ===========================================
    
    String.__proto__ === Function.prototype
    Object.__proto__ === Function.prototype
    Function.__proto__ === Function.prototype
    
    ===========================================
    
    String.__proto__.__proto__ === Object.prototype
    Object.__proto__.__proto__ === Object.prototype
    Function.__proto__.__proto__ === Object.prototype
    
    ===========================================
    
    String.prototype.__proto__ === Object.prototype
    Object.prototype.__proto__ === null
    Function.prototype.__proto__ === Object.prototype
    
    ===========================================
    
    String.prototype.prototype === undefined
    Object.prototype.prototype === undefined
    Function.prototype.prototype === undefined
    
    ===========================================
    
    ('1').__proto__ === String.prototype
    ('1').__proto__.__proto__ === Object.prototype
    ('1').__proto__.__proto__.__proto__ === null
    
    ({}).__proto__.__proto__ === null
    
    String.__proto__ === Function.prototype
    String.__proto__.__proto__ === Object.prototype
    String.__proto__.__proto__.__proto__ === null
    
    ===========================================
    
    ('').__proto__.constructor === String
    (Object).__proto__.constructor === Function
    ({}).__proto__.constructor === Object
    
    ===========================================
    
    (1).prototype === undefined
    

    参考链接:
    js中为什么不能给基本类型的变量添加属性和方法?
    JavaScript深入之从原型到原型链

    相关文章

      网友评论

          本文标题:JS 原型和原型链

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