原型与继承的面试题精讲

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学堂微信~欢迎扫码关注