js oop中的三種繼承方法

標籤：類的屬性   for-in迴圈   code   prot   parent   blog   java   app   多個參數   

 JS OOP 中的三種繼承方法：

 很多讀者關於js opp的繼承比較模糊，本文總結了oop中的三種繼承方法，以助於讀者進行區分。

 <繼承使用一個子類繼承另一個父類，子類可以自動擁有父類的屬性和方法。（繼承的兩方，發生在兩個類之間）>

一、通過object實現繼承

1：定義父類
function Parent(){}
2：定義子類
funtion Son(){}
3：通過原型給Object對象添加一個擴充方法。
Object.prototype.customExtend = function(parObj){
for(var i in parObj){
// 通過for-in迴圈，把父類的所有屬性方法，賦值給自己
this[i] = parObj[i];
}
}
4：子類對象調用擴充方法
Son.customExtend(Parent);

 1         // 1.定義父類 2         function Person(name,age){ 3             this.name = name; 4             this.age = age; 5             this.say = function(){ 6                 alert(this.name+":"+this.age); 7             } 8         } 9         // 2.定義子類10         function Student(no){11             this.no = no;12             this.add = function(a,b){13                 alert(a+b);14             }15         }16         function Programmer(lang){17             this.lang = lang;18             this.codding = function(){19                 alert("我愛敲代碼！敲代碼使我快樂！");20             }21         }22         // 3.通過原型給Object對象添加一個擴充方法。23         Object.prototype.customExtend = function(parObj){24             for(var i in parObj){ 25                 // 通過for-in迴圈，把父類的所有屬性方法，賦值給自己26                    this[i] = parObj[i];27             }28         }29         30         var p = new Person("小明","18");31         var s = new Student("0001");32         s.customExtend(p);//現在s繼承了p的所有屬性和方法。33         console.log(s)34         35         var pro = new Programmer("JavaScript");36         pro.customExtend(p);37         console.log(pro)38         

二、使用call和apply進行繼承

首先，瞭解一下call和apply：通過函數名調用方法，強行將函數中的this指向某個對象；
 call寫法： func.call(func的this指向的obj,參數1,參數2...);
 apply寫法： func.apply(func的this指向的obj,[參數1,參數2...]);
call與apply的唯一區別：在於接收func函數的參數方式不同。call採用直接寫多個參數的方式，而apply採用是一個數組封裝所有參數。
② 使用call和apply
1：定義父類
funtion Parent(){}
2：定義子類
function Son(){}
3：在子類中通過call方法或者apply方法去調用父類。
function Son(){
Parent.call(this,....);
}

 1 function Person(name,age){ 2             this.name = name; 3             this.age = age; 4             this.say = function(){ 5                 alert("我叫："+this.name+";今年："+this.age+"歲"); 6             } 7         } 8 function Student(no,stuName,stuAge){ 9             10             this.no = no;11             Person.call(this,stuName,stuAge);12                  }13 var stu = new Student(12,"zhangsan",14);14         stu.say();15         16         console.log(stu)

三、使用原型繼承

③ 使用原型繼承
1：定義父類
function Parent(){}
2：定義子類
function Son(){}
3：把在子類對象的原型對象聲明為父類的執行個體。
Son.prototype = new Parent();

 1 function Person(name,age){ 2             this.name = name; 3             this.age = age; 4             this.say = function(){ 5                 alert("我叫："+this.name+";今年："+this.age+"歲"); 6             } 7         } 8 function Student(no){ 9             this.no = no;10         }11         12         Student.prototype = new Person("張三",14)13         14         var stu = new Student(12);15         16         stu.say();17         18         console.log(stu)

希望以上代碼能夠協助讀者解決繼承的問題！

 

js oop中的三種繼承方法