javascript 继承 -自己动手实践

javascript 继承 , 老生长谈的东西, 大家应该都很熟悉了, 平时工作基本不会直接使用, 这段时间不忙, 所以补习了下相关基础知识 ,自己动手实践, 加深理解:

基类定义如下:

    // base class
    function Animal(t)
    {
      if(typeof t==='string')
        this.type=t;
      else
      {
        if(t)
            this.type=t.toString();
        else
            this.type='Animal'
      }
      
      this.speak=function(str)
      {
        if(str)
            console.log(this.type+' said '+str);
        else
            throw "please specify what you want to say!";
      }
    }

1.原型继承 (javascript 类库本身基于原型继承)

 String, Number , Boolean 这三大原始类型 我们可以很直接的通过prototype 检查到他们继承自Object.

 Date, RegExp ,Array 这三应该是间接继承了Object, 他们的prototype属性很特殊 :

 Date.prototype =Invalid Date

 RegExp.prototype=/(?:)/

 Array.prototype=[]

 原型继承代码如下: (可以看到Mokey 原型链上的Animal和Object)

    // Monkey : Animal 
    function Monkey(name,age)
    {
      this.name=name;
      this.age=age;
    }
    
    Monkey.prototype=new Animal('Monkey');
    
    // Example 01
    var m=new Monkey('codeMonkey',10);
        /*
        Monkey:
        age: 10
        name: "codeMonkey"
            __proto__: Animal
            speak: function (str)
            type: "Monkey"
                __proto__: Animal
                constructor: function Animal(t)
                    __proto__: Object 
        */
    console.log(m.type); // Monkey
    console.log(m.name); // codeMonkey
    console.log(m.age); // 10
    m.speak('hello world') // Monkey said hello world 

 

2. 调用父类构造函数 ( 通过传递子类的this指针 , 将原本是父类的公开成员直接添加到了子类中,从子类原型链中无法看出继承关系)

    // Human:Animal 
    function Human(id,name)
    {
       // call base class's constuctor function
      Animal.call(this,'Human');
       
      this.id=id;
      this.name=name;
    }
    
    var h=new Human(1,'leon');
    
    /*
    id: 1
    name: "leon"
    speak: function (str)
    type: "Human"
        __proto__: Human
        constructor: function Human(id,name)
            __proto__: Object
    */
    h.speak('hello world'); // Human said hello world 
    console.log(h.type); // Human

 

posted @ 2013-03-06 15:52  记忆的森林  阅读(286)  评论(0编辑  收藏  举报