一、類與實例

1. 類的聲明

1. 構(gòu)造函數(shù)模擬一個類

function Animal () {
	this.name = 'name'
}

2. ES6 Class聲明

//  類名
class Animal2 {
    // 構(gòu)造函數(shù)
	constructor () {
		// 屬性
		this.name = name
	}
}

2.生成實例

1. 通過 new 實例化一個類

console.log(new Animal(), new Animal2())
// PS: 類沒有參數(shù)時，可以省略括號
console.log(new Animal, new Animal2)

二、類與繼承

1.如何實現(xiàn)繼承

1. 借助構(gòu)造函數(shù)實現(xiàn)繼承

function Parent1 () {
	this.name = 'parent1';
}
function Child1 () {
	// call/ apply 改變函數(shù)運行的上下文, Parent1再子類的構(gòu)造函數(shù)執(zhí)行，同時修改了父類this的指向到child內(nèi)部，從而導(dǎo)致父類的屬性都會掛載到子類這個實例上
	Parent1.call(this);
	this.type ='child1'
}

console.log(new Child1())
Child1 {name: 'parent1', type: 'child1'}

缺點： Parent1的原型上的屬性和方法，并沒有被child所繼承。

Parent1.prototype.say = function () {
	console.log('你好')
}
Child1 下沒有say方法

總結(jié)：只實現(xiàn)了部分繼承，如果父類的屬性都在構(gòu)造函數(shù)里面，完全可以實現(xiàn)繼承，如果父類的原型對象上還有方法或?qū)傩?，那么子類是無法拿到方法或?qū)傩缘?/p>

2. 借助原型鏈實現(xiàn)繼承

function Parent2 () {
	this.name = 'parent2';
}
function Child2 () {
	this.type = 'child2'
}
Child2.prototype = new Parent2();
// prototype 是子類構(gòu)造函數(shù)的一個屬性，這個屬性是一個對象，這個對象是可以任意賦值的，這個對象賦值了一個Parent2的實例
// new Child2() 生成一個新的實例， new Child2.__proto__ === Child2.prototype === new Parent2()
console.log(new Child2())

function Parent2 () {
	this.name = 'parent2';
    this.play = [1,2,3]
}
function Child2 () {
	this.type = 'child2'
}
Child2.prototype = new Parent2();

var s1 = new Child2();
var s2 = new Child2();
console.log(s1.play, s2.play)
(3) [1, 2, 3] (3) [1, 2, 3]
s1.play.push(4);
console.log(s1.play, s2.play)
(4) [1, 2, 3, 4] (4) [1, 2, 3, 4]

缺點：因為原型鏈的原型對象是共用的，所以修改原型對象的屬性，其他實例也會受影響

s1.__proto__  === s2.__proto__
true

3. 組合方式繼承

function Parent3 () {
	this.name = 'parent3'
	this.play = [1,2,3]
}
function Child3 () {
	Parent3.call(this);
	this.type = 'child3'
}
Child3.prototype = new Parent3();
var s3 = new Child3();
var s4 = new Child3();
s3.play.push(4)
console.log(s3.play, s4.play)
(4) [1, 2, 3, 4] (3) [1, 2, 3]
缺點：Parent3.call(this) 和 new Parent3() , Parent3 執(zhí)行了2次

4. 組合方式繼承優(yōu)化1

function Parent4 () {
	this.name = 'parent4'
	this.play = [1,2,3]
}
function Child4 () {
	Parent4.call(this);
	this.type = 'child4'
}
Child4.prototype = Parent4.prototype;
var s5 = new Child4();
var s6 = new Child4();
s5.play.push(4)
console.log(s5.play, s6.play)
// (4) [1, 2, 3, 4] (3) [1, 2, 3]
// s5 是否Child4的實例， s5 是否是Parent4的實例
console.log(s5 instanceof Child4, s5 instanceof Parent4)
// true true
s5.constructor
? Parent4 () {
	this.name = 'parent4'
	this.play = [1,2,3]
}

缺點：無法區(qū)分構(gòu)造函數(shù)的實例，是由父類創(chuàng)造的還是有子類創(chuàng)造的文章來源地址http://www.zghlxwxcb.cn/news/detail-632272.html

5. 組合方式繼承優(yōu)化2

function Parent5 () {
	this.name = 'parent5'
	this.play = [1,2,3]
}
function Child5 () {
	Parent5.call(this);
	this.type = 'child5'
}
// 通過中間對象的方法，把父類和子類區(qū)分開
Child5.prototype = Object.create(Parent5.prototype)
Child5.prototype.constructor = Child5
var s7 = new Child5();
console.log(s7 instanceof Child5, s7 instanceof Parent5)
console.log(s7.constructor)
true true
? Child5 () {
	Parent5.call(this);
	this.type = 'child5'
}

2.繼承的幾種方式

1. 借助構(gòu)造函數(shù)實現(xiàn)繼承
2. 借助原型鏈實現(xiàn)繼承
3. 借助構(gòu)造函數(shù)和原型鏈實現(xiàn)組合繼承

到了這里，關(guān)于【基礎(chǔ)類】—面向?qū)ο箢愊到y(tǒng)性學(xué)習(xí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！