js系列-4 繼承

繼承能達到代碼的複用，js的繼承不是基於類型的繼承，而是基於原型的繼承，也就是說直接從其他已有對象繼承。

當一個函數對象被創建時，Function構造器產生的函數對象會運行類似這樣的一些代碼：

this.prototype={constructor:this}

這個prototype對象是存放繼承特徵的地方，因爲這個對象在出現在實例的原型鏈上。

 

js不知道哪個函數對象會作爲構造器，所以每個函數都有prototype屬性。

1），對象冒充：

//對象冒充方式實現繼承
functionParent(name){
       this.name = name;
       this.showName = function(){
           alert(this.name);
}
}
functionChild(name,age){
//最重要的三行代碼,先設一個引用指向一個函數,
//這個函數是父對象的構造方法,然後用引用調用這個函數
//這時候父對象的this已經變成子對象了，這樣就將子對象的name賦值
//並且子對象也擁有了showName這個方法
//然後刪除該引用
this.method =Parent;
this.method(name);
deletethis.method;
         
this.age=age;
this.showAge =function(){
alert(age);
}
}
varp = new Parent("zhang");
p.showName();
varc = new Child("li",12);
c.showName();
c.showAge();

2）c all方式實現繼承：

      c all方法的使用，c all方法是Function對象中的方法，因此我們定義的每個函數都擁有該方法，可以通過函數名來調用c all方法，c all方法的第一個參數會被傳遞給函數中的this。從第二個參數開始，逐一賦值給函數中的參數。

function Hello(age,gender){
       alert(this.name+" : "+age+" :"+gender);
   }
   var obj = new Object();
   obj.name="zhang"
   Hello.c all(obj,12,"M");
   打印出來的是：zhang : 12 : M
   //使用c all方法實現繼承
   function Parent(name){
       this.name = name;
       this.sayHello=function(){
          alert(this.name);
       }
   }
   function Child(name,password){
       Parent.c all(this,name);
       this.password= password;
       this.sayWorld=function(){
          alert(this.password);
       }
   }
   var parent = newParent("zhang");
   var child = newChild("lisi","123");
   parent.sayHello();
   child.sayHello();
   child.sayWorld();

3）使用a pply方法實現繼承：

     a pply也是Function對象的一個方法，他的使用方法與c all一樣，只是第二個參數以後的參數是以數組形式呈現的。

 //使用appl y方法實現繼承
   function Parent(name){
       this.name = name;
       this.sayHello=function(){
          alert(this.name);
       }
   }
   function Child(name,password){
       Parent.app ly(this,[name]);
       this.password= password;
       this.sayWorld=function(){
          alert(this.password);
       }
   }
   var parent = newParent("zhang");
   var child = newChild("lisi","123");
   parent.sayHello();
   child.sayHello();
   child.sayWorld();

4）使用原型鏈的方式實現繼承：   

//使用原型鏈方式實現繼承
functionParent(){}
 Parent.prototype.name="Hello";
  		 Parent.prototype.sayHello=function(){
       alert(this.name)
   };
   function Child(){}
   Child.prototype=new Parent();
   Child.prototype.password="world";
   Child.prototype.sayWorld=function(){
       alert(this.password)
   };
   var child = newChild();
   child.sayHello();
   child.sayWorld();

這種方式的缺點是無法實現參數傳遞

5）使用混合方式（原型+c all）實現繼承（推薦）

//使用混合方式實現繼承
   function Parent(name){
       this.name=name;
   }
   Parent.prototype.sayHello=function(){
       alert(this.name)
   };
   function Child(name,password){
       Parent.c all(this,name);
       this.password=password;
   }
   Child.prototype=newParent(); 
    //上面等於Child.prototype.__proto__ = Parent.prototype
   Child.prototype.sayWorld=function(){
       alert(this.password)
   };
   var child = newChild("zhang","123");
   child.sayHello();
//1，child上找（找不到）2，child.__proto__（Child.prototype）上找(找不到)。3，Child.prototype.__proto__（Parent.prototype）上找（找到了）
   child.sayWorld();