一道有价值的JS继承面试题

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了一道有价值的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. 希望有更好的解决方案出现。

脚本宝典总结

以上是脚本宝典为你收集整理的一道有价值的JS继承面试题全部内容,希望文章能够帮你解决一道有价值的JS继承面试题所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:es6