菜单

javascript继承之为什么要继承

2019年8月3日 - 前端排行

Quiz1 Javascript真的需要类(Class)么?
我们首先先看下其他有类(Class)的面向对象语言(如:Java)的一些特性。

此方法并非笔者原创,笔者只是在前辈的基础上,加以总结,得出一种简洁实用的JavaScript继承方法。

父类与子类
父类(Superclass)和子类(Subclass),并不是为了解决父亲与儿子的问题,而是为了解决类的包含关系的,我们用Sub表示“子类”,用Sup表示“父类”,则有:
  Sub Sup
这是有区别的,例如通常我们能够将子类当成父类来使用,但认人的时候我们并不能把儿子当成父亲。
或者可以这么说,父类和子类不是为了解决类间存在相同方法或者属性的。

     
传统的JavaScript继承基于prototype原型链,并且需要使用大量的new操作,代码不够简洁,可读性也不是很强,貌似还容易受到原型链污染。

举个例子
有人喜欢这样做:
我们需要一些动物的类,以便在屏幕上创建一些移动的动物,但移动的动物有些在空中飞行,有些在路上行走。
所以创建两个父类,一个是Fly,一个是Walk:

     
笔者总结的继承方式,简洁明了,虽然不是最好的方式,但希望能给读者带来启发。

复制代码 代码如下:

      好了,废话不多说,直接看代码,注释详尽,一看就懂~~~

Class Fly{
Fly(){}
}
Class Walk{
Walk(){}
}

复制代码 代码如下:

然后狮子们(还可以再建些其他的在路上行走的动物)就属于Walk类,老鹰们(也还可以再建些其他在天上飞行的动物)就属于Fly类:

 /**
  * Created by 杨元 on 14-11-11.
  * 不使用prototype实现继承
  *
  */
 /**
  * Javascript对象复制,仅复制一层,且仅复制function属性,不通用!
  * @param obj  要复制的对象
  * @returns  Object
  */
 Object.prototype.clone = function(){
     var _s = this,
         newObj = {};
     _s.each(function(key, value){
         if(Object.prototype.toString.call(value) === “[object
Function]”){
             newObj[key] = value;
         }
     });
     return newObj;
 };
 /**
  * 遍历obj所有自身属性
  *
  * @param callback 回调函数。回调时会包含两个参数: key 属性名,value
属性值
  */
 Object.prototype.each = function(callback){
     var key = “”,
         _this = this;
     for (key in _this){
         if(Object.prototype.hasOwnProperty.call(_this, key)){
             callback(key, _this[key]);
         }
     }
 };
 /**
  * 创建子类
  * @param ext obj,包含需要重写或扩展的方法。
  * @returns Object
  */
 Object.prototype.extend = function(ext){
     var child = this.clone();
     ext.each(function(key, value){
         child[key] = value;
     });
     return child;
 };
 /**
  * 创建对象(实例)
  * @param arguments 可接受任意数量参数,作为构造器参数列表
  * @returns Object
  */
 Object.prototype.create = function(){
     var obj = this.clone();
     if(obj.construct){
         obj.construct.apply(obj, arguments);
     }
     return obj;
 };
 /**
  * Useage Example
  * 使用此种方式继承,避免了繁琐的prototype和new。
  *
但是目前笔者写的这段示例,只能继承父类的function(可以理解为成员方法)。
  * 如果想继承更丰富的内容,请完善clone方法。
  *
  *
  */
 /**
  * 动物(父类)
  * @type {{construct: construct, eat: eat}}
  */
 var Animal = {
     construct: function(name){
         this.name = name;
     },
     eat: function(){
         console.log(“My name is “+this.name+”. I can eat!”);
     }
 };
 /**
  * 鸟(子类)
  * 鸟类重写了父类eat方法,并扩展出fly方法
  * @type {子类|void}
  */
 var Bird = Animal.extend({
     eat: function(food){
         console.log(“My name is “+this.name+”. I can eat “+food+”!”);
     },
     fly: function(){
         console.log(“I can fly!”);
     }
 });
 /**
  * 创建鸟类实例
  * @type {Jim}
  */
 var birdJim = Bird.create(“Jim”),
     birdTom = Bird.create(“Tom”);
 birdJim.eat(“worm”);  //My name is Jim. I can eat worm!
 birdJim.fly();  //I can fly!
 birdTom.eat(“rice”);  //My name is Tom. I can eat rice!
 birdTom.fly();  //I can fly!

