HTML5学堂-码匠 HTML5学堂

您当前位于:HTML5面试题 ——> WEB前端面试真题 - 原型与继承面试题

WEB前端面试真题 - 原型与继承面试题

2016/04/05 23:59:43 | 作者:HTML5学堂(码匠) | 分类:HTML5面试题 | 关键词:面向对象,原型,继承,面试真题

原型与继承的面试题精讲

HTML5学堂:最近看到一道考察面向对象、原型继承的面试题,关于一只小狗狗和一只“精力旺盛”的小狗狗的故事~今天就来讲讲这个吧。

题目要求

有一条可爱的小狗(名字叫“小狗狗”),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫(yelp)。

另一只小狗精力很旺盛(名字叫做“精力旺盛的狗狗”),每隔5秒叫唤(yelp)一声(wow)。

使用面向对象的混合模式实现小狗的创建

  1. function Dog() {
  2.     this.name = '小狗狗';
  3.     this.wow = 'wow';
  4. }
  5. Dog.prototype.yelp = function() {
  6.     console.log(this.wow);
  7. }

精力旺盛的狗狗继承狗狗的基本特点

使用call实现属性的继承,使用for-in循环实现功能/方法的继承

  1. function MadDog() {
  2.     Dog.call(this);
  3.     this.name = '精力旺盛的狗狗';
  4. }
  5. for (var i in Dog.prototype) {
  6.     MadDog.prototype[i] = Dog.prototype[i];
  7. };

如上代码还进行了狗狗name这个属性的重写

实现方法的重写

  1. MadDog.prototype.yelp = function () {
  2.     var _this = this;
  3.     setInterval(function(){
  4.         console.log(_this.wow);
  5.     }, 5000);
  6. }

最后,奉上完整版代码

  1. /*
  2. * author: HTML5学堂
  3. * http://www.h5course.com
  4. */
  5. function Dog() {
  6.     this.name = '小狗狗';
  7.     this.wow = 'wow';
  8. }
  9. Dog.prototype.yelp = function() {
  10.     console.log(this.wow);
  11. }
  12.  
  13. function MadDog() {
  14.     Dog.call(this);
  15.     this.name = '精力旺盛的狗狗';
  16. }
  17. for (var i in Dog.prototype) {
  18.     MadDog.prototype[i] = Dog.prototype[i];
  19. };
  20. MadDog.prototype.yelp = function () {
  21.     var _this = this;
  22.     setInterval(function(){
  23.         console.log(_this.wow);
  24.     }, 5000);
  25. }
  26. var dog = new MadDog();
  27. dog.yelp();

关于上面提到的原型继承

对于想学习面向对象、原型等知识的你,可以打开“十年一剑” > “面向对象、原型与继承”

或者点击下链接,实现快速访问——>面向对象系列讲解——混合模式面向对象系列讲解——拖拽(继承知识)实战

HTML5小编-利利 耗时1.5h

欢迎沟通交流~HTML5学堂

HTML5学堂微信~欢迎扫码关注

HTML5学堂微信

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端