一道有價值的JS繼承面試題
題目
原題目來源于一個網(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ù)調用者,也可以是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ù)調用者,也可以是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ù)調用者,也可以是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)。
來自:https://segmentfault.com/a/1190000008888142
相關文章:
1. php使用正則驗證密碼字段的復雜強度原理詳細講解 原創(chuàng)2. 基于javaweb+jsp實現(xiàn)企業(yè)車輛管理系統(tǒng)3. HTML5實戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)4. ASP將數(shù)字轉中文數(shù)字(大寫金額)的函數(shù)5. Jsp servlet驗證碼工具類分享6. jscript與vbscript 操作XML元素屬性的代碼7. 基于PHP做個圖片防盜鏈8. Jsp+Servlet實現(xiàn)文件上傳下載 文件列表展示(二)9. asp.net core 認證和授權實例詳解10. XML在語音合成中的應用
