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 相关文章推荐
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
vue中jsonp插件的使用方法示例
Sep 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/07/23 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
javascript document.referrer 用法
2009/04/30 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
python实现五子棋程序
2020/04/24 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
学雷锋演讲稿
2014/03/04 职场文书
技术合作协议书范本
2014/04/18 职场文书
促销活动总结模板
2014/07/01 职场文书
员工保密协议书
2014/09/27 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang