温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何理解JavaScript中的原型与原型链

发布时间:2021-11-04 13:34:05 来源:亿速云 阅读:107 作者:柒染 栏目:web开发

本篇文章给大家分享的是有关如何理解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__是否保存着该对象的构造函数的prototype

console.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]] 指向 funcprototype 属性。

以上就是如何理解JavaScript中的原型与原型链,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI