JavaScript中原型链存在的问题解析


Posted in Javascript onSeptember 25, 2016

我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子。

function A () {
this.abc = 44;
}
A.prototype.getAbc = function (){
return this.abc;
};
function B() {
}
B.prototype = new A(); // B通过A的实例完成了继承,形成了原型链(B的原型就是A的实例)
var b = new B();
b.getAbc();

关系如下:b(实例) ->B.prototype = new A() -> A.prototype ->Object.prototype

可是在这种看似“漂亮”的继承方法中确存在问题。

1. 最主要的问题来自包含引用类型值的原型,我们知道共享原型是存在问题的,抛出一个例子

function Person () { 
}
Person.prototype = {
friends = ["a","b"]; 
}
var person1 = new Person();
var person2 = new Person();
person1.friends.push("c");
console.log(person1.friends); // "a","b","c"
console.log(person2.friends); //"a","b","c"

通过引用实例改变了原型中本来中的值,同时也影响了其他实例。(这就是为什么引用类型值要定义在构造函数中而非原型中的原因)

在原型链中同样也会有同样的情况出现:

function A () {
this.numbers = [1,2,3];
}
function B() {
}
B.prototype = new A();
var b = new B();
var a = new A();
b.numbers.push(4); 
b.numbers; //1234
var b2 = new B(); 
b2.numbers; //1234
a.numbers; //123

我们看到出现了和上面一样的情况(在通过原型来继承时,原型实际上会变成另一个类型的实例。于是原先的实例属性也就顺理成章的变成了现在原型属性了)。

可是我们看到A的实例a.numbers;依然是123,说明在B继承A的实例时是复制了A实例中的所有属性(包括prototype指针,形成原型链)并非引用(其实这里有疑问,是因为继承的是A()的实例所以才不会影响A()创建其他实例的表现吗?)。

2.在创建子类实例时,不可以在不影响所有对象实例的情况下给超类传递参数。

function A (light) {
this.light1 = light;
};
function B (light) {
this.light = light;
};
//给B赋值的同时,想给A赋值,无法实现
B.prototype = new A();
var C = new B(123);
console.log(C.light);
console.log(C.light1);

想实现这个需要手动调用A的构造函数,会影响其他实例

function A (light) {
this.light1 = light;
};
function B (light) {
this.light = light;
A.call(this,light);//手动调用A的构造方法
};
//给B赋值的同时,给A赋值
B.prototype = new A();
var C = new B(123);
console.log(C.light);
console.log(C.light1);

以上所述是小编给大家介绍的JavaScript中原型链存在的问题解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
深入理解vue Render函数
Jul 19 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
JavaScript制作颜色反转小游戏
Sep 25 #Javascript
JavaScript实现简单的日历效果
Sep 25 #Javascript
javascript实现根据汉字获取简拼
Sep 25 #Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 #Javascript
微信小程序前端源码逻辑和工作流
Sep 25 #Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 #Javascript
原生JS实现网络彩票投注效果
Sep 25 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
url decode problem 解决方法
2011/12/26 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
详解在Python中处理异常的教程
2015/05/24 Python
深入理解python中的atexit模块
2017/03/07 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
python实现图片转字符小工具
2019/04/30 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
农场厂长岗位职责
2013/12/28 职场文书
大学校运会广播稿
2014/02/03 职场文书
书香校园建设方案
2014/05/02 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
简短清晨问候语
2015/11/10 职场文书
关于保护环境的建议书
2019/06/24 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