浅析JavaScript原型继承的陷阱
更新时间：2013年12月03日 09:50:40 作者：
JavaScript和其它面向对象语言一样，对象类型采用引用方式。持有对象的变量只是一个地址，而基本类型数据是值。当原型上存储对象时，就可能有一些陷阱
JavaScript默认采用原型继承。虽然没有类(class)的概念，它的函数(function)可以充当构造器(constructor)。构造器结合this，new可以构建出类似Java的类。因此，JavaScript通过扩展自身能模拟类式(class-based)继承。
JavaScript和其它面向对象语言一样，对象类型采用引用方式。持有对象的变量只是一个地址，而基本类型数据是值。当原型上存储对象时，就可能有一些陷阱。
先看第一个例子
复制代码 代码如下:
var create = function() {
function Fn() {}
return function(parent) {
Fn.prototype = parent
return new Fn
}
}()
var parent = {
name: 'jack',
age: 30,
isMarried: false
}
var child = create(parent)
console.log(child)
create工具函数实现了一个基本的原型继承，每次调用create都会根据parent对象去复制一个新对象，新对象全部的属性都来自于parent。这里parent有三个属性，都是基本数据类型：字符串，数字，布尔。
这时修改child看看会不会影响parent
复制代码 代码如下:
child.name = 'lily'
child.age = 20,
child.isMarried = true
console.log(child)
console.log(parent)
结果如下
即修改child不会影响到parent。
再看看另外一个例子
复制代码 代码如下:
var create = function() {
function Fn() {}
return function(parent) {
Fn.prototype = parent
return new Fn
}
}()
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.isMarried = true
child.language.push('javascript')
console.dir(child)
console.dir(parent)
注意这里的parent的两个属性data，language都是引用类型，一个是对象，一个是数组。child仍然继承与parent，随后修改了child，结果如下
可以看到，此时parent也被修改了，和child的name，age等都一样了。这是使用原型继承时需要注意的。
使用继承时比较好的方式是：
1，数据属性采用类式继承（挂在this上），这样new时也可以通过参数配置
2，方法采用原型继承，这样能节省内存，同时子类重写方法也不会影响父类
下面是一个满足以上2点的写类工具函数
复制代码 代码如下:
/**
* @param {String} className
* @param {String/Function} superCls
* @param {Function} factory
*/
function $class(name, superClass, factory) {
if (superClass === '') superClass = Object
function clazz() {
if (typeof this.init === 'function') {
this.init.apply(this, arguments)
}
}
var p = clazz.prototype = new superCls
clazz.prototype.constructor = clazz
clazz.prototype.className = className
var supr = superCls.prototype
window[className] = clazz
factory.call(p, supr)
}
对象类型放在父类原型上时务必小心子类修改其，这时继承于该父类的所有子类的实例都将被修改。而这造成的bug很不容易发现。
ES5中加入了一个新API用来实现原型继承：Object.create。可以用它替代上面自实现的create函数，如下
复制代码 代码如下:
var parent = {
name: 'jack',
age: 30,
isMarried: false
}
var child = Object.create(parent)
console.log(child)
相关文章
这篇文章主要介绍了js控制网页前进和后退的方法,涉及javascript中history.go方法的相关使用技巧,非常简单实用,需要的朋友可以参考下2015-06-06
下面小编就为大家带来一篇jQuery Mobile动态刷新页面样式的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了获取XMLHttpRequest对象的三种方式,需要的朋友可以参考下2014-04-04
这篇文章主要为大家详细介绍了JS、CSS和HTML实现注册页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要介绍了JS简单获取日期相差天数的方法,涉及javascript日期时间的转换与运算相关操作技巧,需要的朋友可以参考下2017-04-04
这篇文章主要为大家介绍了使用SpreadJS快速清除Excel中工作表保护密码方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要介绍了自制微信公众号一键排版工具的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要为大家详细介绍了纯js+css实现在线时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
在做3D项目时，我们经常需要模拟下雨，下雪的天气，有时也会模拟喷泉、着火等效果。这些效果需要使用名为粒子系统(particle)的技术来实现。使用ThingJS可以快速编写粒子效果，本文就来看看如何实现2021-05-05
这篇文章主要介绍了鼠标悬浮停留三秒后显示大图，在网页中还是比较实用的，下面是示例代码2014-09-09
最新评论