JavaScript继承的模拟实现

  咱们都知道,在JavaScript中只能模拟实现OO中的"类",也就意味着,在JavaScript中没有类的继承。咱们也只能经过在原对象里添加或改写属性来模拟实现。数组

先定义一个父类,app

1         //父类
2         function ParentClass() {
3             this.className = "ParentClass";
4             this.auth = "Auth";
5             this.version = "V1.0";
6             this.parentClassInfo = function () {
7                 return this.className + "\n" + this.auth + "\n" + this.version;
8             }
9         }

1、prototype 实现: 函数

 1         //子类
 2         //一、prototype继承
 3         function ChildClassByPrototype() {
 4             this.date = "2013-07-26";
 5             this.classInfo = function () {
 6                 return this.parentClassInfo() + "\n" + this.date;
 7             }
 8         }
 9 
10         ChildClassByPrototype.prototype = new ParentClass();
11 
12         var cctest1 = new ChildClassByPrototype();
13         cctest1.parentClassInfo();
14         cctest1.classInfo();

   这种方式很简单,只需把父类的实例赋值给子类的prototype属性就好了,而后子类就可使用父亲的方法和属性了。这里实际上是用到了原型链向上查找的特性,好比这个例子中的 cctest1.parentClassInfo() 方法,JavaScript会先在ChildClassByPrototype的实例中查找是否有parentClassInfo()方法,子类中没有,因此继续查找ChildClassByPrototype.prototype属性,而其prototype属性的值是ParentClass的一个实例,该实例有parentClassInfo()方法,因而查找结束,调用成功。

2、apply 实现:
this

1         //二、apply继承
2         function ChildClassByApply() {
3             ParentClass.apply(this, new Array());//ParentClass.apply(this, []);
4             this.date = "2013-07-26";
5             this.classInfo = function () {
6                 return this.parentClassInfo() + "\n" + this.date;
7             }
8         }

 

   JavaScript中的apply能够理解为用A方法替换B方法,第一个参数为B方法的对象自己,第二个参数为一个数组,该数组内的值为须要传递给A方法对应的参数列表,若是参数为空,即没有参数传递,可经过 new Array()、[] 来传递spa

3、call + prototype 实现: prototype

1         //三、call+prototype继承
2         function ChildClassByCall() {
3             ParentClass.call(this, arguments);
4             this.date = "2013-07-26";
5             this.classInfo = function () {
6                 return this.parentClassInfo() + "\n" + this.date;
7             }
8         }
9         ChildClassByCall.prototype = new ParentClass();

  callapply做用相似,即都是用A方法替换B方法,只是传递的参数不同,call方法的第一个参数为B方法的对象自己,后续的参数则不用Array包装,需直接依次进行传递。既然做用差很少,为什么多了一句 原型赋值呢?这是由于call方法只实现了方法的替换而没有对对象属性进行复制操做。
code

  每种方法都有其适用环境,好比,若是父类带有有参构造函数:对象

1         function ParentClass(className, auth, version) {
2             this.className = className;
3             this.auth = auth;
4             this.version = version;
5             this.parentClassInfo = function () {
6                 return this.className + "\n" + this.auth + "\n" + this.version;
7             }
8         }

这种状况下,prototype就不适用了,可选用apply或call;blog

 1         function ChildClassByApply(className, auth, version) {
 2             ParentClass.apply(this, [className, auth, version]);
 3             this.date = "2013-07-26";
 4             this.classInfo = function () {
 5                 return this.parentClassInfo() + "\n" + this.date;
 6             }
 7         }
 8 
 9
10         function ChildClassByCall(className, auth, version) {
11             ParentClass.call(this, arguments[0], arguments[1], arguments[2]); //ParentClass.call(this, className, auth, version);
12             this.date = "2013-07-26";
13             this.classInfo = function () {
14                 return this.parentClassInfo() + "\n" + this.date;
15             }
16         }
17         ChildClassByCall.prototype = new ParentClass();

实例化:继承

1        var cctest2 = new ChildClassByApply("ParentClass", "Auth", "V1.0");
2        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

相关文章
相关标签/搜索