JS原型繼承四步曲及原型繼承圖一覽

更新時(shí)間：2017年11月28日 08:34:37 作者：紅蓮燦世

下面小編就為大家分享一篇JS原型繼承四步曲及原型繼承圖一覽，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

一：js原型繼承四步曲

//js模擬類的創(chuàng)建以及繼承
 //動(dò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,對(duì)嗎？	不對(duì)
Object的prototype可以修改嗎？能與不能原因是什么	不可以
頂級(jí)constructor是誰？	Function()
頂級(jí)原型對(duì)象是誰？	Object.prototype
對(duì)象的construtor成員是個(gè)屬性還是個(gè)方法？	方法
Function有沒有__proto__,為什么？值等于Object.prototype嗎？	有，是Function.prototype;
所有的構(gòu)造器的__proto__都等于其對(duì)應(yīng)的prototype	不對(duì)
創(chuàng)建類形式的繼承的四部曲是什么？	創(chuàng)建父類——>創(chuàng)建子類——>確定繼承關(guān)系——>改構(gòu)造器
Function的constructor與prototype值可以修改嗎？	可以
Object.prototype === Object.__proto__嗎？	不對(duì)
Function.prototype === Function.__proto__嗎？	是
function F(){}; var f1 = new F();f1.__proto__ === Object.prototype嗎？	不對(duì)

以上這篇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)高級(jí)搜索（篩選）功能
這篇文章主要為大家詳細(xì)介紹了基于layui實(shí)現(xiàn)高級(jí)搜索、篩選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
Bootstrap table分頁問題匯總
這篇文章主要為大家匯總了Bootstrap table分頁的典型問題，以及對(duì)應(yīng)每個(gè)bootstrap table分頁問題的解決方法，感興趣的小伙伴們可以參考一下
2016-05-05
多瀏覽器兼容性比較好的復(fù)制到剪貼板的js代碼
復(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)簡(jiǎn)單易用的倒計(jì)時(shí) x 天 x 時(shí) x 分 x 秒效果
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)簡(jiǎn)單易用的倒計(jì)時(shí) x 天 x 時(shí) x 分 x 秒效果,需要的朋友可以參考下
2017-07-07
js實(shí)現(xiàn)目錄鏈接,內(nèi)容跟著目錄滾動(dòng)顯示的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)目錄鏈接,內(nèi)容跟著目錄滾動(dòng)顯示的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
javascript宿主對(duì)象之window.navigator詳解
這篇文章主要為大家詳細(xì)介紹了javascript宿主對(duì)象之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