js面试题--js的继承

js是门灵活的语言，实现一种功能往往有多种做法,ECMAScript没有明确的继承机制，而是通过模仿实现的，根据js语言的本身的特性,js实现继承有以下通用的几种方式

1.使用对象冒充实现继承(该种实现方式可以实现多继承)

实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值

Js代码  

1. function Parent(firstname)
2. {
3. this.fname=firstname;
4. this.age=40;
5. this.sayAge=function()
6. {
7. console.log(this.age);
8. }
9. }
10. function Child(firstname)
11. {
12. this.parent=Parent;
13. this.parent(firstname);
14. delete this.parent;
15. this.saySomeThing=function()
16. {
17. console.log(this.fname);
18. this.sayAge();
19. }
20. }
21. var mychild=new  Child("李");
22. mychild.saySomeThing();

2.采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链，则采用5混合模式)

实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

Js代码  

1. function Parent(firstname)
2. {
3. this.fname=firstname;
4. this.age=40;
5. this.sayAge=function()
6. {
7. console.log(this.age);
8. }
9. }
10. function Child(firstname)
11. {
12. this.saySomeThing=function()
13. {
14. console.log(this.fname);
15. this.sayAge();
16. }
17. this.getName=function()
18. {
19. return firstname;
20. }
21. }
22. var child=new Child("张");
23. Parent.call(child,child.getName());
24. child.saySomeThing();

3.采用Apply方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链，则采用5混合模式)

实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

Js代码  

1. function Parent(firstname)
2. {
3. this.fname=firstname;
4. this.age=40;
5. this.sayAge=function()
6. {
7. console.log(this.age);
8. }
9. }
10. function Child(firstname)
11. {
12. this.saySomeThing=function()
13. {
14. console.log(this.fname);
15. this.sayAge();
16. }
17. this.getName=function()
18. {
19. return firstname;
20. }
21. }
22. var child=new Child("张");
23. Parent.apply(child,[child.getName()]);
24. child.saySomeThing();

4.采用原型链的方式实现继承

实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承

Js代码  

1. function Parent()
2. {
3. this.sayAge=function()
4. {
5. console.log(this.age);
6. }
7. }
8. function Child(firstname)
9. {
10. this.fname=firstname;
11. this.age=40;
12. this.saySomeThing=function()
13. {
14. console.log(this.fname);
15. this.sayAge();
16. }
17. }
18. Child.prototype=new  Parent();
19. var child=new Child("张");
20. child.saySomeThing();

5.采用混合模式实现继承

Js代码  

1. function Parent()
2. {
3. this.sayAge=function()
4. {
5. console.log(this.age);
6. }
7. }
8. Parent.prototype.sayParent=function()
9. {
10. alert("this is parentmethod!!!");
11. }
12. function Child(firstname)
13. {
14. Parent.call(this);
15. this.fname=firstname;
16. this.age=40;
17. this.saySomeThing=function()
18. {
19. console.log(this.fname);
20. this.sayAge();
21. }
22. }
23. Child.prototype=new  Parent();
24. var child=new Child("张");
25. child.saySomeThing();
26. child.sayParent();

版权声明：本文为博主原创文章，未经博主允许不得转载。