基於阮一峯5種繼承方式的總結

前兩天學習JS繼承的時候,搜到了阮大神寫的一篇文章http://www.ruanyifeng.com/blo...
主要講了5種構造函數繼承方式.我寫此篇文章主要是爲了總結學習所得.javascript

父構造器Animal,子構造器Cat,cat是子構造器new出來的對象,"只能繼承父構造器中的屬性" 表明繼承屬性和方法.html

第一種叫構造函數綁定:
此種繼承方式只能繼承父構造器中的屬性,不能繼承父構造器原型上的屬性.Animal.apply(this, arguments)也可用Animal.call(this)替換.cat對象有兩個層級,第一級存放着自有屬性以及父構造器中的屬性,第二級存放着本身函數原型上的屬性(Cat.prototype)
圖片描述java

第二種叫prototype模式:
此種繼承方式既能繼承父構造器中的屬性,也能繼承父構造器原型上的屬性.cat對象有三個層級,第一級存放着自有屬性,第二級存放着父構造器的屬性(加上constructor,指向建立該對象(cat)的構造器(Cat)),第三級存放着父構造器原型上的屬性.
圖片描述app

第三種叫直接繼承prototype:
此種繼承方式只能繼承父構造器原型上的屬性.cat對象有兩個層級,第一級存放着自有屬性,第二級存放着父構造器原型上的屬性(加上constructor,指向建立該對象(cat)的構造器(Cat)).注意:Cat.prototype.constructor = Cat會將Animal.prototype.constructor也改爲Cat,從而影響父構造器建立對象
圖片描述函數

第四種叫空對象做爲中介:
此種繼承方式只能繼承父構造器原型上的屬性.cat對象有三個層級,第一級存放着自有屬性,第二級存放着臨時構造器F的屬性(加上constructor,指向建立該對象(cat)的構造器(Cat)),第三級存放着父構造器原型上的屬性.注意:臨時構造器只充當中介的做用,通常不會有本身的屬性.
圖片描述學習

第五種叫淺拷貝繼承(軟大神稱之爲拷貝繼承):
此種繼承方式只能繼承父構造器原型上的屬性.cat對象有兩個層級,第一級存放着自有屬性,第二級存放着父構造器原型上的除了constructor和__proto__的屬性(不會拷貝原型上的constructor和__proto__屬性).適合父構造器原型上的自增屬性爲基本數據類型的狀況.
圖片描述this

相關文章
相關標籤/搜索