亚洲免费在线视频-亚洲啊v-久久免费精品视频-国产精品va-看片地址-成人在线视频网

您的位置:首頁技術文章
文章詳情頁

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

瀏覽:98日期:2024-05-27 09:37:57

題目

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

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指向。是一道比較值得去好好思考的題目。

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

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

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 日韩欧美综合在线二区三区 | 玖玖色视频 | 久草在线观看首页 | 成人免费视频日本 | 日韩中文字幕一在线 | 亚洲自拍成人 | 亚洲国产欧美在线人成精品一区二区 | 欧美国产日韩一区二区三区 | 国产精品网站 夜色 | 91欧美在线 | 国产亚洲一区二区手机在线观看 | 国产一区二区中文字幕 | 欧美日韩一区二区三 | 国产亚洲精品成人一区看片 | 久久精品一区二区三区日韩 | 欧美高清一区二区三 | 国产爱视频 | 免费永久观看美女视频网站网址 | 怡红院亚洲红怡院天堂麻豆 | 国产九九免费视频网站 | 亚洲精品久久久久久久久久久网站 | 精品中文字幕一区在线 | 台湾三级香港三级在线中文 | 成年美女黄网站小视频 | 一区二区三区视频免费观看 | 亚洲午夜网站 | 毛片免费观看网址 | 成人亚洲在线观看 | 一区二区三区四区视频在线观看 | 日本特黄aaaaaaa大片 | 99国产精品一区二区 | 中文字幕在线免费观看视频 | a久久99精品久久久久久不 | 亚洲一区二区精品推荐 | 国产精品免费久久 | 国产精品亚洲欧美云霸高清 | 中文字幕免费 | 九九热视频在线免费观看 | 亚洲国产精品第一区二区 | 久久精品国产免费看久久精品 | 国产精品久久久久久久hd |