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 EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
es5 类与es6中class的区别小结
Nov 09 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实现变色验证码实例
2014/01/06 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
HTML5附件拖拽上传drop & google.gears实现代码
2011/04/28 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
js数组操作常用方法
2014/05/08 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
python下载图片实现方法(超简单)
2017/07/21 Python
python 图像平移和旋转的实例
2019/01/10 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python 自由定制表格的实现示例
2020/03/20 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
上海微创软件面试题
2012/06/14 面试题
人事任命书范文
2014/06/04 职场文书
国贸专业求职信
2014/06/28 职场文书
公务员考察材料
2014/12/23 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
歼十出击观后感
2015/06/11 职场文书