JavaScript中實現繼承的6種方案
01-原型鏈的繼承方案
function Person(){
this.name="czx";
}
function Student(){}
var p1=new Person();
Student.prototype=p1;
var student1=new Student();
console.log(student1); // Person{}
console.log(student1.name); // czx
這是最簡單的一種方案,同時也是弊端最多的方案,我們來分析下他的弊端
如果直接列印Student的例項物件,打印出來是這樣
為啥不是打印出來的Student呢,我們先得了解一個東西,打印出來的這個名稱是由
constructor
決定的我們直接將Person的例項物件賦值給Student的
prototype
,Student原來的prototype就被覆蓋了
而Person的例項物件的隱式原型是指向Person的prototype
的而Person的prototype中是有
constructor
的,constructor
是指向Person本身的
你們可以這麼理解,Person.prototype,那麼constructor就是指向Person,Object.prototype中的constructor
就是指向Object所以,Student1沒找到自己的constructor,沿著原型鏈往上找,找到了Person的
constructor
,所以就是Person通過這種方式繼承過來,列印學生的例項物件,繼承過來的屬性是看不見的
如果在父類Person上新增引用型別的資料,如果我們建立多個學生物件例項,修改了引用型別的資料,那麼父類中的資料也是會被改變的,那麼例項的物件,相互之間就不是獨立的,可以看下下面這段程式碼
function Person(){
this.friends=[];
}
function Student(){}
var p1=new Person();
Student.prototype=p1;
var student1=new Student();
var student2=new Student();
student1.friends.push("czx");
console.log(student2.friends); // ["czx"]
無法傳遞引數
細心的同學可能就會發現,我這樣寫是無法傳遞引數的.那以後我們要傳遞引數的話,就會相當麻煩
所以,接下來我們看第二種方式
02-借用建構函式實現繼承
這個方案的核心就是 call
function Person(name, age) {
this.name = name;
this.age = age;
}
// 第一個弊端: Person執行了兩次
// 第一次是new出來的,第二次是call執行的
// 第二個弊端是 在new的時候,會往student上加上一些不必要的屬性,會把繼承的屬性加到了Student上面,這是沒必要的
Student.prototype = new Person();
Student.prototype.studying = function () {
console.log(this.name + "再學習");
}
function Student(name, age, sno) {
Person.call(this, name, age);
this.sno = sno;
}
let stu1 = new Student("czx", 18, 180047101);
stu1.studying();
console.log(stu1);
這個方案解決了第一種方案的(2),(3),(4)弊端
這兩個放的順序一定不能放錯了
Student.prototype = new Person();
Student.prototype.studying = function () {
console.log(this.name + "再學習");
}
順序放錯的話
studying
那個函式加在了Student
原來的原型上,而後又把Person
的例項物件覆蓋了Student
的原型,那麼在我們呼叫的話,就找不到了我們來看下這一段
function Student(name, age, sno) {
Person.call(this, name, age);
this.sno = sno;
}
因為在我們內直接使用call呼叫了Person並執行了,那麼Person的屬性也都可以在Student裡面使用,這也能使的我們可以傳遞屬性,可以複用父類中定義的屬性.並且在我們列印的時候,也能把屬性全部打印出來,大家可以自己試試
這個方案說實話已經很不錯了,解決了大部分問題,如果簡單使用也是可以的,但是這種方案就沒有弊端嗎?
答案是有的,我們現在來看下它的弊端- 第一個弊端: Person執行了兩次
- 第一次是new出來的,第二次是call執行的
- 第二個弊端是 在new的時候,會往student上加上一些不必要的屬性,會把繼承的屬性加到了Student上面,這是沒必要的,我們只需要在call的時候,呼叫Person,並且把屬性放到Student上面去就行了
- 第一種方案的第一個弊端也沒有解決
我們現在來看下一種方案
03-直接繼承父類的原型
function Person(name) {
this.name = name;
}
Person.prototype.running = function () {
console.log(this.name + " is running");
}
function Teacher(name, career) {
Person.call(this, name);
this.career = career;
}
function Student(name, age) {
Person.call(this, name);;
this.age = age;
}
// 這種方法可不可行呢?
// 答案是不行
// 我們看下面的例子
// 我明明是給學生單獨加的屬性,但是teacher也可以共用它,這是不合理的
// 我們需要的是學生和老師自己的原型上是屬於自己獨一無二的屬性
// 這樣子可複用性才會高
Student.prototype = Person.prototype;
Teacher.prototype = Person.prototype;
Student.prototype.studying = function () {
console.log(this.name + " is learning");
}
var s1 = new Student("czx", 18);
var t1 = new Teacher("teacher", "math");
console.log(s1);
s1.running()
s1.studying();
t1.studying();
這種方案是基於第二種方案的一個改版,但是我們看下這種方案可不可行
看完程式碼,大家也知道不行了,我在程式碼上也有詳細的註釋
- 我明明是給學生單獨加的屬性,但是teacher也可以共用它,這是不合理的,這是因為我們加的方法都是直接加在了父類的原型上
- 我們需要的是學生和老師自己的原型上是屬於自己獨一無二的屬性
- 這樣子可複用性才會高
接下來會介紹基於物件來實現繼承的兩種方案,這兩種方案對於最後一種方案的出現有很大的幫助,請大家仔細看看理解
04-原型式繼承
這個方案是由道格拉斯·克羅克福德(Douglas Crockford)所提出來的,是對我們前端屆貢獻特別大的一個人物
這個方案是專門針對物件的
我們先看下他當時是怎麼實現的
// o是物件
function createObject(o){
function fn(){};
//將物件賦值給fn的原型
fn.prototype=o;
//將例項化的fn賦值給新物件,這樣新物件的隱式原型就會指向我們傳遞進來的obj
var newObj=new fn();
return newObj;
}
大家可以瀏覽下我上面寫的程式碼,這是道格拉斯當時的想法
現在隨著js的逐漸變化,我們寫這種方案也變得比較簡單了,我們來看下面程式碼
function createObject(o){
var newObj={};
Obejct.setPrototypeof(newObj,o);
return newObj;
}
Object.setPrototypeof()
可以給物件設定一個新的原型,相比之前更加方便了
基於最新的ECMA標準的化,我們還可以這麼寫
var newObj=Object.create(o);
直接建立一個以o
為原型的物件
接下來是針對這一種方案做的一個完善版
05-寄生式繼承
var personObj = {
running: function() {
console.log("running")
}
}
function createStudent(name) {
var stu = Object.create(personObj)
stu.name = name
stu.studying = function() {
console.log("studying~")
}
return stu
}
var stuObj = createStudent("why")
var stuObj1 = createStudent("kobe")
var stuObj2 = createStudent("james")
這種方案是基於第四種方案進行改編的
寄生式繼承的思路是結合原型類繼承和工廠模式的一種方式;
即建立一個封裝繼承過程的函式, 該函式在內部以某種方式來增強物件,最後再將這個物件返回;
好,現在結合上述五種方案,我們可以開始介紹最後一種方案啦,只有瞭解了上述五種方案後,再來看這種方案,會有一種恍然大悟的感覺
06-寄生組合式繼承
這種方案就是JS社群這麼多年積累出來的最佳方案,我們來看下
//因為繼承是一個可能很常用的方法,所以我們把繼承的方法提煉出來了,作為一個工具函式
//這樣我們只需要傳遞父類和子類,函式就能自動幫助我們實現繼承
function inherit(faObj, chiObj) {
//因為父類和子類的原型都是物件,所以可以用這個方法
//建立一個以父類原型物件為原型的物件,並且將它賦值給子類原型
//這幫助我們解決了第二種方案的父類執行了兩次的問題,不需要例項化父類物件
chiObj.prototype = Object.create(faObj.prototype);
//這是為了解決前面方案都沒有解決的constructor的方法
Object.defineProperty(chiObj.prototype, "constructor", {
value: chiObj,
enumerable: false,
writable: false,
configurable: false,
})
}
function Person(name, age, height) {
this.name = name;
this.age = age;
this.height = height;
}
//下面是我們講的第二種方案 借用建構函式實現繼承
function Student(name, age, height, sno) {
Person.call(this, name, age, height);
this.sno = sno;
}
function Teacher(name, age, height, pro) {
Person.call(this, name, age, height);
this.pro = pro;
}
//在這裡使用我們自己定義的繼承函式
inherit(Person, Student);
inherit(Person, Teacher);
//注意:上下的順序不能錯,我在第二種方案的時候有講過
Person.prototype.playing = function () {
console.log(this.name + " is playing");
}
Student.prototype.studying = function () {
console.log(this.name + " is studying");
}
Teacher.prototype.teaching = function () {
console.log(this.name + " is teaching");
}
var s1 = new Student("czx", 18, 1.88, 180047101);
var t1 = new Teacher("Mr.cao", 21, 1.88, "computer");
//可以打印出所有的屬性 並且列印的是對應的類,而不是父類了
console.log(s1); // Student{}
console.log(t1); // Teacher{}
s1.studying();
t1.teaching();
s1.playing();
t1.playing();
我在程式碼中寫的很詳細了,大家一定要好好看看下,理解理解,如果覺得有啥疑惑,可以把之前的幾種方案連起來好好看看
如果還有什麼疑惑,歡迎大家在評論區留言