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 相关文章推荐
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 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 读取文件乱码问题
2010/02/20 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
Node.js实现文件上传
2016/07/05 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
Python subprocess模块学习总结
2014/03/13 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
详解python while 函数及while和for的区别
2018/09/07 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
教师节商场活动方案
2014/02/13 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
2014年征兵标语
2014/06/20 职场文书
街道社区活动报告
2015/02/05 职场文书
亮剑观后感
2015/06/05 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python