JS 面向对象详解

Posted 2020-12-04 nullcodeworld

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 面向对象详解相关的知识，希望对你有一定的参考价值。

面向对象详解1

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6     </head>
 7     <body>
 8         <script src="js/app1.js"></script>
 9     </body>
10 </html>

js/app1.js

 1 /*function People(){
 2     
 3 }
 4 People.prototype.say=function(){
 5     alert("hello");
 6 }
 7 function Student(){
 8     
 9 }
10 Student.prototype=new People();
11 var superSsay=Student.prototype.say;
12 Student.prototype.say=function(){
13     superSsay.call(this);
14     alert("stu-hello");
15 }
16 var s=new Student();
17 s.say();*/
18 
19 
20 /*function People(name){
21     this._name=name;
22 }
23 People.prototype.say=function(){
24     alert("peo-hello"+this._name);
25 }
26 function Student(name){
27     this._name=name;
28 }
29 Student.prototype=new People();
30 var superSsay=Student.prototype.say;
31 Student.prototype.say=function(){
32     superSsay.call(this);
33     alert("stu-hello"+this._name);
34 }
35 var s=new Student("iwen");
36 s.say();*/
37 
38 
39 (function(){
40     var n="ime";
41     function People(name){
42        this._name=name;
43     }
44     People.prototype.say=function(){
45        alert("peo-hello"+this._name);
46     }  
47     window.People=People;
48 }());
49 
50 
51 (function(){
52     function Student(name){
53        this._name=name;
54     }
55     Student.prototype=new People();
56     var superSsay=Student.prototype.say;
57     Student.prototype.say=function(){
58         superSsay.call(this);
59         alert("stu-hello"+this._name);
60     }
61     window.Student=Student;
62 }());
63 
64 var s=new Student("iwen");
65 s.say();

面向对象详解2

OO2.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8             <script src="js/app2.js"></script>
 9     </body>
10 </html>

js/app2.js

 1 /*function Person(){
 2     var _this={};
 3     _this.sayHello=function(){
 4         alert("P-hello");
 5     }
 6     return _this;
 7 }
 8 function Teacher(){
 9     var _this=Person();
10     var surperSay=_this.sayHello;
11     _this.sayHello=function(){
12         surperSay.call(_this);
13         alert("T-hello");
14     }
15     return _this;
16     
17 }
18 var t=Teacher();
19 t.sayHello();
20 */
21 
22 
23 /*function Person(name){
24     var _this={};
25     _this._name=name;
26     _this.sayHello=function(){
27         alert("P-hello"+_this._name);
28     }
29     return _this;
30 }
31 function Teacher(name){
32     var _this=Person(name);
33     var surperSay=_this.sayHello;
34     _this.sayHello=function(){
35         surperSay.call(_this);
36         alert("T-hello"+_this._name);
37     }
38     return _this;
39     
40 }
41 var t=Teacher("iwen");
42 t.sayHello();*/
43 
44 (function(){
45     var n="ime";
46     function Person(name){
47         var _this={};
48         _this._name=name;
49         _this.sayHello=function(){
50             alert("P-hello"+_this._name+n);
51         }
52         return _this;
53     }
54     window.Person=Person;
55 }());
56 function Teacher(name){
57     var _this=Person(name);
58     var surperSay=_this.sayHello;
59     _this.sayHello=function(){
60         surperSay.call(_this);
61         alert("T-hello"+_this._name);
62     }
63     return _this;
64     
65 }
66 var t=Teacher("iwen");
67 t.sayHello();

以上是关于JS 面向对象详解的主要内容，如果未能解决你的问题，请参考以下文章

JS 面向对象详解

JavaScript面向对象——JS OOP基础与JS 中This指向详解

面向对象实现：多选框详解CheckBox.js类，单选按钮类Radio.js的父类继承调用

详解面向对象编程——JavaScriptOOP