A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

在javascript中的多态,封装本人已知道了!但是对继承的认真还是模模糊糊的..

评分

参与人数 1技术分 +1 收起 理由
曹伟 + 1

查看全部评分

4 个回复

倒序浏览
怎么没有人回答啊?怎么也没有加分啊!{:soso_e167:}
回复 使用道具 举报
javascript 中的任何对象都具有prototype 属性,包括作为构建函数的函数对象。prototype 在初始化时只有一个属性constructor, 指向该对象的构建函数。所以,在构建函数的prototype 对象中添加的所有方法都可以通过对象实例的 prototype访问。当访问一个对象的方法或属性时,javascript 首先查找对象本身是否具有该属性,如果未找到,则继续查找prototype 对象中是否含有该属性。这就是javascript 实现对象继承的基本原理。
回复 使用道具 举报
面向对象语言有能力支持类以及类中方法和属性的重用,在JavaScript中实现继承可以通过本身的多种方法来实现,比如call()、 apply()、仿冒、原型链,其中各有优缺点,此外还可以通过一些外部库实现继承的能力,比如xbObject、zinherit等。

一.通过对象仿冒来实现继承:
1. <script type="text/javascript"> 
2. function Parent(pName){ 
3.    this.name = pName; 
4.    this.sayMyName = function(){ 
5.       alert(this.name); 
6.    }; 
7. } 
8. 
9. function Mother(pName){ 
10.    this.name = pName; 
11.    this.sayMyName = function(){ 
12.       alert(this.name+"sex*y"); 
13.    }; 
14. } 
15. 
16. function Child(cName,cNumber){ 
17.     this.myFace = Parent; 
18.     this.myFace(cName); 
19.     delete this.myFace; 
20. 
21.     this.myFace = Mother; 
22.     this.myFace(cName); 
23.     delete this.myFace; 
24. 
25.     this.number = cNumber; 
26.     this.sayNumber = function(){ 
27.       alert(this.number); 
28.     }; 
29. } 
30. 
31. var ObjP =new Parent("HideHai"); 
32. var ObjM =new Mother("Hidewow"); 
33. var ObjC =new Child("HideLow",3); 
34. 
35. ObjP.sayMyName(); 
36. ObjM.sayMyName(); 
37. ObjC.sayMyName(); 
38. ObjC.sayNumber(); 
39.   </script>

二.使用call()实现对象继承:
  call(obj,option....)  第一个参数是输入对象作为当前的this,其余的参数传递给函数本身。
1. <script type="text/javascript"> 
2. function Parent(pName){ 
3.    this.name = pName; 
4.    this.sayMyName = function(){ 
5.       alert(this.name); 
6.    }; 
7. } 
8. 
9. function Mother(pName){ 
10.    this.name = pName; 
11.    this.sayMyName = function(){ 
12.       alert(this.name+"sex*y"); 
13.    }; 
14. } 
15. 
16. function Child(cName,cNumber){ 
17.      
18.     Parent.call(this,cName); 
19. 
20.     Mother.call(this,cName); 
21. 
22.     this.number = cNumber; 
23.     this.sayNumber = function(){ 
24.       alert(this.number); 
25.     }; 
26. } 
27. 
28. var ObjP =new Parent("HideHai"); 
29. var ObjM =new Mother("Hidewow"); 
30. var ObjC =new Child("HideLow",3); 
31. 
32. ObjP.sayMyName(); 
33. ObjM.sayMyName(); 
34. ObjC.sayMyName(); 
35. ObjC.sayNumber(); 
36.   </script>

三.使用apply()方法实现继承:
  apply(obj,options[...])   第一个参数等同于call方法的第一个参数,第二个参数为一个以传入参数为元素的数组。

1. ....   //代码同上 
2. function Child(cName,cNumber){ 
3.      
4.     Parent.apply(this,new Array(cName)); 
5. 
6.     Mother.call(this,new Array(cName)); 
7. 
8.     this.number = cNumber; 
9.     this.sayNumber = function(){ 
10.       alert(this.number); 
11.     }; 
12. }


四.使用原型链实现继承:
  关键代码为 Child.prototype = new Parent(); 将Parent的属性和方法赋予Child。在原型链的使用中,对子类的构造函数不传递参数是标准做法。
1. <script type="text/javascript"> 
2. function Parent(pName){ 
3.    this.name = pName; 
4.    this.sayMyName = function(){ 
5.       alert(this.name); 
6.    }; 
7. } 
8. 
9. function Child(){ 
10. } 
11. Child.prototype = new Parent(); 
12. Child.prototype.name = ""; 
13. Child.prototype.number = 0; 
14. Child.prototype.sayNumber = function(){ 
15.       alert(this.number); 
16.     }; 
17. 
18. var ObjP =new Parent("HideHai"); 
19. //var ObjM =new Mother("Hidewow"); 
20. var ObjC =new Child("HideLow"); 
21. 
22. ObjC.name = "HideLow"; 
23. ObjC.number = 3; 
24. 
25. ObjP.sayMyName(); 
26. ObjC.sayMyName(); 
27. ObjC.sayNumber(); 
28.   </script>

评分

参与人数 1技术分 +1 收起 理由
曹伟 + 1 赞一个!

查看全部评分

回复 使用道具 举报
设置对象的方法:
Person.prototype.toString() {
    return this.first + " " + this.last;
}
alert( person.toString() ); // displays "John Dough"
alert( person ); // alert函数将默认调用toString()函数

在这里我们用到了javascript中的prototype属性。所有的javascript对象都拥有一个prototype属性,javascript就是通过这个属性来实现继承关系的。具体的实现机制是这样的:当你访问一个对象的属性时,编译器将先查找对象的属性看有没有匹配的。如果没有找到,将继续查找这个对象的prototype属性所指的对象,看是否存在匹配的属性。如果还是没有找到,编译器将检查当前对象的prototype是否拥有prototype属性,如果有将继续查找下去。以此类推,直到查找完所有的prototype属性。
从这个过程不难看出,存在着一个类似于继承的访问链,可以把prototype对象指向我们要继承的父类,以此来访问父类的方法。

希望能帮到你!

评分

参与人数 1技术分 +1 收起 理由
曹伟 + 1

查看全部评分

回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马