复制代码 代码如下:

您可能感兴趣的文章:

Class Lion extend Walk{
}
Class Eagle extend Fly{
}

最后对Lion和Eagle类创建一些实例,调用相应的方法,屏幕上就会有一些狮子和老鹰在移动了。
但这可能并不是一个好的设计,比如明天老板突然一拍大脑,他要有一种叫天马(Pegasus)的动物,它们即会在天上飞,又会在路上走,时而要飞行,时候要行走。
在这种情况下,这个方案就全然无用了。

为什么这个设计失败了?
继承是有条件的,子类必须能严格的向上转型(变成父类)。
在上面这个例子中:
狮子(Lion)被假设等同于行走动物(Walk),老鹰(Eagle)被假设等同于飞行动物(Fly)。
这看起来很成功,因为子类能严格向上转型,但他有隐患。
当有一种天马(Pegasus)介入到里面的时候,我们才发现狮子其实只是“会行走的动物”,老鹰其实只是“会飞行的动物”,这不意味着动物一辈子只能飞行或者行走,所以即会飞行又会行走的天马就找不到自己的归属了。
这个例子很好的证明了,子类和父类不是为了解决类间具有相同的方法的:
一些动物都会行走,需要拥有行走(Walk)这个方法,但这不应该由子类和父类实现。

组合
我们可以这样解决这个问题:

复制代码 代码如下:

Class Lion{
walker = new Walk();
walk(){
return walker.walk();
}
}
Class Eagle{
flyer = new Fly();
fly(){
return flyer.fly();
}
}
Class Pegasus{
walker = new Walk();
flyer = new Fly();
walk(){
return walker.walk();
}
fly(){
return flyer.fly();
}
}

组合是简单的在新类内部创建原有类对象。所以组合才是为了解决类间具有相同的方法的。在这个例子里面:
Walk被当成“会行走的动物应该拥有的方法集合”,同理Fly被当成“会行走的动物应该拥有的方法集合”,所以对于天马(Pegasus),我们只需要对Walk和Fly进行组合就行了。

继承的目的 继承并非代码复用的唯一方法,但继承有他的优势:
子类可以向上转型变成父类。
这样我们就可以忽略所有的子类差异,当成相同的类来操作,例如:
我们有方法fn(A),fn(B),这两个方法实际是相似的,我们想复用他们。
则我们可以通过设立一个父类C,其中A是C的子类,B是C的子类,那么fn(C)就可以复用在A和B身上了。

回到Javascript
但回到Javascript,我们发现上面的例子是不成立的。
因为Javascript本身是弱类型语言,它并不会在操作前(因为他不用编译)关注自己操作的对象类型是什么。他只会执行成功,或者发生错误。
这时候,继承显得并不必要了。那么类也就同样不是必要的了。
I have been writing JavaScript for 8 years now, and I have never once
found need to use an uber function. The super idea is fairly important
in the classical pattern, but it appears to be unnecessary in the
prototypal and functional patterns. I now see my early attempts to
support the classical model in JavaScript as a mistake.
——Douglas Crockford
我写Javascript代码已经8年了,但我从来没有发现需要使用超类函数。超类的想法在古典设计模式是非常重要的,但这在以原型和函数为基调的模式中并不必要。我现在觉得,早期我试图让Javascript支持经典模式是一个错误的决定。

安全环境 当然,你可以手动去判断类型,控制参数的类型,进而提供一个较为安全的环境。
例如同样作为弱类型脚本语言的PHP,为了模拟强类型面向对象语言设置安全环境,不得不这么做:

复制代码 代码如下:

class ShopProductWriter{
public function write( $shopProduct ){
if( ! ( $shopProduct instanceof CdProduct ) && ! ( $shopProduct
instanceof BookProduct ) ){
die( “输入错误的类型” );
}
//如果类型正确就执行一些代码
}
}

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图