JavaScript实现类与继承

1. 前言

有人认为JavaScript 是一门面向过程的语言。 因为基本的使用基本上都是写函数，然后调用。 ==> 这种想法是不对的。

JS的创立者是:  Brendan Eich. 在JS创立的时候， Java 以及面向对象的设计已经大行其道了。

1995年5月，Netscape做出决策，未来的网页脚本语言必须"看上去与Java足够相似"，但是比Java简单，使得非专业的网页作者也能很快上手。

基于此， 订立的设计思想是：

　　（1）借鉴C语言的基本语法；

　　（2）借鉴Java语言的数据类型和内存管理；

　　（3）借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；

　　（4）借鉴Self语言，使用基于原型（prototype）的继承机制。

因为作者本身对java 语言并不感兴趣。所以Javascript语言实际上是两种语言风格的混合产物----（简化的）函数式编程+（简化的）面向对象编程.

比较有意思的是，作者本身对于这门语言也并不是很满意==》

"与其说我爱Javascript，不如说我恨它。它是C语言和Self语言一夜情的产物"

2. Class Library

JS没有Class 的概念， 使用prototype 来实现继承机制。

对于习惯了Java 和C# 语言的类使用机制的程序员来说， 用起来就不是很顺手了。

还在JQuery 的作者 John Resig 有提供一个library . 可以在JS中使用Class 以及extend。

Class.js

[javascript]  

/*  

 * Simple JavaScript Inheritance 

 * By John Resig http://ejohn.org/ 

 * MIT Licensed. 

 * 

 ****************************************************** 

 * Example Usage 

 ****************************************************** 

 var Person = Class.extend({ 

  init: function(isDancing){ 

    this.dancing = isDancing; 

  }, 

  dance: function(){ 

    return this.dancing; 

  } 

}); 

 

var Ninja = Person.extend({ 

  init: function(){ 

    this._super( false ); 

  }, 

  dance: function(){ 

    // Call the inherited version of dance() 

    return this._super(); 

  }, 

  swingSword: function(){ 

    return true; 

  } 

}); 

 

var p = new Person(true); 

p.dance(); // => true 

 

var n = new Ninja(); 

n.dance(); // => false 

n.swingSword(); // => true 

 

// Should all be true 

p instanceof Person && p instanceof Class && 

n instanceof Ninja && n instanceof Person && n instanceof Class 

 

 ****************************************************** 

 */  

   

// Inspired by base2 and Prototype  

(function(){  

  var fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;  

  

  // The base Class implementation (does nothing)  

  this.Class = function(){};  

   

  // Create a new Class that inherits from this class  

  Class.extend = function(prop) {  

    var _super = this.prototype;  

     

    // Instantiate a base class (but only create the instance,  

    // don't run the init constructor)  

    initializing = true;  

    var prototype = new this();  

    initializing = false;  

     

    // Copy the properties over onto the new prototype  

    for (var name in prop) {  

      // Check if we're overwriting an existing function  

      prototype[name] = typeof prop[name] == "function" &&  

        typeof _super[name] == "function" && fnTest.test(prop[name]) ?  

        (function(name, fn){  

          return function() {  

            var tmp = this._super;  

             

            // Add a new ._super() method that is the same method  

            // but on the super-class  

            this._super = _super[name];  

             

            // The method only need to be bound temporarily, so we  

            // remove it when we're done executing  

            var ret = fn.apply(this, arguments);         

            this._super = tmp;  

             

            return ret;  

          };  

        })(name, prop[name]) :  

        prop[name];  

    }  

     

    // The dummy class constructor  

    function Class() {  

      // All construction is actually done in the init method  

      if ( !initializing && this.init )  

        this.init.apply(this, arguments);  

    }  

     

    // Populate our constructed prototype object  

    Class.prototype = prototype;  

     

    // Enforce the constructor to be what we expect  

    Class.prototype.constructor = Class;  

  

    // And make this class extendable  

    Class.extend = arguments.callee;  

     

    return Class;  

  };  

})();  

 

 

 

 

3. 分析

以上的Class.js 实现机制其实很简单。 使用JS 的Prototype 和argumnet、apply、 callee 这些来实现的