詳解JavaScript之ES5的繼承_javascript技巧

來源:腳本之家  責任編輯:小易  

D:Map的鍵可以為非字符串的各種對象CDD:errCDC 沒用過->A:yield*返回另外的Generator或Iterator.而D沒錯:Symbols沒有被內置就可以是對象,而symbol是基礎類型www.anxorj.tw防采集請勿采集本網。

自從有了ES6的繼承后,ES5的繼承也退出了舞臺,在實際開發也不會用得著,但在面試或許用的著;

ES6 是js的新標準 ES6 之前的標準 本質上都是原型繼承 function P() { this.x=5;} function S(){ this.y=6;

先看看ES6的繼承

es6中所有的var都可以替換為let或const,var沒有存在的意義了 const用于一些不會修改的值,如常量等 其他的都用let

class Father{ constructor(a){ console.log(a); } play(){ console.log("aaa"); } static run(){ console.log("static"); } } class Son extends Father{ constructor(){ super(); } } var s=new Son(); s.play(); Father.run() Son.run();

在ECMAScript.next到來的時候,我們現在每天都在寫的JavaScript代碼將會發生巨大的變化.ECMAScript.next越來越多的特性提案將被最終敲定,新一版本的JavaScript將會慢慢得到普及. ECMAScript.next

在ES6里只需要使用extends和super關鍵字即可繼承父類的方法和屬性(包括靜態)

所以這本書不僅僅是一本介紹js性能相關的書,而是一本涉及瀏覽器原理,js解析原理,用戶體驗等知識的javascript最佳注解。閱讀建議: 建議和高程三一起看,可以算是高程三閱讀的最佳伴侶。高程三告訴你

在ES5里沒有這些關鍵字

Javascript的數據類型有: 1.Number 數字類型 2.String 字符串類型 具體的引用類型和值類型的解析看這里javascript的基本類型和引用類型 來源:www.cnblogs.com/phillyx/p/5603738.html

ES5的繼承

ES5的五種種繼承方式:

    對象冒充繼承 原型鏈繼承 組合繼承 原型式繼承 寄生式繼承(重要)

對象冒充繼承

function Father(_r){ this.r=_r; console.log("aa"); console.log(this.r); } Father.a=3; Father.run=function(){ console.log(Box.a); }function Son(){ Father.call(this,3);//改變this的指向,執行父類構造函數并傳參到父類 } var b=new Son();//"aa",3 b.run();//TypeError

通過call或apply改變this指向,并執行了父類的構造函數

缺點:只能繼承超類的構造函數,無法繼承原型鏈上的方法

原型鏈繼承

function Father(){ console.log("aa"); }Father.prototype.b=10; Father.prototype.play=function(){ console.log(this.b); } Son.prototype=new Father(); function Son(){ } var b=new Son(); b.play();//10

將父類的實例化對象賦值給子類的原型上實現的繼承

缺點:覆蓋子類原有的屬性和方法,只能執行父類的屬性和方法,無法執行父類的構造函數

組合繼承

前面的兩種繼承(冒充,原型鏈)各有特點,把這兩種繼承組合起來稱為組合繼承

function Father(_r){ this.r=_r; console.log("aa"); }function Son(_r){ Father.call(this,_r);//冒充,改變父類的this指向子類 }Son.prototype=new Father(3);//原型鏈繼承 var c=new Son(10);

使用原型鏈繼承了父類的屬性和方法,使用對象冒充繼承了父類的構造函數

看起來很不錯的樣子,但這并不是完美的繼承方式;

缺點:會覆蓋子類原有的屬性和方法,因為原型鏈繼承會將父類實例化,提前執行了一次父類構造函數;當子類實例化對象后,實際上是執行了兩次父類的構造函數。

使用場景:子類原本沒有屬性和方法,父類構造函數沒有內容。

原型式繼承

為了解決執行兩次父類構造函數使用了一個中介,在繼承時就不會執行父類的構造函數

function Father(_a){ this.a=_a } Father.prototype.play=function(){ console.log("aaa"); } function Agent(){ } Agent.prototype=Father.prototype; function Son(){ } Son.prototype=new Agent(); var o=new Son(); o.play();//aaa

使用了Agent的類作為中介,將父類的原型復制后,再進行實例化繼承不會執行父類的構造函數;

缺點:雖然解決了構造函數執行兩次的問題,但是使用該方法繼承后,構造函數一次也不會執行。

寄生式繼承(完美繼承)

封裝了一個extend方法,該方法傳入兩個參數,分別是父類和子類

function extend(subClass, supClass) { function Agent() {} Agent.prototype = supClass.prototype; var o = subClass.prototype; subClass.prototype = new Agent(); if (Object.assign) { Object.assign(subClass.prototype, o); } else { if (Object.getOwnPropertyNames) { var names = Object.getOwnPropertyNames(o); for (var i = 0; i < names.length; i++) { var desc = Object.getOwnPropertyDescriptor(names[i]); Object.defineProperty(subClass.prototype, names[i], desc); } } else { for (var prop in o) { subClass.prototype[prop] = o[prop]; } } } subClass.prototype.constructor = subClass; //防止子類的構造函數被覆蓋 if (supClass.prototype.constructor === Object) { supClass.prototype.constructor = supClass; //防止父類類的構造函數被覆蓋 } // 存儲父類,方便繼承構造函數調用 subClass.prototype.superClass = supClass; } //調用 function Father(_r) { this.r = _r; console.log("Father"); } Father.prototype.play = function () { console.log("play game"); }; function Ball(_r) { this.superClass.call(this, _r); } var s = new Son(10);//Father s.play();//play game

extend方法,使用了Object.assgin、Object.getOwnPropertyNames、Object.getOwnPropertyDescriptor、Object.defineProperty都存在兼容問題,所以進行了判斷。

該方法繼承集合了前四種的優點,實現了ES5的完美繼承;

結語:

ES5對比ES6的繼承,麻煩太多太多,以后的實際工作也不會使用;

但是在面試的時候,面試官可能會問,多學一點總沒錯。

以上就是詳解JavaScript之ES5的繼承的詳細內容,更多關于JavaScript ES5的繼承的資料請關注真格學網其它相關文章!

js中,不用 var 定義的變量都被視為全局變量。所以你的這個 es 應該是一個全局對象。相當于 C#中的命名空間。我們在 js 中寫es.aa="3;等同于:var es={aa:"3}或者es={};es.aa="3不知道你明白我的意思不內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • js定義類的方法示例【es5與es6】
  • 詳解vue-cli+es6引入es5寫的js(兩種方法)
  • js實現集合的交集、補集、差集、去重運算示例【es5與es6寫法】
  • javascript設計模式之原型模式分析【es5與es6】
  • js es6系列教程 - 基于new.target屬性與es5改造es6的類語法
  • javascript es5標準中新增的array方法
  • javascript for in的缺陷總結
  • javascript insertafter()定義與用法示例
  • 淺談react-router hashrouter和browserrouter的使用
  • 淺談javascript中substr和substring的區別
  • js彈性勢能動畫之拋物線運動實例詳解
  • javascript 數字格式化輸出的實現代碼
  • 微信小程序使用echarts獲取數據并生成折線圖
  • js復制到剪切板的實例方法
  • 兩個javascript小tip資料
  • 騰訊的ip接口 方便獲取當前用戶的ip地理位置
  • javascript中es指的是什么
  • JavaScript關于ES6的問題
  • javascript和es5和es6是什么關系
  • JavaScript ES6中var,let,const分別什么時候使用
  • ES6 和以前的javascript的區別?
  • JavaScript ES6中var,let,const分別什么時候使用
  • javascript es6 好用嗎
  • 關于JavaScript 的好書有哪些
  • javascript 有幾種數據類型
  • es6要取代javascript了么
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全基礎知識javascript類庫表單特效廣告代碼網頁特效黑客性質javascript技巧domnode.jsjs其它首頁javascriptjs定義類的方法示例【es5與es6】詳解vue-cli+es6引入es5寫的js(兩種方法)js實現集合的交集、補集、差集、去重運算示例【es5與es6寫法】javascript設計模式之原型模式分析【es5與es6】js es6系列教程 - 基于new.target屬性與es5改造es6的類語法javascript es5標準中新增的array方法javascript for in的缺陷總結javascript insertafter()定義與用法示例淺談react-router hashrouter和browserrouter的使用淺談javascript中substr和substring的區別js彈性勢能動畫之拋物線運動實例詳解javascript 數字格式化輸出的實現代碼微信小程序使用echarts獲取數據并生成折線圖js復制到剪切板的實例方法兩個javascript小tip資料騰訊的ip接口 方便獲取當前用戶的ip地理位置js刷新頁面方法大全js中settimeout()的用法詳解js截取字符串常用方法詳細整理js頁面跳轉常用的幾種方式js打開新窗口的2種方式js數組與字符串的相互轉換方法js設置cookie、讀取cookie、刪除js刪除數組里的某個元素方法js 將json字符串轉換為json對象的javascript深入理解js閉包詳解如何使用webpack打包多頁jquery項目前端構建工具之gulp的語法教程js限制input標簽中只能輸入中文網絡之美 javascript中get和set訪問器的實bootstrap導航條的使用和理解3詳解將微信小程序接口promise化并使用asy微信小程序中使用 async/await的方法實例javascript實現的內存數據庫lokijs介紹和javascript封裝 cookie 應用接口利用angularjs和bootstrap前端開發案例實
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载