在JavaScript中,繼承是一種允許在已有類別的基礎上創建新類別的機制;繼承為子類別提供了靈活性,可以重複使用父類別的方法和變量,繼承的過程就是一般到特殊的過程,可以利用原型鏈、建構函數來實現繼承。
本教學操作環境:windows10系統、javascript1.8.5版、Dell G3電腦。
JavaScript繼承是一種允許我們在已有類別的基礎上建立新類別的機制;它為子類別提供了靈活性,可以重複使用父類別的方法和變數。繼承的過程,就是從一般到特殊的過程。
它維持著一種IS-A關係。
extends關鍵字用於類別表達式或類別聲明中。
使用extends關鍵字,我們可以獲得內建物件的所有屬性和行為以及自訂類別。
我們也可以使用基於原型的方法來實現繼承。
JavaScript如何實現繼承?
1、原型鏈
基本概念:利用原型讓一個引用型別繼承另外一個引用型別的屬性和方法。
建構函數,原型,實例之間的關係:每個建構函數都有一個原型對象,原型對象包含一個指向建構函數的指針,而實例都包含一個指向原型對象的內部指針。
原型鏈實作繼承例子:
function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function() {return this.property;}function subType() {this.property = false;}//繼承了SuperTypeSubType.prototype = new SuperType ();SubType.prototype.getSubValue = function (){return this.property;}var instance = new SubType();console.log(instance.getSuperValue());//true2、借用構造函數
基本概念:在子類型建構函數的內部呼叫超類別建構函數,透過使用call()和apply()方法可以在新建立的物件上執行建構函數。
例子:
function SuperType() {this.colors = ["red","blue","green"];}function SubType() {SuperType.call(this);//繼承了SuperType}var instance1 = new SubType(); instance1.colors.push("black");console.log(instance1.colors);//"red","blue","green","black"var instance2 = new SubType();console.log(instance2 .colors);//"red","blue","green"3.組合繼承
基本概念:將原型鍊和借用建構函式的技術組合在一塊,從而發揮兩者之長的一種繼承模式。
例子:
function SuperType(name) {this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function() {console.log(this.name); }function SubType(name, age) {SuperType.call(this,name);//繼承屬性this.age = age;}//繼承方法SubType.prototype = new SuperType();Subtype.prototype.constructor = Subtype; Subtype.prototype.sayAge = function() {console.log(this.age);}var instance1 = new SubType("EvanChen",18);instance1.colors.push("black");consol.log(instance1. colors);//"red","blue","green","black"instance1.sayName();//"EvanChen"instance1.sayAge();//18var instance2 = new SubType("EvanChen666",20 );console.log(instance2.colors);//"red","blue","green"instance2.sayName();//"EvanChen666"instance2.sayAge();//204.原型式繼承
基本想法:借助原型可以基於現有的對象創建新對象,同時還不必須因此創建自訂的類型。
原型式繼承的思想可用以下函數來說明:
function object(o) {function F(){}F.prototype = o;return new F();}例子:
var person = {name:"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = object(person);anotherPerson.name = "Greg";anotherPerson.friends.push( "Rob");var yetAnotherPerson = object(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);//"Shelby","Court" ,"Van","Rob","Barbie"ECMAScript5透過新增Object.create()方法規範化了原型式繼承,這個方法接收兩個參數:一個用作新物件原型的物件和一個作為新物件定義額外屬性的物件。
var person = {name:"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = Object.create(person);anotherPerson.name = "Greg";anotherPerson.friends. push("Rob");var yetAnotherPerson = Object.create(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);//"Shelby" ,"Court","Van","Rob","Barbie"5.寄生式繼承
基本概念:創建一個僅用於封裝繼承過程的函數,該函數在內部以某種方式來增強對象,最後再像真正是它做了所有工作一樣返回對象。
例子:
function createAnother(original) {var clone = object(original);clone.sayHi = function () {alert("hi");};return clone;}var person = {name:"EvanChen",,friends:["Shelfriby ","Court","Van"];};var anotherPerson = createAnother(person);anotherPerson.sayHi();///"hi"6.寄生組合式繼承
基本思想:藉由借用函數來繼承屬性,透過原型鏈的混成形式來繼承方法
其基本模型如下圖所示:
function inheritProperty(subType, superType) {var prototype = object(superType.prototype);//建立物件prototype.constructor = subType;//增強物件subType.prototype = prototype;//指定物件}例:
function SuperType(name){this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function (){alert(this.name);}; function SubType(name,age){SuperType.call(this,name);this.age = age;}inheritProperty(SubType,SuperType);SubType.prototype.sayAge = function() {alert(this.age);}