DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺析2種JavaScript繼承方式
淺析2種JavaScript繼承方式
編輯:關於JavaScript     

js繼承方法最主要的是2種,一種是通過原型的方式,一種是通過借用call&apply的構造函數方式。
1.原型(prototype):

function Body(name,age){// 創建一個Body類
  this.name = name;// 賦予基礎屬性name、age
  this.age = age;
}
Body.prototype.sayName =function() {// 給原型定義一個sayName的方法
  console.log(this.name);
}
var a = new Body('wutao','10');//創建一個Body的實例對象

function Another(){}
Another.prototype = new Body('www');//將Body實例對象給新創建的子類(Another)的prototype屬性,這樣,Another就擁有了Body的屬性和方法
var b = new Another();//創建Another子類的實例
Another.prototype.sex ="mail";//定義子類的屬性及方法
Another.prototype.saySex = function(){
  console.log(this.sex);
}
a.sayName();//wutao
b.sayName();//www 實例b擁有父類Body的方法sayName
b.saySex();//mail 實例b擁有自己定義的方法saySex

2.借用構造函數(call&apply),也可以理解為組合式繼承
call:

function Person(name){
  this.name = name;
  this.sayHello = function(){
    console.log(this.name);
  }
}

function Son(name,age){
  Person.call(this,name,age);//call用法:將this指針指向父類構造函數,並依次傳入參數,使其擁有父類的屬性和方法
  this.age = age;
  this.sayFunc = function(){
    console.log(this.name+"-"+this.age);
  } 
}
var a = new Person('wutao');
var b = new Son("wwwwww",22);
a.sayHello();//wutao
b.sayHello();//wwwwww; 通過call繼承來的父類Person的方法sayHello
b.sayFunc();//wwwwww-22

apply:

function Person(name){
  this.name = name;
  this.sayHello = function(){
    console.log(this.name);
  }
}

function Son(name,age){
  Person.apply(this,[name,age]);//apply用法:類似call,將this指針指向父類構造函數,並傳入一個由參數組成的數組參數,使其擁有父類的屬性和方法
  this.age = age;
  this.sayFunc = function(){
    console.log(this.name+"-"+this.age);
  } 
}
var a = new Person('wutao');
var b = new Son("ttt",222);
a.sayHello();//wutao
b.sayHello();//ttt;通過apply繼承來的父類Person的方法sayHello
b.sayFunc();//ttt-222

 js最主要的繼承方法就這2種,當然,還有幾種繼承方法,但是有些繼承方式在創建了實例之後,修改實例方法和屬性會直接修改原型的方法和屬性,那這樣的繼承就顯得意義不大了,除非是業務有類似的需求才會去用到。

以上就是關於JavaScript繼承方式的詳細介紹,希望對大家的學習有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved