一道有價值的JS繼承面試題

darkbug 發(fā)布于2019-08-20 15:28 / 1028人閱讀

摘要：題目原題目來源于一個網(wǎng)友的問答補充代碼我有個我有個分析題目希望生成一個新的構造函數(shù)，繼承于。盡量不要更改題目表達出希望有方法實現(xiàn)構造函數(shù)繼承，又需要原型繼承。的指向顯然要改成指向子類構造函數(shù)中的。

題目

原題目來源于一個網(wǎng)友的問答

var A = function() {
    this.name = "apple";
}
A.prototype.getName = function() {
    return this.name;
}

// 補充代碼

var B = A.extend({
    initialize: function() {
        this.superclass.initialize.call(this);
        this.total = 3;
    },
    say: function() {
        return "我有" + this.total + "個" + this.getName()
    }
});
var b = new B();
console.log(b.say()); //我有3個apple

分析

題目希望生成一個新的構造函數(shù)，B繼承于A。（盡量不要更改A）

題目表達出希望有initialize方法實現(xiàn)構造函數(shù)繼承，又需要原型繼承。不難想到我們要用組合繼承、寄生組合繼承或者ES6繼承。

如果所有的函數(shù)都可以使用extend方法生成一個新的構造函數(shù)，那方法的通用性會更強。

initialize的this指向顯然要改成指向子類構造函數(shù)中的this。

解答
一. 要實現(xiàn)分析的第三點，不難想到使用函數(shù)的原型

Function.prototype.extend= Function.prototype.extend || function(obj) {}

二. initialize方法實現(xiàn)構造函數(shù)繼承

Function.prototype.extend= Function.prototype.extend || function(obj) {
    var self = this; //這里的this指向函數(shù)調(diào)用者，也可以是A

    function SubClass() {
        this.superclass = { initialize: self };
        if (obj.initialize) {
            obj.initialize.call(this); //處理this指向問題
        }
    }
    
    return SubClass;
}

三. 原型繼承并且添加新的原型方法

Function.prototype.extend= Function.prototype.extend || function(obj) {
    var self = this; //這里的this指向函數(shù)調(diào)用者，也可以是A

    function SubClass() {
        this.superclass = { initialize: self };
        if (obj.initialize) {
            obj.initialize.call(this); //處理this指向問題
        }
    }
    
    SubClass.prototype = new self();
    SubClass.prototype.constructor = SubClass;

    for(var key in obj){
        if(key !== "initialize"){
            SubClass.prototype[key] = obj[key]
        }
    }
    
    return SubClass;
}

問題

添加較為嚴謹?shù)念愋团袛?/p>

組合繼承是存在一定問題的（見javascript高級教程第六章），如果能用ES6繼承會更好。

改進

function inherits(subClass, superClass) { // ES6繼承
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: { 
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

function getType(obj) {
    return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}

Function.prototype.extend= Function.prototype.extend || function(obj) {
    var self = this; //這里的this指向函數(shù)調(diào)用者，也可以是A

    function SubClass() {
        this.superclass = { initialize: self };
        if (getType(obj) === "object" && getType(obj.initialize) === "function") {
            obj.initialize.call(this); //處理this指向問題
        }
    }
    
    inherits(SubClass, self);

    for (var key in obj) {
        if (key !== "initialize") {
            SubClass.prototype[key] = obj[key]
        }
    }
    
    return SubClass;
}

總結：

該題目考查了幾個重要的知識點：原型，繼承，閉包，this指向。是一道比較值得去好好思考的題目。

希望有更好的解決方案出現(xiàn)。

GPU云服務器云服務器 js的基礎面試題手寫js面試題 js原型面試題 linux的面試題

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

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

一道簡單的js繼承面試題來查考你是否真的透徹的了解繼承

摘要：但這兩個對象的原型指向了同一個實例對象，這個實例對象同樣是存在棧內(nèi)存中的然后指向了一個對象。實際是在的實例對象增加一個屬性，并將屬性賦值為，但它并沒有修改原型鏈上的屬性。側重理解的指向問題直接先貼題目吧 function A() { this.name = a this.color = [green, yellow] } function B() { ...

jcc 2019-08-22 15:55 評論0 收藏0
2017 前端面試準備 - 收藏集 - 掘金

摘要：最近遇到的前端面試題更新版前端掘金個人博客已上線，歡迎前去訪問評論無媛無故的個人博客以下內(nèi)容非本人原創(chuàng)，是整理后覺得更容易理解的版本，歡迎補充。一道面試題引發(fā)的對 javascript 類型轉換的思考 - 前端 - 掘金最近群里有人發(fā)了下面這題：實現(xiàn)一個函數(shù)，運算結果可以滿足如下預期結果： ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金從原博客遷移...

王晗 2019-08-29 12:30 評論0 收藏0
2017 前端面試準備 - 收藏集 - 掘金

摘要：最近遇到的前端面試題更新版前端掘金個人博客已上線，歡迎前去訪問評論無媛無故的個人博客以下內(nèi)容非本人原創(chuàng)，是整理后覺得更容易理解的版本，歡迎補充。一道面試題引發(fā)的對 javascript 類型轉換的思考 - 前端 - 掘金最近群里有人發(fā)了下面這題：實現(xiàn)一個函數(shù)，運算結果可以滿足如下預期結果： ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金從原博客遷移...

xiaochao 2019-08-22 11:03 評論0 收藏0
2017 前端面試準備 - 收藏集 - 掘金

摘要：最近遇到的前端面試題更新版前端掘金個人博客已上線，歡迎前去訪問評論無媛無故的個人博客以下內(nèi)容非本人原創(chuàng)，是整理后覺得更容易理解的版本，歡迎補充。一道面試題引發(fā)的對 javascript 類型轉換的思考 - 前端 - 掘金最近群里有人發(fā)了下面這題：實現(xiàn)一個函數(shù)，運算結果可以滿足如下預期結果： ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金從原博客遷移過來...

KitorinZero 2019-08-20 16:40 評論0 收藏0
一道面試題引發(fā)的思考

摘要：下面我們來使用面向對象類圖這里就不再畫了首先面試題中所提到的我們都可以看成類，比如停車場是一個類吧，它里面的車位是一個類吧，攝像頭，屏幕。。。以下是某場的一道面試題(大概): 1、一個停車場，車輛入場時，攝像頭記錄下車輛信息2、屏幕上顯示所接收的車輛的信息情況(車牌號)以及各層車位的車位余量3、停車場一共四層車位，其中的三層都為普通車位，還有一層為特殊車位(體現(xiàn)在停車計費價格上面的不...

Apollo 2019-08-30 11:04 評論0 收藏0