【js】what is 繼承

0xE7A38A 發布于2019-08-23 18:18 / 2519人閱讀

摘要：如果請求出錯需要捕捉錯誤，還可以根據后端返回的狀態碼統一判斷請求是否成功。如果把這些共同點封裝成一個，而每一個頁面都繼承了這個類就可以大大的提高開發效率。原型鏈提到繼承，不得不說原型鏈。原型鏈繼承繼承提供了這個，可以更簡單的實現繼承

應用場景
例如在前端開發中，幾乎每一個頁面都有http請求，請求前都要顯示loading，請求完成后loading要顯示。如果請求出錯需要捕捉錯誤，還可以根據后端返回的狀態碼統一判斷請求是否成功。
如果把這些共同點封裝成一個http，而每一個頁面都繼承了這個類就可以大大的提高開發效率。

原型鏈
提到繼承，不得不說原型鏈。
在JavaScript中所有的類型都繼承自Object。也許有人會有疑問，你怎么證實這一點呢？

let str = "hello"
str.toString() // hello

str 明明是一個基本類型，為什么可以調用方法呢？
通過瀏覽器打印str.__proto__ 發現這個屬性指向String類型的prototype;
再打印String.prototype的__proto__ 發現它執行Object的prototype;
也就等于 str ---> str.__proto --> str.__proto__.__proto__(也就是String) ---> Object.prototype

str.__proto__ === String.prototype //true
String.prototype.__proto__ === Object.prototype  //true

每一個對象的__proto__指向它的構造函數的原型對象
每一個構造函數的prototype指向它的原型對象
當str通過這樣鏈式的查找調用了Object里的.toString()方法，這就是繼承的體現。

原型鏈繼承

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這個API，可以更簡單的實現繼承

Class Parent {
    constructor(addr) {
        this.addr = addr
    }
    getAddr() {
        return this.addr
    }
}
Class Child extends Parent {
    constructor(addr) {
        super(addr)
    }
}

GPU云服務器云服務器 What is webrtc js 繼承 js繼承 js繼承模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105013.html

klass 是如何實現JS的類以及類的相關屬性和作用

摘要：前面介紹了和是如何實現類，及其類的屬性和作用的。今天介紹的就是單純的實現面向對象的庫，只有多行，也照例分析吧。前面介紹了prototype.js和Mootools.js是如何實現類，及其類的屬性和作用的。今天介紹的klass.js就是單純的實現面向對象的庫，只有90多行，也照例分析吧。實現類的步驟第一步是使用klass新建類，初始化的固定函數是initialize，不能使用其它...

Kross 2019-08-20 18:26 評論0 收藏0
js實現繼承的方法中為何總是要修正constructor方法的指向呢？

摘要：由于屬性是可以變更的，所以未必真的指向對象的構造函數，只是一個提示。不過，從編程習慣上，我們應該盡量讓對象的指向其構造函數，以維持這個慣例。問題引入最近看了許多關于js繼承實現的相關文章，許多實現方式中都會存在這么一行代碼： A.prototype.constructor = A 于是感到好奇，這行代碼的實際意義是什么？如果沒有的話，還能達到繼承的目的嗎？前置知識為了熟悉jav...

fancyLuo 2019-08-23 11:28 評論0 收藏0
JavaScript選擇題解答（1-20）

摘要：最近做了個上的的測試題目地址，錯了一大堆，感覺的概念還有很多不是很清晰，這里記錄一下個人博客文章地址第一題解答這里考的是的用法。如果出現的數字不符合后面輸入的進制，則為，所以第二個值為。最近做了個heroku上的JavaScript的測試（題目地址），錯了一大堆，感覺js的概念還有很多不是很清晰，這里記錄一下個人博客文章地址第一題 What is the result of...

Worktile 2019-08-21 12:10 評論0 收藏0
ES6 入坑筆記：說說一些新概念

摘要：雖然現在還需要借助的力量但未來一定是屬于。將類引入了，大大簡化了原先復雜的工作從前要實現繼承得多麻煩工廠模式無法解決對象識別，構造函數模式內存浪費，原型模式私有方法還要結合構造模式定義實例實現類的繼承，我要用到繼承類可以重寫父類的方法雖然現在還需要借助babel的力量但未來一定是屬于ES6。（那ES7？-_-|||） let 在ES6之前javascript只有兩種作用域，即全局作用...

scq000 2019-08-20 10:21 評論0 收藏0
JS學習筆記 - 代碼復用

摘要：本文章記錄本人在學習中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。但是在開發的過程中，并不是所有的代碼復用都會使用到繼承。而且整個代碼都無法按照預期來運行。為了修復綁定對象與方法之間的關系。本文章記錄本人在學習 JavaScript 中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。 js 中復用代碼說道代碼復用，一般都會涉及到對...

cheng10 2019-08-21 10:35 評論0 收藏0