JavaScript中原型链存在的问题解析

JavaScript中原型链存在的问题解析

作者：南山老幺 字体：[增加 减小] 类型：转载 时间：2016-09-25 我要评论

本文通过实例给大家介绍js原型链存在的问题解析，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧

id="iframeu2261530_0" src="http://pos.baidu.com/lcfm?sz=680x200&rdid=2261530&dc=2&di=u2261530&dri=0&dis=0&dai=2&ps=0x0&coa=at%3D3%26rsi0%3D680%26rsi1%3D200%26pat%3D6%26tn%3DbaiduCustNativeAD%26rss1%3D%2523FFFFFF%26conBW%3D1%26adp%3D1%26ptt%3D0%26titFF%3D%2525E5%2525BE%2525AE%2525E8%2525BD%2525AF%2525E9%25259B%252585%2525E9%2525BB%252591%26titFS%3D14%26rss2%3D%2523000000%26titSU%3D0%26ptbg%3D90%26piw%3D0%26pih%3D0%26ptp%3D0&dcb=BAIDU_SSP_define&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1474858781365&ti=JavaScript%E4%B8%AD%E5%8E%9F%E5%9E%8B%E9%93%BE%E5%AD%98%E5%9C%A8%E7%9A%84%E9%97%AE%E9%A2%98%E8%A7%A3%E6%9E%90_javascript%E6%8A%80%E5%B7%A7_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&ari=2&dbv=2&drs=1&pcs=1347x599&pss=1347x3128&cfv=0&cpl=6&chi=1&cce=true&cec=GBK&tlm=1474790426&rw=599&ltu=http%3A%2F%2Fwww.jb51.net%2Farticle%2F93476.htm&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DTmTWT5CLDlEUVQLmq2vBlSU4dbcmQfkbLD1aCS1McSn91CtyB2IxvOA8EGkU4FDG%26wd%3D%26eqid%3Ddf22314b0005bde50000000657e88f21&ecd=1&psr=1366x768&par=1366x728&pis=-1x-1&ccd=24&cja=false&cmi=8&col=zh-CN&cdo=-1&tcn=1474858782&qn=84a5a8f34388a294&tt=1474858778858.3172.3174.3177" width="680" height="200" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">

我们知道使用原型链实现继承是一个goodway：）看个原型链继承的例子。

?

1 2 3 4 5 6 7 8 9 10 11

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. 最主要的问题来自包含引用类型值的原型，我们知道共享原型是存在问题的，抛出一个例子

?

1 2 3 4 5 6 7 8 9 10

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"

通过引用实例改变了原型中本来中的值，同时也影响了其他实例。（这就是为什么引用类型值要定义在构造函数中而非原型中的原因）

在原型链中同样也会有同样的情况出现：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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.在创建子类实例时，不可以在不影响所有对象实例的情况下给超类传递参数。

?

1 2 3 4 5 6 7 8 9 10 11

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的构造函数，会影响其他实例

?

1 2 3 4 5 6 7 8 9 10 11 12

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中原型链存在的问题解析,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！