JavaScript繼承總結

qfstudy發表於2018-09-02
JavaScript繼承

1.建立物件

1.字面量物件 2.建構函式 3.Object.create

//1.字面量
var obj={
    name: '字面量',
    show: function(){
        console.log(this.name)
    }
}
//2.建構函式
function fun (name) {
    this.name=name
}
var obj=new fun('obj')
//3.Object.create
var obj={name: 'obj'}
var obj=Object.create(obj)
複製程式碼

2.JavaScript繼承

1.原型鏈繼承

function Parent(name){
	this.name=name
	this.sleep=function(){
		console.log(this.name + '在睡覺')
	}
}
Parent.prototype.eat=function(food){
	console.log(this.name + '正在吃' + food)
}
function Child(){}
Child.prototype=new Parent('Child')
Child.prototype.constructor=Child
var child=new Child()
複製程式碼

Child.prototype=new Parent('Child')就是把Parent例項賦值給Child.prototype，也就是說new Child().__proto__===new Parent('Child')。

可以通過Child.prototype在原型物件上增加新的屬性或方法，也可以通過，child.__proto__在原型物件上新增新的方法和屬性。

缺點： 1.原型物件上的屬性和方法是所有例項都可訪問的，而且一個例項改變了原型上的方法和屬性都會影響到其他例項。 2.建立子類例項時，無法向父類建構函式傳參。

2.建構函式繼承

function Parent(name){
	this.name=name
	this.sleep=function(){	
		console.log(this.name + '在睡覺')
	}
}
Parent.prototype.eat=function(food){
	console.log(this.name + '正在吃' + food)
}

function Child(){
	Parent.call(this,'child')
}
Child.prototype.eyes=function(){console.log('eyes')}
var child=new Child()
複製程式碼

建構函式繼承可以通過call或apply方法實現繼承。這種方法不能繼承原型物件中的屬性和方法，只能繼承例項屬性和例項方法，但是可以向父類傳參。

3.組合繼承

function Parent(name){
	this.name=name
	this.sleep=function(){	
		console.log(this.name + '正在睡覺')
	}
}
Parent.prototype.eat=function(food){
	console.log(this.name + '正在吃' + food)
}
function Child(){
	Parent.call(this,'child')
}
Child.prototype.eyes=function(){console.log('eyes')}

Child.prototype=new Parent()
Child.prototype.constructor=Child 
var child=new Child()
複製程式碼

組合繼承是比較好的繼承, 他是原型鏈繼承和建構函式繼承的結合, 合理的利用了這兩種組合的特點，既是子類的例項，也是父類的例項, 但有一個缺點就是呼叫了兩次建構函式。

4.組合繼承優化

function Parent(name){
	this.name=name
	this.sleep=function(){	
		console.log(this.name + '正在睡覺')
	}
}
Parent.prototype.eat=function(food){
	console.log(this.name + '正在吃' + food)
}
function Child(){
	Parent.call(this,'child')
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor=Child 
var child=new Child()
複製程式碼

5.寄生組合繼承

function Parent(name){
	this.name=name
	this.sleep=function(){	
		console.log(this.name + '正在睡覺')
	}
}
Parent.prototype.eat=function(food){
	console.log(this.name + '正在吃' + food)
}
function Child(){
	Parent.call(this,'child')
}
function f(){}
f.prototype=Parent.prototype
Child.prototype=new f()
Child.prototype.constructor=Child 
var child=new Child()
複製程式碼

只呼叫一次父類的建構函式，避免了在子類原型上建立不必要的，多餘的屬性。

相關文章