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 相关文章推荐
kmock javascript 单元测试代码
Feb 06 Javascript
简单的jQuery入门指引
Jul 28 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
PHP7 弃用功能
2021/03/09 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
python安装twisted的问题解析
2018/08/21 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python绘制汉诺塔
2021/03/01 Python
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
刑事附带民事上诉状
2015/05/23 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers