面向物件 大綱

<script type="text/javascript">
	01. 類與例項
		01. 類的宣告
		02. 生成例項: new 建構函式
	
	02. 類與繼承
		02. 如何實現繼承
		03. 繼承的幾種方式
			01. 藉助建構函式實現繼承
			02. 藉助原型鏈實現繼承: 原型的方法為公有的
			03. 組合方式: 原型的方法為私有的
			04. 組合繼承的優化方式01:  new 父類建構函式一次
			05. 組合繼承的優化方式02: 例項的建構函式指向本身;
	
</script>

類的宣告

<script type="text/javascript">
	// 類的宣告
	function Animal01(name) {
		this.name = name
	}
	// ES6的class宣告
	class Animal02 {
		constructor(name){
			this.name = name
		}
	}
	
	// 例項化
	var animal01 = new Animal01('01');
	var animal02 = new Animal02('02');
	
</script>
 

01. 藉助建構函式實現繼承

<script type="text/javascript">
// 01. 藉助建構函式實現繼承
	function Parent01() {
		this.name = 'parent01';
	}
	Parent01.prototype.say = function(){
		console.log('say hello');
	}
	function Child01() {
		Parent01.call(this);// apply
		this.type = 'child01';
	}
	var child011 = new Child01();
	console.log(child011)
</script>
 

02. 藉助原型鏈實現繼承

<script type="text/javascript">
// 02. 藉助原型鏈實現繼承
	function Parent02() {
		this.name = 'parent02';
		this.play = [1, 2, 3]
	}
	function Child02() {
		this.type = 'child02';
	}
	Child02.prototype = new Parent02()
	var child021 = new Child02();
	var child022 = new Child02();
	child021.play.push(4)
	console.log(child021.play, child022.play)
</script>
 

03. 組合方式: 原型上的方法為私有的; 缺點： new 父類建構函式兩次

<script type="text/javascript">
// 03. 組合方式: 原型上的方法為私有的; 缺點： new 父類建構函式兩次
	function Parent03() {
		this.name = 'parent03';
		this.play = [1, 2, 3];
	}
	Parent03.prototype.say = function(){
		console.log('say hello');
	}
	function Child03() {
		Parent03.call(this);
		this.type = 'child03';
	}
	Child03.prototype = new Parent03()
	var child031 = new Child03();
	var child032 = new Child03();
	child031.play.push(4)
	console.log(child031.play, child032.play)
	console.log(child031.constructor)
</script>

04. 組合繼承的優化方式01: 原型上的方法為私有的;

<script type="text/javascript">
// 04. 組合繼承的優化方式01: 原型上的方法為私有的;
	function Parent04() {
		this.name = 'parent04';
		this.play = [1, 2, 3];
	}
	Parent03.prototype.say = function(){
		console.log('say hello');
	}
	function Child04() {
		Parent03.call(this);
		this.type = 'child04';
	}
	Child04.prototype = Parent04.prototype;
	
	var child041 = new Child04();
	console.log(child041 instanceof Child04, child041 instanceof Parent04)
	console.log(child041.constructor)// Parent04
	
	/*Child04.prototype.constructor = Child04;// 原型繼承原型的方法時, 強制指向建構函式，還是同一指標
	var child041 = new Child04();
	var Parent041 = new Parent04();
	console.log(child041 instanceof Child04, child041 instanceof Parent04)// true, true
	console.log(Parent041 instanceof Child04, Parent041 instanceof Parent04)// true, true
	console.log(child041.constructor)// Child04
	console.log(Parent041.constructor)// Child04*/
</script>

05. 組合繼承的優化方式02: 例項的建構函式指向本身;

<script type="text/javascript">
// 05. 組合繼承的優化方式02: 例項的建構函式指向本身;
	function Parent05() {
		this.name = 'parent05';
		this.play = [1, 2, 3];
	}
	Parent03.prototype.say = function(){
		console.log('say hello');
	}
	function Child05() {
		Parent03.call(this);
		this.type = 'child05';
	}
	
	Child05.prototype = Object.create(Parent05.prototype);
	Child05.prototype.constructor = Child05;
	
	var child051 = new Child05();
	var parent051 = new Parent05();
	console.log(child051 instanceof Child05, child051 instanceof Parent05)
	console.log(parent051 instanceof Child05, parent051 instanceof Parent05)
	console.log(child051.constructor)// Child05
	console.log(parent051.constructor)// Parent05
</script>