博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一道有价值的JS继承面试题
阅读量:5999 次
发布时间:2019-06-20

本文共 2841 字,大约阅读时间需要 9 分钟。

题目

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

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. 希望有更好的解决方案出现。

转载地址:http://thzmx.baihongyu.com/

你可能感兴趣的文章
树形结构
查看>>
hihoCoder挑战赛28 题目1 : 异或排序
查看>>
Windows 驱动模型的发展历史
查看>>
安卓版php服务器的mysql数据库增删改查简单案例
查看>>
VMware Ubuntu NAT上网方式配置
查看>>
1046: C语言程序设计教程(第三版)课后习题10.4
查看>>
Android视图的截图
查看>>
App列表之分组ListView
查看>>
B-Tree概念
查看>>
Android&iOS崩溃堆栈上报
查看>>
关于iOS开发的各种证书
查看>>
《JAVA与模式》之观察者模式
查看>>
【Openjudge】 算24
查看>>
lvreduce -L 1000M /dev/vg0/lv0 表示最后缩减至多大,不是减少了多大
查看>>
ES 自动恢复分片的时候不恢复了是磁盘超过了85%,然后不恢复了 ES可以配置多个数据目录...
查看>>
linux查杀病毒的几个思路
查看>>
宽带速度
查看>>
构建之法阅读笔记5
查看>>
Android判断网络连接状态
查看>>
Codeforces Round #241 (Div. 2) 解题报告
查看>>