解析JavaScript原型继承的陷阱

JavaScript默认采用原型继承。虽然没有类的概念，但是它的函数可以充当构造函数。构造函数结合这个和新的可以构造类似Java的类。因此，JavaScript可以通过扩展自身来模拟基于类的继承。像其他面向对象的语言一样，JavaScript使用引用作为对象类型。保存对象的变量只是一个地址，而基本类型数据是一个值。当对象存储在原型上时，可能会有一些陷阱。看第一个例子，复制代码如下： var create=function(){ function fn(){ } return function(parent){ fn。prototype=parent return newfn}}()。Varparent={name:' jack '，age: 30，is married 3360 false } varchild=create(parent)console . log(child)create tool函数实现了一个基本的原型继承。每次调用create，都会根据父对象复制一个新对象，新对象的所有属性都来自父对象。这里，parent有三个属性，都是基本的数据类型：字符串、数字和布尔值。此时，修改子代码，看看是否会影响父代码的复制。代码如下： child . name=' lily ' child . age=20，child . is married=true console.log(子)console . log(父)。结果如下。

也就是说，修改子级不会影响父级。再看一个例子，复制代码如下： var create=function(){ function fn(){ } return function(parent){ fn。prototype=parent return newfn}}()。var parent={ data : { name : ' jack '，age: 30，isMarried: false }，language :[' Java ']} var child=create(parent)child . data . name=' lily ' child . data . age=20 child . data . ismarrive=true child . language . push(' JavaScript ')console . dir(child)console . dir(parent)注意这里的两个属性数据和parent的语言，都是引用类型，子仍然从父继承，然后修改子，结果如下。

如您所见，此时也修改了家长，这与孩子的姓名和年龄相同。这是使用原型继承时需要注意的事情。使用继承的更好方法如下：1。数据属性采用类继承(挂在这)，所以新的时候也可以用参数配置；2.该方法采用原型继承，可以节省内存。同时子类重写方法不会影响父类。下面是一个满足以上两点的写作工具函数。复制代码如下：/* * * @ param {string}类名* @ param { string/function } supercls * @ param { function }工厂*/。function $class(name，superClass，factory){ if(super Class==' ')super Class=Object function clazz(){ if(type of this . init==' function '){ this . init . apply(this，arguments)} } var p=clazz . prototype=new superCls clazz . prototype . constructor=clazz clazz . prototype . Class name=Class name var supr=superCls . prototype window[Class]=clazzfactory。call (p，supr)}当对象类型放在父类的原型上时，要小心子类修改它。此时，从父类继承的子类的所有实例都将被修改。而由此引发的bug也不容易发现。ES5增加了一个新的API来实现原型继承.它可以用来替换上述自实现的create函数，如下所示：复制代码如下： varparent={name:' jack '，age: 30，is married 3360 false } varchild=object。创建(父)控制台. log(子)。