藕断丝连，JavaScript中的原型与原型链

原型和原型链关系贯穿JavaScript中的对象，而JavaScript中万物皆对象，所以原型和原型链是比较重要的概念，今天就带大家一起来看一看JavaScript中的原型与原型链。

一、了解概念(知道有这两个名词即可)

1. 原型（PRototyPE）

2. 原型链（__proto__）

二、了解从属关系

prototype  =>
 函数的一个属性         ： 同时也是一个 对象{
}
     (称之为原型对象亦可)__proto__ =>
 对象Object的一个属性   ： 同时也是一个 对象{
}
       (__proto__也就是[[Prototype]])

注：对象的__proto__保存着该对象的构造函数的prototype

a.声明一个构造函数

    function test() {
 }
          //prototype 是函数的一个属性    console.dir(Test);
        console.LOG(Test.prototype);
        // Test.prototype也是一个对象    console.log(typeof Test.prototype);
    

b.声明一个对象

    const test = new Test();
            console.log(test);
        //验证test为一个对象    console.log(typeof test);
        //__proto__是对象的一个属性    console.log(test.__proto__);
        console.log(Test.prototype);
        //对象的__proto__属性存储着Test.prototype    console.log(test.__proto__ === Test.prototype);
        // test.__proto__也是一个对象    console.log(typeof test.__proto__);
    

function Test() {
}
    console.log(Test.prototype);
     //验证函数是否有prototype属性let test = new Test();
    console.dir(test.__proto__);
     //验证对象是否有__proto__属性console.log(test.__proto__ === Test.prototype);
    //验证对象的__ptoto__是否保存着该对象的构造函数的prototypeconsole.log(Test.prototype.__proto__ === Object.prototype);
    //Test.prototype（是一个对象）的__proto__属性是否是对象的原型属性console.log(Object.prototype.__proto__);
    //原型链的顶层没有__proto__属性 null

三、深入认识原型链、原型和原型继承

    function Test(){
}
        let test =new Test();
        test.a= 10;
        //test.__proto__ === test.constructor.prototype    test.__proto__.b1=11;
    //对象的__proto__属性存储着对象构造函数的prototype属性    Test.prototype.b2=11;
           test.__proto__.__proto__.c1=12;
        Object.prototype.c2=12;
        console.log(test);
        console.log(Test.prototype);
        console.log(Object.prototype.__proto__);
       /*逐层解析    * test{
    *        a = 10    *        __proto__:Test.prototype{
    *                 b = 11    *                 __proto__:Object.prototype{
    *                           c = 12    *                           X__prototype__:null    *                 }
             *        }
    *     }
        *    * */

四、总结

• 不建议直接用 __proto__ 访问。

• 可以简单概括为以prototype为原型节点, __proto__为原型链条。

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

• someObject.[[Prototype]] 符号是用于指向 someObject 的原型,someObject.[[Prototype]] === __proto__(JavaScript的非标准但许多浏览器实现的属性)。

• Object.prototype 属性表示 Object 的原型对象。

• 被构造函数创建的实例对象的 [[Prototype]] 指向 func的 prototype 属性。

推荐视频：《JavaScript极速入门_玉女心经系列》、《独孤九贱(6)_jquery视频教程》

以上就是藕断丝连，JavaScript中的原型与原型链的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！