前 言
繼承是使用一個子類別繼承另一個父類,那麼子類別可以自動擁有父類別中的所有屬性和方法,這個過程叫做繼承! JS中有很多實現繼承的方法,今天我要來跟大家介紹其中的三種吧。
1.在Object類別上增加一個擴展方法
#//声明一个父类 function Person(name){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } //声明一个子类 function Student(){ this.no=no; this.study=function(){ alert("我在学习!"); } } // 通过循坏,将父类对象的所有属性和方法,全部赋给子类对象 Object.prototype.extend=function(parent){ for(var i in parent){ this[i].parent[i]; } } var p=new Person("张三",12); var s=new Student("1234567"); //子类对象调用这个扩展方法 s.extend() console.log(s);
上述實作繼承的原理:
透過循壞,將父類別物件的所有屬性和方法,全部賦給子類別物件。關鍵點在於for-in循壞,即使不擴展Object,也能透過簡單的循壞實現操作。
但是用這種方法實作繼承也有一些缺點:
#①無法透過一次實例化,直接拿到完整的子類別對象。而需要先拿到父類別物件和子類別物件兩個對象,再手動合併;
②擴充Object的繼承方法,也會保留在子類別的物件上。
再來看看第二種實作繼承的方法吧~
2.使用原型繼承
在介紹這個方法之前先來說兩個概念:原型物件與原型
1、prototype:函數的原型物件
①只有函數才有prototype,且所有函數必有prototype
#②prototype本身也是一個物件!
③prototype指向了目前函數所在的引用位址!
2、proto:物件的原型!
①只有對象才有proto,而且所有對象必有proto
②proto也是一個對象,所以也有自己的proto,順著這條線向上照的順序,就是原型鏈。
③函數、陣列都是對象,都有自己的proto
//声明父类 function Person(name,age){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } //声明子类 function Student(no){ this.no=no; this.study=function(){ alert("我在学习!我叫"+this.name+"今年"+this.age"); } } //将父类对象赋给子类的prototype Student.prototype=new Person("张三",14); //拿到子类对象时,就会将父类对象的所有属性和方法,添加到proto var s=new Student(); s.study();
#使用原型繼承的原理:
將父類別對象,賦值給子類別的prototype,那麼父類別物件的屬性和方法就會出現在子類別的prototype中。那麼,實例化子類別時,子類別的prototype又會到子類別物件的proto中,最終,父類別物件的屬性和方法,會出現在子類別物件的proto中。
這種繼承的特點:
①子類別本身的所有屬性都是成員屬性,父類別繼承過來的屬性都是原型屬性。
②依然無法透過一步實例化拿到完成的子類別物件。
第三種實作繼承的方法:
call()和apply()還有bind(),這三種方法很相似,只有在傳參方面有所不同。
function Person(name,age){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } function Student(no,name,age){ this.no=no; this.study=function(){ alert("我在学习!"); } //将父类函数的this,指向为子类函数的this Person.call(this,name,age); } var s=new Student(12,"张三",24); console.log(s);
三個函數的唯一區別,在於接受func的參數列表的方式不同,除此之外,功能上沒有任何差異!
三個函數的寫法(區別):
#call寫法:func.call(func的this指向的obj,func參數1 ,func參數2,...);
apply寫法:func.apply(func的this指向的obj,[func參數1,func參數2,...]);
bind寫法:func.bind(func的this指向的obj)(func參數1,func參數2,...);
總結
################################################################################################################ #以上是JavaScript模擬三種方式實現封裝及差異介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!