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} classImp */ function $class(className, superCls, classImp) { var p, supr if(superCls === '') superCls = Object function clazz() { if(typeof this.init == "function") { this.init.apply(this, arguments) } } p = clazz.prototype = new superCls() clazz.prototype.constructor = clazz clazz.prototype.className = className supr = superCls.prototype window[className] = clazz classImp.apply(p, [supr]) }
对象类型放在父类原型上时务必小心子类修改其,这时继承于该父类的所有子类的实例都将被修改。而这造出的bug很不容易发现。
ES5中加入了一个新API用来实现原型继承:Object.create。可以用它替代上面自实现的create函数,如下
var parent = { name: 'jack', age: 30, isMarried: false } var child = Object.create(parent) console.log(child)
相关推荐
理解Javascript原型继承原理
浅析Javascript原型继承,浅析Javascript原型继承
javascript原型继承,prototype的使用,可以像java一样继承
浅析javascript原型继承机制,浅析javascript原型继承机制
Javascript原型继承Javascript原型继承Javascript原型继承
javascript原型继承机制参考.pdf
javascript原型继承机制借鉴.pdf
javascript原型继承机制归类.pdf
javascript原型继承机制[整理].pdf
javascript原型继承工作原理和实例详解_.docx
JavaScript默认采用原型继承。虽然没有类(class)的概念,它的函数(function)可以充当构造器(constructor)。构造器结合this,new可以构建出类似Java的类。因此,JavaScript通过扩展自身能模拟类式(class-based)继承。...
Javascript原型对象、this的5钟用法、原型继承、Caller和Callee的使用.docx
深入理解javascript原型和闭包(01)——一切都是对象 深入理解javascript原型和闭包(02)——函数和对象的关系
证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考《面向对象JS基础讲解,工厂模式、构造函数模式、原型模式、混合模式、动态原型模式》,接下来讲一般通过那些方法完成JavaScript的继承。...
面向对象概念(对象封装,各种继承,闭包原理,this作用域等)介绍清晰易懂
JavaScript 是基于原型的面向对象语言。也就是说,每个实例对象都具有一个原型。对象从该原型中继承属性和方法。这一篇将具体说说构造函数的继承。
真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承。 原型与原型链 说原型继承之前还是要先说说原型和原型链,毕竟这...
这篇文章主要介绍了JavaScript原型继承和原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在讨论原型继承之前,先回顾一下关于创建自定义类型的...
更有甚者,JavaScript属于使用原型式继承(我们会向你证明这其实是一个极大的优点)的少数语言之一。得益于这种语言的灵活性,你既可使用标准的基于类的继承,也可使用更微妙一些(但也可能更有效一些)的原型式继承...