資訊專欄INFORMATION COLUMN
摘要：如果請求出錯(cuò)需要捕捉錯(cuò)誤，還可以根據(jù)后端返回的狀態(tài)碼統(tǒng)一判斷請求是否成功。如果把這些共同點(diǎn)封裝成一個(gè)，而每一個(gè)頁面都繼承了這個(gè)類就可以大大的提高開發(fā)效率。原型鏈提到繼承，不得不說原型鏈。原型鏈繼承繼承提供了這個(gè)，可以更簡單的實(shí)現(xiàn)繼承
應(yīng)用場景
例如在前端開發(fā)中，幾乎每一個(gè)頁面都有http請求，請求前都要顯示loading，請求完成后loading要顯示。如果請求出錯(cuò)需要捕捉錯(cuò)誤，還可以根據(jù)后端返回的狀態(tài)碼統(tǒng)一判斷請求是否成功。
如果把這些共同點(diǎn)封裝成一個(gè)http，而每一個(gè)頁面都繼承了這個(gè)類就可以大大的提高開發(fā)效率。
原型鏈
提到繼承，不得不說原型鏈。
在JavaScript中所有的類型都繼承自O(shè)bject。也許有人會(huì)有疑問，你怎么證實(shí)這一點(diǎn)呢？
let str = "hello" str.toString() // hello
str 明明是一個(gè)基本類型，為什么可以調(diào)用方法呢？
通過瀏覽器打印str.__proto__ 發(fā)現(xiàn)這個(gè)屬性指向String類型的prototype;
再打印String.prototype的__proto__ 發(fā)現(xiàn)它執(zhí)行Object的prototype;
也就等于 str ---> str.__proto --> str.__proto__.__proto__(也就是String) ---> Object.prototype
str.__proto__ === String.prototype //true String.prototype.__proto__ === Object.prototype //true
每一個(gè)對象的__proto__指向它的構(gòu)造函數(shù)的原型對象
每一個(gè)構(gòu)造函數(shù)的prototype指向它的原型對象
當(dāng)str通過這樣鏈?zhǔn)降牟檎艺{(diào)用了Object里的.toString()方法，這就是繼承的體現(xiàn)。
原型鏈繼承
function Parent(addr){
this.addr = addr
}
Parent.prototype = {
getAddr(){
return this.addr
}
}
function Child(addr){
Parent.call(this,addr)
}
Child.prototype = Object.create(Parent.prototype,{
constructor:{
value: Child,
enumerable: false,
writable: true,
configurable:true
}
})
let baby = new Child("mzdd")
baby.getAddr() // mzdd
Class繼承
ES6提供了Class這個(gè)API，可以更簡單的實(shí)現(xiàn)繼承
Class Parent {
constructor(addr) {
this.addr = addr
}
getAddr() {
return this.addr
}
}
Class Child extends Parent {
constructor(addr) {
super(addr)
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/105013.html
摘要：前面介紹了和是如何實(shí)現(xiàn)類，及其類的屬性和作用的。今天介紹的就是單純的實(shí)現(xiàn)面向?qū)ο蟮膸欤挥卸嘈?，也照例分析吧? 前面介紹了prototype.js和Mootools.js是如何實(shí)現(xiàn)類，及其類的屬性和作用的。今天介紹的klass.js就是單純的實(shí)現(xiàn)面向?qū)ο蟮膸?，只?0多行，也照例分析吧。 實(shí)現(xiàn)類的步驟 第一步是使用klass新建類，初始化的固定函數(shù)是initialize，不能使用其它...
摘要：由于屬性是可以變更的，所以未必真的指向?qū)ο蟮臉?gòu)造函數(shù)，只是一個(gè)提示。不過，從編程習(xí)慣上，我們應(yīng)該盡量讓對象的指向其構(gòu)造函數(shù)，以維持這個(gè)慣例。 問題引入 最近看了許多關(guān)于js繼承實(shí)現(xiàn)的相關(guān)文章，許多實(shí)現(xiàn)方式中都會(huì)存在這么一行代碼： A.prototype.constructor = A 于是感到好奇，這行代碼的實(shí)際意義是什么？如果沒有的話，還能達(dá)到繼承的目的嗎？ 前置知識(shí) 為了熟悉jav...
摘要：最近做了個(gè)上的的測試題目地址，錯(cuò)了一大堆，感覺的概念還有很多不是很清晰，這里記錄一下個(gè)人博客文章地址第一題解答這里考的是的用法。如果出現(xiàn)的數(shù)字不符合后面輸入的進(jìn)制，則為，所以第二個(gè)值為。 最近做了個(gè)heroku上的JavaScript的測試（題目地址），錯(cuò)了一大堆，感覺js的概念還有很多不是很清晰，這里記錄一下 個(gè)人博客文章地址 第一題 What is the result of...
摘要：雖然現(xiàn)在還需要借助的力量但未來一定是屬于。將類引入了，大大簡化了原先復(fù)雜的工作從前要實(shí)現(xiàn)繼承得多麻煩工廠模式無法解決對象識(shí)別，構(gòu)造函數(shù)模式內(nèi)存浪費(fèi)，原型模式私有方法還要結(jié)合構(gòu)造模式定義實(shí)例實(shí)現(xiàn)類的繼承，我要用到繼承類可以重寫父類的方法 雖然現(xiàn)在還需要借助babel的力量但未來一定是屬于ES6。（那ES7？-_-|||） let 在ES6之前javascript只有兩種作用域，即全局作用...
摘要：本文章記錄本人在學(xué)習(xí)中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復(fù)習(xí)。但是在開發(fā)的過程中，并不是所有的代碼復(fù)用都會(huì)使用到繼承。而且整個(gè)代碼都無法按照預(yù)期來運(yùn)行。為了修復(fù)綁定對象與方法之間的關(guān)系。 本文章記錄本人在學(xué)習(xí) JavaScript 中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復(fù)習(xí)。 js 中復(fù)用代碼 說道代碼復(fù)用，一般都會(huì)涉及到對...
閱讀 4405·2021-11-18 13:19
閱讀 1227·2021-10-11 10:58
閱讀 3337·2019-08-29 16:39
閱讀 3197·2019-08-26 12:08
閱讀 2119·2019-08-26 11:33
閱讀 2518·2019-08-23 18:30
閱讀 1377·2019-08-23 18:21
閱讀 2577·2019-08-23 18:18
