前端面试题系列—— JavaScript模拟类式继承
类式继承的需求
SuperClass是父类,SubClass是子类。我们需要达到的效果是,子类继承父类公有的属性和方法,方法依然为子类公有,子类继承父类的实例属性和方法,属性为子类各个实例自己的。举个栗子:
function SuperClass( name ) { this.name = name; } SuperClass.prototype.sayName = function () { alert ( this.name ); } function SubClass() {} inheritClass( SubClass, SuperClass );// inheritClass 是将要实现的类式继承操作 var sub1 = new SubClass( 'jack' ); var sub2 = new SubClass( 'king' ); alert( sub1.name == 'jack' );// 期待返回true alert( sub2.name == 'king' );//期待返回true sub1.sayName(); //期待 alert( 'jack' )
inheritClass( SubClass, SuperClass )该如何实现呢,首先继承原型链:
function SuperClass( name ) { this.name = name; } SuperClass.prototype.sayName = function () { return this.name; } function SubClass() {} SubClass.prototype = new SuperClass();// 形成原型链 var sub1 = new SubClass( 'jack' ); var sub2 = new SubClass( 'king' ); alert( sub1.name == 'jack' );// 期待返回flase; alert( sub1.name ); //'jack' alert( sub2.name == 'king' );//期待返回true; sub1.sayName(); //alert(' jack' );
可见name并不是每个实例自己的,实际上是子类公有的,在SubClass.prototyp.name上得到的,那如何改进呢,继续往下看:
function SuperClass( name ) { this.name = name; } SuperClass.prototype.sayName = function () { return this.name; } function SubClass() { SuperClass.apply( this, arguments ); } SubClass.prototype = new SuperClass();// 形成原型链 var sub1 = new SubClass( 'jack' ); var sub2 = new SubClass( 'king' ); alert( sub1.name == 'jack' );// true; alert( sub2.name == 'king' );//true; sub1.sayName(); //alert(' jack' );
我们利用apply来实现了该功能,但是SuperClass.prototyp.name依然存在,如果属性比较多的话是很大的浪费。如何继续改进呢,问题出在SubClass.prototype = new SuperClass();这个语句上,我们需要这里仅仅执行公有的方法和属性继承的操作。我们可以借用构造函数来完成这个任务:
function SuperClass( name ) { this.name = name; } SuperClass.prototype.sayName = function () { return this.name; } function SubClass() { SuperClass.apply(this, arguments); } function prototypeInherit( o ) { function F(){}; F.prototype = o; return new F(); } function inheritClass( SubClass, SuperClass ) { var prototype = prototypeInherit( SuperClass.prototype ); prototype.constructor = SubClass; SubClass.prototype = prototype; } inheritClass( SubClass, SuperClass );// inheritClass 是将要实现的类式继承操作 var sub1 = new SubClass( 'jack' ); var sub2 = new SubClass( 'king' ); alert( sub1.name == 'jack' );//true alert( sub2.name == 'king' );//true alert( sub1.sayName() );//'jack' alert( sub1.constructor.name );
分析下两个函数:inheritClass的核心是构造一个SubClass.prototype:prototypeInherit( o )利用了一个公的构造函数F使得实例的属性和方法不会传到子类的prototype上。inheritClass( SubClass, SuperClass )需要做的是将prototype的constructor修正为SubClass,之前为SuperClass。小作业:想想之前为什么是SuperClass?
相关推荐
2023前端最新面试题——Vue篇2023前端最新面试题——Vue篇2023前端最新面试题——Vue篇2023前端最新面试题——Vue篇2023前端最新面试题——Vue篇2023前端最新面试题——Vue篇2023前端最新面试题——Vue篇2023前端...
2023前端最新面试题——Vue篇.docx2023前端最新面试题——Vue篇.docx2023前端最新面试题——Vue篇.docx2023前端最新面试题——Vue篇.docx2023前端最新面试题——Vue篇.docx2023前端最新面试题——Vue篇.docx2023前端...
2022前端面试系列——Vue面试题.pdf
java面试真题——江苏骏环昇旺科技.jpgjava面试真题——江苏骏环昇旺科技.jpgjava面试真题——江苏骏环昇旺科技.jpgjava面试真题——江苏骏环昇旺科技.jpgjava面试真题——江苏骏环昇旺科技.jpgjava面试真题——江苏...
2024年秋招and春招面试真题——中软.txt2024年秋招and春招面试真题——中软.txt2024年秋招and春招面试真题——中软.txt2024年秋招and春招面试真题——中软.txt2024年秋招and春招面试真题——中软.txt2024年秋招and...
最全面的java面试题——选择题部分
2023最新前端面试题总结
15.md 各大互联网公司2014前端笔试面试题–JavaScript篇 JavaScript 16.md 2014年最新前端开发面试题 General 17.md 前端面试资源汇总 General 18.md 5个典型的JavaScript面试题(上) JavaScript 19.md 再来5个...
CCNA面试题——网络工程师
前端面试题,即将工作的
「2021」高频前端面试题汇总之JavaScript篇
前端面试题总结
2024春招面试真题——鑫合易家java初级试卷1-题目.docx2024春招面试真题——鑫合易家java初级试卷1-题目.docx2024春招面试真题——鑫合易家java初级试卷1-题目.docx2024春招面试真题——鑫合易家java初级试卷1-题目....
HCIE面试题——LAN&WAN 技术.docx
H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5前端面试题,内含答案H5...
JAVA面试题——多线程
2021Java大厂面试题——大厂真题之拼多多-Java高级.pdf
世界500强面试题——让你在面试时更有自信!
网络工程师面试题——CCNA.doc
96道web前端面试题96道web前端面试题.pdf