JS原型繼承四步曲及原型繼承圖一覽
更新時(shí)間：2017年11月28日 08:34:37 作者：紅蓮燦世
下面小編就為大家分享一篇JS原型繼承四步曲及原型繼承圖一覽，具有很好的參考價(jià)值。希望對大家有所幫助。一起跟隨小編過來看看吧
一：js原型繼承四步曲
//js模擬類的創(chuàng)建以及繼承
//動物（Animal），有頭這個(gè)屬性，eat方法
//名字這個(gè)屬性
//貓有名字屬性，繼承Animal，抓老鼠方法
//第一步：創(chuàng)建父類
function Animal(name){
this.name = name;
}
//給父類添加屬性方法
Animal.prototype.eat = function(){
console.log(this.name + " eating...");
}
//第二步：創(chuàng)建子類
function Cat(name){
Animal.call(this,name);
}
//第三步：確定繼承的關(guān)系
Cat.prototype = Object.create(Animal.prototype);
//第四步：改造構(gòu)造器
//改變了某個(gè)構(gòu)造器的原型之后，緊接著的代碼一定是改構(gòu)造器
Cat.prototype.constructor = Cat;
Cat.prototype.zhualaoshu = function(){
console.log(this.name + " 抓 老鼠");
}
var mao = new Cat("貓");
mao.eat();
mao.zhualaoshu();
二： 原型繼承圖
下圖輔助理解
練習(xí)提鞏固理解、
| 函數(shù)Foo的__proto的值等于Foo.prototype,對嗎？ | 不對 |
| Object的prototype可以修改嗎？能與不能原因是什么 | 不可以 |
| 頂級constructor是誰？ | Function() |
| 頂級原型對象是誰？ | Object.prototype |
| 對象的construtor成員是個(gè)屬性還是個(gè)方法？ | 方法 |
| Function有沒有__proto__,為什么？值等于Object.prototype嗎？ | 有，是Function.prototype; |
| 所有的構(gòu)造器的__proto__都等于其對應(yīng)的prototype | 不對 |
| 創(chuàng)建類形式的繼承的四部曲是什么？ | 創(chuàng)建父類——>創(chuàng)建子類——>確定繼承關(guān)系——>改構(gòu)造器 |
| Function的constructor與prototype值可以修改嗎？ | 可以 |
| Object.prototype === Object.__proto__嗎？ | 不對 |
| Function.prototype === Function.__proto__嗎？ | 是 |
| function F(){}; var f1 = new F();f1.__proto__ === Object.prototype嗎？ | 不對 |
以上這篇JS原型繼承四步曲及原型繼承圖一覽就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
JS生成隨機(jī)數(shù)的多種方法匯總(不同范圍、類型的隨機(jī)數(shù))
js產(chǎn)生隨機(jī)數(shù)通常是使用javascript的Math.random()函數(shù),下面這篇文章主要給大家介紹了關(guān)于JS生成隨機(jī)數(shù)的多種方法(不同范圍、類型的隨機(jī)數(shù))的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
微信小程序使用uni-app開發(fā)小程序及部分功能實(shí)現(xiàn)詳解
uni-app是一個(gè)使用Vue.js 開發(fā)所有前端應(yīng)用的框架,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用uni-app開發(fā)小程序及部分功能實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
基于layui實(shí)現(xiàn)高級搜索（篩選）功能
這篇文章主要為大家詳細(xì)介紹了基于layui實(shí)現(xiàn)高級搜索、篩選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家匯總了Bootstrap table分頁的典型問題，以及對應(yīng)每個(gè)bootstrap table分頁問題的解決方法，感興趣的小伙伴們可以參考一下2016-05-05
復(fù)制到剪貼板的js代碼（兼容ie、firefox、chorme、safari...什么都兼容！）2011-10-10
js計(jì)算兩個(gè)時(shí)間之間天數(shù)差的實(shí)例代碼
這篇文章主要介紹了js計(jì)算兩個(gè)時(shí)間之間天數(shù)差的實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
基于JS代碼實(shí)現(xiàn)簡單易用的倒計(jì)時(shí) x 天 x 時(shí) x 分 x 秒效果
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)簡單易用的倒計(jì)時(shí) x 天 x 時(shí) x 分 x 秒效果,需要的朋友可以參考下2017-07-07
js實(shí)現(xiàn)目錄鏈接,內(nèi)容跟著目錄滾動顯示的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)目錄鏈接,內(nèi)容跟著目錄滾動顯示的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
javascript宿主對象之window.navigator詳解
這篇文章主要為大家詳細(xì)介紹了javascript宿主對象之window.navigator，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
微信小程序?qū)崿F(xiàn)流程進(jìn)度的圖樣式功能
最近正在做微信小程序，需要實(shí)現(xiàn)一個(gè)流程進(jìn)度的圖樣式，下面小編給大家?guī)砹宋⑿判〕绦驅(qū)崿F(xiàn)流程進(jìn)度的圖樣式功能實(shí)例代碼，需要的朋友參考下吧2018-01-01