JavaScript继承的模拟实现
2013-07-26 18:56
435 查看
我们都知道,在JavaScript中只能模拟实现OO中的"类",也就意味着,在JavaScript中没有类的继承。我们也只能通过在原对象里添加或改写属性来模拟实现。
先定义一个父类,
一、prototype 实现:
这种方式很简单,只需把父类的实例赋值给子类的prototype属性就行了,然后子类就可以使用父亲的方法和属性了。这里其实是用到了原型链向上查找的特性,比如这个例子中的 cctest1.parentClassInfo() 方法,JavaScript会先在ChildClassByPrototype的实例中查找是否有parentClassInfo()方法,子类中没有,所以继续查找ChildClassByPrototype.prototype属性,而其prototype属性的值是ParentClass的一个实例,该实例有parentClassInfo()方法,于是查找结束,调用成功。
二、apply 实现:
JavaScript中的apply可以理解为用A方法替换B方法,第一个参数为B方法的对象本身,第二个参数为一个数组,该数组内的值为需要传递给A方法对应的参数列表,如果参数为空,即没有参数传递,可通过 new Array()、[] 来传递。
三、call + prototype 实现:
call和apply作用类似,即都是用A方法替换B方法,只是传递的参数不一样,call方法的第一个参数为B方法的对象本身,后续的参数则不用Array包装,需直接依次进行传递。既然作用差不多,为何多了一句 原型赋值呢?这是因为call方法只实现了方法的替换而没有对对象属性进行复制操作。
每种方法都有其适用环境,比如,如果父类带有有参构造函数:
这种情况下,prototype就不适用了,可选用apply或call;
实例化:
在apply和call中,又该如何取舍呢?在OO的继承中,子类继承于父类,那么它应该也是父类的类型。即,ChildClassByCall、ChildClassByApply应该也是ParentClass类型,但我们用"instanceof"检测一下就会发现,通过apply继承的子类,并非ParentClass类型。所以,我们建议用call + prototype 来模拟实现继承。据说,Google Map API 的继承就是使用这种方式哟。
参考资料:http://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp
先定义一个父类,
//父类 function ParentClass() { this.className = "ParentClass"; this.auth = "Auth"; this.version = "V1.0"; this.parentClassInfo = function () { return this.className + "\n" + this.auth + "\n" + this.version; } }
一、prototype 实现:
//子类 //1、prototype继承 function ChildClassByPrototype() { this.date = "2013-07-26"; this.classInfo = function () { return this.parentClassInfo() + "\n" + this.date; } } ChildClassByPrototype.prototype = new ParentClass(); var cctest1 = new ChildClassByPrototype(); cctest1.parentClassInfo(); cctest1.classInfo();
这种方式很简单,只需把父类的实例赋值给子类的prototype属性就行了,然后子类就可以使用父亲的方法和属性了。这里其实是用到了原型链向上查找的特性,比如这个例子中的 cctest1.parentClassInfo() 方法,JavaScript会先在ChildClassByPrototype的实例中查找是否有parentClassInfo()方法,子类中没有,所以继续查找ChildClassByPrototype.prototype属性,而其prototype属性的值是ParentClass的一个实例,该实例有parentClassInfo()方法,于是查找结束,调用成功。
二、apply 实现:
//2、apply继承 function ChildClassByApply() { ParentClass.apply(this, new Array());//ParentClass.apply(this, []); this.date = "2013-07-26"; this.classInfo = function () { return this.parentClassInfo() + "\n" + this.date; } }
JavaScript中的apply可以理解为用A方法替换B方法,第一个参数为B方法的对象本身,第二个参数为一个数组,该数组内的值为需要传递给A方法对应的参数列表,如果参数为空,即没有参数传递,可通过 new Array()、[] 来传递。
三、call + prototype 实现:
//3、call+prototype继承 function ChildClassByCall() { ParentClass.call(this, arguments); this.date = "2013-07-26"; this.classInfo = function () { return this.parentClassInfo() + "\n" + this.date; } } ChildClassByCall.prototype = new ParentClass();
call和apply作用类似,即都是用A方法替换B方法,只是传递的参数不一样,call方法的第一个参数为B方法的对象本身,后续的参数则不用Array包装,需直接依次进行传递。既然作用差不多,为何多了一句 原型赋值呢?这是因为call方法只实现了方法的替换而没有对对象属性进行复制操作。
每种方法都有其适用环境,比如,如果父类带有有参构造函数:
function ParentClass(className, auth, version) { this.className = className; this.auth = auth; this.version = version; this.parentClassInfo = function () { return this.className + "\n" + this.auth + "\n" + this.version; } }
这种情况下,prototype就不适用了,可选用apply或call;
function ChildClassByApply(className, auth, version) { ParentClass.apply(this, [className, auth, version]); this.date = "2013-07-26"; this.classInfo = function () { return this.parentClassInfo() + "\n" + this.date; } } function ChildClassByCall(className, auth, version) { ParentClass.call(this, arguments[0], arguments[1], arguments[2]); //ParentClass.call(this, className, auth, version); this.date = "2013-07-26"; this.classInfo = function () { return this.parentClassInfo() + "\n" + this.date; } } ChildClassByCall.prototype = new ParentClass();
实例化:
var cctest2 = new ChildClassByApply("ParentClass", "Auth", "V1.0"); var cctest3 = new ChildClassByCall("ParentClass", "Auth", "V1.0");
在apply和call中,又该如何取舍呢?在OO的继承中,子类继承于父类,那么它应该也是父类的类型。即,ChildClassByCall、ChildClassByApply应该也是ParentClass类型,但我们用"instanceof"检测一下就会发现,通过apply继承的子类,并非ParentClass类型。所以,我们建议用call + prototype 来模拟实现继承。据说,Google Map API 的继承就是使用这种方式哟。
参考资料:http://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp
相关文章推荐
- JavaScript模拟实现继承的方法
- javascript模拟实现继承,继承一次父类模板和原型对象
- javascript 模拟java 实现继承的5种方式
- JavaScript继承机制模拟实现
- JavaScript模拟Map的实现
- JavaScript的弱类对象及继承实现方式
- [原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】
- JavaScript实现继承的4种方法总结
- Javascript的类实现:封装、抽象与继承
- 简洁明了地用JavaScript实现单继承和多继承
- javascript继承实现
- javascript类学习(一)——构造器与原型链实现简单的继承
- 【JavaScript】实现继承的方式
- 利用javascript中的call实现继承
- javascript继承(七)—用继承的方式实现照片墙功能
- javascript里模拟sleep(两种实现方式)
- JavaScript实现继承---extend函数
- 算法-javascript自实现继承extend(单次继承原型对象和单次继承构造函数)
- Javascript 继承实现例子
- 基于JavaScript实现继承机制之调用call()与apply()的方法详解