生活随笔
收集整理的這篇文章主要介紹了
(转)js实现继承的5种方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
js是門靈活的語言，實現一種功能往往有多種做法,ECMAScript沒有明確的繼承機制，而是通過模仿實現的，根據js語言的本身的特性,js實現繼承有以下通用的幾種方式
1.使用對象冒充實現繼承(該種實現方式可以實現多繼承)
實現原理:讓父類的構造函數成為子類的方法,然后調用該子類的方法,通過this關鍵字給所有的屬性和方法賦值
Js代碼??
function?Parent(firstname)??{??????this.fname=firstname;??????this.age=40;??????this.sayAge=function()??????{??????????console.log(this.age);??????}??}??function?Child(firstname)??{??????this.parent=Parent;??????this.parent(firstname);??????delete?this.parent;??????this.saySomeThing=function()??????{??????????console.log(this.fname);??????????this.sayAge();??????}??}??var?mychild=new??Child("李");??mychild.saySomeThing();?? ?
2.采用call方法改變函數上下文實現繼承(該種方式不能繼承原型鏈,若想繼承原型鏈，則采用5混合模式)
實現原理:改變函數內部的函數上下文this,使它指向傳入函數的具體對象
Js代碼??
function?Parent(firstname)??{??????this.fname=firstname;??????this.age=40;??????this.sayAge=function()??????{??????????console.log(this.age);??????}??}??function?Child(firstname)??{????????this.saySomeThing=function()??????{??????????console.log(this.fname);??????????this.sayAge();??????}?????this.getName=function()?????{?????????return?firstname;?????}????}??var?child=new?Child("張");??Parent.call(child,child.getName());??child.saySomeThing();?? ?
3.采用Apply方法改變函數上下文實現繼承(該種方式不能繼承原型鏈,若想繼承原型鏈，則采用5混合模式)
實現原理:改變函數內部的函數上下文this,使它指向傳入函數的具體對象
Js代碼??
function?Parent(firstname)??{??????this.fname=firstname;??????this.age=40;??????this.sayAge=function()??????{??????????console.log(this.age);??????}??}??function?Child(firstname)??{????????this.saySomeThing=function()??????{??????????console.log(this.fname);??????????this.sayAge();??????}??????this.getName=function()??????{??????????return?firstname;??????}????}??var?child=new?Child("張");??Parent.apply(child,[child.getName()]);??child.saySomeThing();?? ?
4.采用原型鏈的方式實現繼承
實現原理:使子類原型對象指向父類的實例以實現繼承,即重寫類的原型,弊端是不能直接實現多繼承
Js代碼??
function?Parent()??{????????this.sayAge=function()??????{??????????console.log(this.age);??????}??}??function?Child(firstname)??{??????this.fname=firstname;??????this.age=40;??????this.saySomeThing=function()??????{??????????console.log(this.fname);??????????this.sayAge();??????}??}????Child.prototype=new??Parent();??var?child=new?Child("張");??child.saySomeThing();?? ?
5.采用混合模式實現繼承
Js代碼??
function?Parent()??{????????this.sayAge=function()??????{??????????console.log(this.age);??????}??}????Parent.prototype.sayParent=function()??{?????alert("this?is?parentmethod!!!");??}????function?Child(firstname)??{??????Parent.call(this);??????this.fname=firstname;??????this.age=40;??????this.saySomeThing=function()??????{??????????console.log(this.fname);??????????this.sayAge();??????}??}????Child.prototype=new??Parent();??var?child=new?Child("張");??child.saySomeThing();??child.sayParent(); ?
轉載于:https://www.cnblogs.com/christal-11/p/5872589.html
總結
以上是生活随笔為你收集整理的(转)js实现继承的5种方式的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
