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

darkbug 发布于2019-08-20 15:28 / 1176人阅读

摘要：题目原题目来源于一个网友的问答补充代码我有个我有个分析题目希望生成一个新的构造函数，继承于。尽量不要更改题目表达出希望有方法实现构造函数继承，又需要原型继承。的指向显然要改成指向子类构造函数中的。

题目

原题目来源于一个网友的问答

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

分析

题目希望生成一个新的构造函数，B继承于A。（尽量不要更改A）

题目表达出希望有initialize方法实现构造函数继承，又需要原型继承。不难想到我们要用组合继承、寄生组合继承或者ES6继承。

如果所有的函数都可以使用extend方法生成一个新的构造函数，那方法的通用性会更强。

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;
}

问题

添加较为严谨的类型判断

组合继承是存在一定问题的（见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;
}

总结：

该题目考查了几个重要的知识点：原型，继承，闭包，this指向。是一道比较值得去好好思考的题目。

希望有更好的解决方案出现。

云服务器 GPU云服务器 js的基础面试题手写js面试题 js原型面试题 linux的面试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82269.html

一道简单的js继承面试题来查考你是否真的透彻的了解继承

摘要：但这两个对象的原型指向了同一个实例对象，这个实例对象同样是存在栈内存中的然后指向了一个对象。实际是在的实例对象增加一个属性，并将属性赋值为，但它并没有修改原型链上的属性。侧重理解的指向问题直接先贴题目吧 function A() { this.name = a this.color = [green, yellow] } function B() { ...

jcc 2019-08-22 15:55 评论0 收藏0
2017 前端面试准备 - 收藏集 - 掘金

摘要：最近遇到的前端面试题更新版前端掘金个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容非本人原创，是整理后觉得更容易理解的版本，欢迎补充。一道面试题引发的对 javascript 类型转换的思考 - 前端 - 掘金最近群里有人发了下面这题：实现一个函数，运算结果可以满足如下预期结果： ... 收集 JavaScript 各种疑难杂症的问题集锦 - 前端 - 掘金从原博客迁移...

王晗 2019-08-29 12:30 评论0 收藏0
2017 前端面试准备 - 收藏集 - 掘金

摘要：最近遇到的前端面试题更新版前端掘金个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容非本人原创，是整理后觉得更容易理解的版本，欢迎补充。一道面试题引发的对 javascript 类型转换的思考 - 前端 - 掘金最近群里有人发了下面这题：实现一个函数，运算结果可以满足如下预期结果： ... 收集 JavaScript 各种疑难杂症的问题集锦 - 前端 - 掘金从原博客迁移...

xiaochao 2019-08-22 11:03 评论0 收藏0
2017 前端面试准备 - 收藏集 - 掘金

摘要：最近遇到的前端面试题更新版前端掘金个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容非本人原创，是整理后觉得更容易理解的版本，欢迎补充。一道面试题引发的对 javascript 类型转换的思考 - 前端 - 掘金最近群里有人发了下面这题：实现一个函数，运算结果可以满足如下预期结果： ... 收集 JavaScript 各种疑难杂症的问题集锦 - 前端 - 掘金从原博客迁移过来...

KitorinZero 2019-08-20 16:40 评论0 收藏0
一道面试题引发的思考

摘要：下面我们来使用面向对象类图这里就不再画了首先面试题中所提到的我们都可以看成类，比如停车场是一个类吧，它里面的车位是一个类吧，摄像头，屏幕。。。以下是某场的一道面试题(大概): 1、一个停车场，车辆入场时，摄像头记录下车辆信息2、屏幕上显示所接收的车辆的信息情况(车牌号)以及各层车位的车位余量3、停车场一共四层车位，其中的三层都为普通车位，还有一层为特殊车位(体现在停车计费价格上面的不...

Apollo 2019-08-30 11:04 评论0 收藏0