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

題目

原題目來源于一個網友的問答

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

分析

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

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

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

4. initialize的this指向顯然要改成指向子類構造函數中的this。

解答

一. 要實現分析的第三點，不難想到使用函數的原型

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

二. initialize方法實現構造函數繼承

Function.prototype.extend= Function.prototype.extend || function(obj) {
    var self = this; //這里的this指向函數調用者，也可以是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指向函數調用者，也可以是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;
}

問題

1. 添加較為嚴謹的類型判斷

2. 組合繼承是存在一定問題的（見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指向函數調用者，也可以是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;
}

總結：

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

2. 希望有更好的解決方案出現。

來自：https://segmentfault.com/a/1190000008888142