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 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 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实现生成唯一会员卡号
2015/08/24 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
php实现映射操作实例详解
2019/10/02 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
asm.js使用示例代码
2013/11/28 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
Python如何获取文件路径/目录
2020/09/22 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
幼儿园家长评语大全
2014/04/16 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
助学金感谢信
2015/01/20 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers