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 相关文章推荐
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
layui表格实现代码
May 20 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 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遍历目录与文件夹的多种方法详解
2013/11/14 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
python处理cookie详解
2014/02/07 Python
Python实现简单状态框架的方法
2015/03/19 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
python清理子进程机制剖析
2017/11/23 Python
Python函数中不定长参数的写法
2019/02/13 Python
举例讲解Python常用模块
2019/03/08 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
python实现扫雷小游戏
2020/04/24 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
研讨会主持词
2014/04/02 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
鼋头渚导游词
2015/02/05 职场文书