您现在的位置是:群英 > 开发技术 > web开发
JavaScript原型链的概念是什么,如何掌握原型链
Admin发表于 2022-05-14 17:48:2344 次浏览
在实际案例的操作过程中,我们可能会遇到“JavaScript原型链的概念是什么,如何掌握原型链”这样的问题,那么我们该如何处理和解决这样的情况呢?这篇小编就给大家总结了一些方法,具有一定的借鉴价值,希望对大家有所帮助,接下来就让小编带领大家一起了解看看吧。

1.原型链

1.1 原型链解释:

  1. (概念) 原型链指一些原型通过__proto__指针构成的链表,一个原型链可以为想共享原型链中数据的对象服务,用于实现JavaScript中的继承机制。

  2. (原型链指针) 原型链中涉及到的指针:

    • 每个对象都有一个__proto__指针来访问对象的原型
    • 每个原型都是一个用于实现继承的对象,除了有__proto__指针之外,还有constructor指针指向构造函数
    • 每个函数都是一个对象,除了有__proto__指针之外,还有prototype指针指向与之关联的原型对象,prototype的指向和__proto__指向不一定相同。

1.2 不涉及继承的原型链图示:

  1. 构造函数类型原型链:原型链服务的对象由构造函数产生 (这张图非常重要,涉及了底层的链,网上也有类似的图)
function A() {

}
let a1 = new A()
let a2 = new A()
let a3 = new A()
// 这几行代码会产生下面图示的原型链

  1. 非构造函数类型原型链:原型链服务的对象由工厂函数,对象字面量,Object.create等方式产生
let A = {
    test: ""
}
let a1 = Object.create(A)
let a2 = Object.create(A)
let a3 = Object.create(A)
// 这几行代码对应下面图示的原型链

  1. 简化的原型链:实际考虑原型链时往往不需要考虑“构造函数Function的实例对应的原型链”,甚至"原型链终点"和"Object.prototype"都不需要考虑。因为涉及到复杂的继承关系时考虑这些偏底层的内容不利于分析。一般分析时使用下面的两个简化图分析即可。
function A() {

}
let a1 = new A()
let a2 = new A()
let a3 = new A()
// 这几行代码会产生下面图示的原型链

1.3 涉及继承的原型链图示

涉及继承的原型链使用简化图分析即可

// 使用寄生组合模式实现继承
function C() {}
function B() {}
B.prototype = new C()
function A() {}
A.prototype = new B()

let a1 = new A()
let a2 = new A()
let a3 = new A()

1.4 原型链终点

原型链的终点是null,并不是指某个原型对象

1.5 原型的动态性

原型的动态性在“面向对象编程”中详细解释过,主要涉及的是原型的重写和修改。这里列举几个例题。
例题1—原型的动态性

var A = function() {};
A.prototype.n = 1;
var b = new A();
A.prototype = {
    n: 2,
    m: 3
}
var c = new A();

console.log(b.n); // 1
console.log(b.m); // undefined

console.log(c.n); // 2
console.log(c.m); // 3

例题2—原型的动态性&原型链底层链

var F = function() {};

Object.prototype.a = function() {
    console.log('a');
};

Function.prototype.b = function() {
    console.log('b');
}

var f = new F();

f.a(); // a
f.b(); // 并不存在b属性

F.a(); // a
F.b(); // b

参考上述提到的“不涉及继承的原型链图示”中的第一幅图可以画出如下简化参考图分析问题。

例题3—原型动态性&原型链底层链

function Person(name) {
    this.name = name
}
let p = new Person('Tom');
console.log(p.__proto__) //  Person.prototype
console.log(Person.__proto__) // Function.prototype

例题4—原型动态性&原型链底层链

var foo = {}, F = function(){};
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';
Object.prototype = {
    a: "value a"
}
Function.prototype = {
    b: "value b"
}

console.log(foo.a); // value a
console.log(foo.b); // undefined

console.log(F.a); // value a
console.log(F.b); // value b

参考上述提到的“不涉及继承的原型链图示”中的第一幅图可以画出如下简化参考图分析问题。由于foo和F声明时它们就将自己的原型进行绑定,它们通过栈内存中存储的指针获取堆内存中存储的原型的地址。首先进行了原型的修改操作,修改操作会在堆内存上修改原型,foo和F通过栈内存的指针仍然可以访问到修改后的结果。第二步进行了原型的重写,JS都是“传值操作”,重写原型后,首先在堆内存中开辟一块新空间存储新的原型,然后在栈内存重新开辟一个空间存储指向堆内存的指针。此时由于foo和F持有的栈内存指针和新的栈内存指针不同,所以foo和F无法访问到重写后的原型。


通过以上内容的阐述,相信大家对“JavaScript原型链的概念是什么,如何掌握原型链”已经有了进一步的了解,更多相关的问题,欢迎关注群英网络或到群英官网咨询客服。

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

标签: 原型链
相关信息推荐
2022-05-11 12:01:35 
摘要:这篇文章主要介绍了php微信小程序解包过程实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-01-30 17:26:46 
摘要:HTML中表格边框不显示怎样实现?我们在使用table、th、td元素实现表格的时候,是默认有边框的,那么我们先要去除这个边框要怎样做呢?接下来给大家分享两个方法,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。
2022-05-13 17:50:44 
摘要:本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于旋转数组的相关问题,包括了什么是旋转数组、环状替换等等内容,下面一起来看一下,希望对大家有帮助。
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部