本篇文章给大家分享的是有关如何理解JavaScript中的原型与原型链,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
原型和原型链关系贯穿JavaScript
中的对象,而JavaScript
中万物皆对象,所以原型和原型链是比较重要的概念,今天就带大家一起来看一看JavaScript
中的原型与原型链。
一、了解概念(知道有这两个名词即可)
原型(prototype
)
原型链(__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]]
指向 func
的 prototype
属性。
以上就是如何理解JavaScript中的原型与原型链,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。