JavaScript中對象的繼承及擴展功能

1 繼承的概念

在原型鏈中能夠說一個對象是繼承於它的原型對象的,因此繼承是原型鏈的一種具體應用.

當對象給它自身的屬性和方法賦值時,會在內存空間中開闢一個位置存儲這些屬性和方法,可是每一個對象都須要單獨開闢空間的話,會極大的消耗內存影響網頁的加載速度.

原型對象中的方法和屬性可以共享給實例使用,咱們可使用這個優勢來實現內存的優化.而在這一系列實現過程就是繼承.

2 繼承的具體實現方式

1. 擴展原型對象

指經過構造函數.prototype的方式給原型對象添加少許的新屬性或者新方法.

示例:

function Student(){};//建立函數

Student.prototype.say = function(){};//給原型對象添加say方法

var s1 =new Student();//建立一個Student類型的對象

s1.say();//等價於s1.__proto__.say();

2. 替換原型對象

在使用擴展原型對象方式來給原型對象添加多個新屬性或者新方法時,就會出現冗餘代碼,這時咱們就能夠直接將原型對象替換成新的對象.

替換原型對象就是直接使用一個新對象將原原型對象替換掉.

示例:

function Person (){};//建立函數
Person.prototype={//給函數的原型對象賦值新的對象
　　a:function(){},
　　b:function(){},
　　c:function(){},
　　constructor:Person
};
var p1 =new Person();//建立一個Person類型的實例
注意:新替換後的原型對象自己再也不有constructor屬性指向對應的構造函數了,因此咱們須要在新對象中手動添加該屬性和屬性值.
3. 混入繼承

將一個對象中的功能拷貝一份給另外一個對象.

示例:

var p1 = {
　　a:function(){},
　　b:function(){}
}//建立對象p1
var p2 = {name:"sad"};//建立對象p2
for(var key in p1){
　　p2[key]=p1[key];
}//將p1對象中的屬性值逐個賦值給p2對象對應屬性名

注意:這個過程不改變原對象,目標對象將會得到新屬性和方法,若是出現屬性名或者方法名衝突的話,目標對象中的原屬性或者方法會被替換成新的屬性或者方法.

4. 原型+混入繼承

原型+混入繼承其實就是在混入繼承的基礎上將目標對象拓展成了原型對象,其餘實現過程和結果不發生改變.

示例:

var p = {name:"",age:12};//建立對象p
function Person(){};//建立函數
for(var key in p){
　　Person.prototype[key]=p[key];
}//將p對象中的屬性值逐個賦值給原型對象對應的屬性名

5. 經典繼承

建立一個對象繼承自另外一個對象.

實現步驟:

a 建立對象須要一個媒介,那就是構造函數,因此須要先建立一個構造函數

b 設置這個函數的原型對象,使源對象替換原來的原型對象

c 經過構造函數建立出新的實例對象,並將這個對象返回

結合以上三個步驟咱們能夠封裝成一個函數:

function create(source){
　　function fn(){};//自定義建立構造函數
　　fn.prototype = source;//將源對象賦值給構造函數的原型對象
　　return new fn;//使用構造函數建立新的實例,並返回
}

總結:繼承功能的使用極大的避免了建立新對象時重複開闢內存空間,也能夠減小全局變量的使用.