1. 程式人生 > >懵逼的JavaScript大白(二)——繼承

懵逼的JavaScript大白(二)——繼承

繼承:目的是為了實現更好的複用。

1、借用建構函式

		function People (nameP, ageP) {
			this.name = nameP;
			this.age = ageP;
		}
		People.prototype.sayHi = function () {
			console.log('這是sayHi');
		};
		
		function Student (name, age, school) {
			// Student建構函式中的this是例項物件s1
			People.call(this, name, age);
			this.school = school;
		}
		Student.prototype.study = function () {
			console.log('每天程式碼1萬行');
		};
		
		var s1 = new Student('jack', 18, 'xx中學');
		console.log(s1)

在這裡插入圖片描述
這種繼承方式稱為借用建構函式繼承
好處:可以繼承建構函式體中的屬性,並且可以傳參
缺點:無法得到原型中的功能

2、原型繼承方式

		function People (nameP, ageP) {
			this.name = nameP;
			this.age = ageP;
		}
		People.prototype.sayHi = function () {
			console.log('這是sayHi');
		};

		function Student (name, age, school) {
			this.school = school;
		}
		
		Student.prototype = new People('zhangsan', 27);
		Student.prototype.constructor = Student;
		Student.prototype.study = function () {
			console.log('每天程式碼1萬行');
		};

		var s1 = new Student('jack', 18, 'xx中學');
		console.log(s1.name, s1.age, s1.study, s1.sayHi);
		console.log(s1.constructor);

在這裡插入圖片描述
這種繼承方式稱為原型繼承方式。
由於採用覆蓋方式,需要重新設定constructor屬性
新的功能需要在繼承操作之後進行
優點:可以繼承原型中的方法
缺點:雖然可以的到People中的屬性,但是無法傳參,設定多個例項物件後值為固定的值,沒有意義。(PS:‘jack’, 18, ‘xx中學’,存不存在打印出來的結果都一樣。)
Student.prototype中的所有功能都可以被例項物件s1使用,new People()可以使用過People.prototype中的所有功能

3、組合繼承方式

		function People (nameP, ageP) {
			this.name = nameP;
			this.age = ageP;
		}
		People.prototype.sayHi = function () {
			console.log('這是sayHi');
		};

		function Student (name, age, school) {
			// 借用建構函式繼承
			People.call(this, name, age);
			this.school = school;
		}

		// 原型繼承操作:因為此處的引數傳與不傳都沒有意義,所以就不傳了。
		Student.prototype = new People();
		Student.prototype.constructor = Student;
		Student.prototype.study = function () {
			console.log('每天程式碼1萬行');
		};

		var s1 = new Student('jack', 18, 'xx中學');
		console.log(s1,s1.sayHi,s1.study);

在這裡插入圖片描述
組合繼承是一種非常簡單且常用的繼承方式。實際上就是將借用建構函式繼承和原型繼承組合使用,可以繼承所有屬性和方法。