[js高手之路] javascript面向对象写法与应用

Posted 2020-10-09 ghostwu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[js高手之路] javascript面向对象写法与应用相关的知识，希望对你有一定的参考价值。

一、什么是对象？

对象是n个属性和方法组成的集合，如js内置的document, Date, Regexp, Math等等

document就是有很多的属性和方法, 如：getElementById, getElementsByTagName等等这些就是document对象支持的方法，那么我们常见的onclick, onmouseover,onmouseout等等就是document支持的属性

二、javascript创建自定义对象，常用的有两种方式：

上面是js内置的对象，如果我们需要自己创建对象，可以使用下面2种方式【构造函数方式与字面量方式】：

1, var obj = new Object() 构造函数方式

2, var obj = {} 字面量方式，其实就是一个json

三、为对象添加属性和方法

1 var obj = new Object();
2 obj.userName = \'ghostwu\';
3 obj.age = 22;
4 obj.sex = \'man\';
5 obj.showUserName = function(){
6     alert( obj.userName );
7 }
8 obj.showUserName();

此处创建了一个obj对象，添加了3个属性: userName, age, sex，一个方法: showUserName

访问属性和方法：

对象.属性名称

对象.方法名称()

另一种形式创建对象

1 var obj = {};
2 obj.userName = \'ghostwu\';
3 obj.age = 22;
4 obj.sex = \'man\';
5 obj.showUserName = function(){
6     return this.userName + \'---->\' + this.age  + \'---->\' + this.sex;
7 }
8 alert( obj.showUserName() );

先创建一个空的json,然后再为这个空的json对象添加属性和方法，上例方法中使用了一个关键词this, 关于this的指向问题，可以参考我的这篇文章[js高手之路]this知多少。

也可以直接在创建json的时候，添加属性和方法

1 var obj = {
2     userName  : \'ghostwu\',
3     age  :22,
4     sex  :\'man\',
5     showInfo : function(){
6         return this.userName + \'---->\' + this.age + \'--->\' + this.sex;
7     }
8 };
9 alert( obj.showInfo() );

四，用面向对象的写法，封装一个加、减法.

方式一:

1 var obj = new Object();
2 obj.add = function( a, b ){
3     return a + b;
4 };
5 obj.sbb = function( a, b ){
6     return a - b;
7 }
8 alert( obj.add( 10, 20 ) );
9 alert( obj.sbb( 10, 20 ) );

方式二:

1 var obj = {};
2 obj.add = function( a, b ){
3     return a + b;
4 }
5 obj.sbb = function( a, b ){
6     return a - b;
7 }
8 alert( obj.add( 10, 20 ) );
9 alert( obj.sbb( 10, 20 ) );

方式三:

 1 var obj = {
 2     add : function( a, b ){
 3         return a + b;
 4     },
 5     sbb : function( a, b ){
 6         return a - b;
 7     }
 8 };
 9 alert( obj.add( 10, 20 ) );
10 alert( obj.sbb( 10, 20 ) );

更强的四则运算封装，参考我的这篇文章：[js高手之路]面向对象+设计模式+继承一步步改造简单的四则运算

五、用面向对象的写法，封装一个素数对象

 1 var Prime = {
 2     aPrime : [],
 3     isPrime : function( n ){
 4         if ( n < 2 ) {
 5             return false;
 6         }else {
 7             var flag = true;
 8             for( var i = 2; i < n; i++ ){
 9                 if( n % i == 0 ) {
10                     flag = false;
11                     break;
12                 }
13             }
14             return flag;
15         }
16     },
17     getPrime : function( start, end ){
18         for( var i = start; i <= end; i++ ){
19             if( this.isPrime( i ) ) {
20                 this.aPrime.push( i );
21             }
22         }
23         return this.aPrime;
24     },
25     count : function(){
26         return this.aPrime.length;
27     }
28 };
29 alert( Prime.isPrime( 11 ) );
30 alert( Prime.getPrime( 1, 100  ) );
31 alert( Prime.count() );

这里我用的是json方式，你可以试试用构造函数方式改写

六、面向对象的写法，封装一个隔行变色的效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         div {
10             margin: 10px;
11             padding: 10px;
12         }
13         .even-color {
14             background:#ccc;
15         }
16         .odd-color {
17             background: #eee;
18         }
19         .active{
20             background:yellow;
21         }
22     </style>
23     <script>
24         var Bg = {
25             aDiv : [],
26             oldColor : null,
27             init : function(){
28                 this.aDiv = document.querySelectorAll( "div" );
29             },
30             setBgColor : function(){
31                 for( var i = 0 ; i < this.aDiv.length; i++ ){
32                     if( i % 2 == 0 ) {
33                         this.aDiv[i].className = \'even-color\';
34                     }else {
35                         this.aDiv[i].className = \'odd-color\';
36                     }
37                 }
38             },
39             hover : function(){
40                 var that = this;
41                 for( var i = 0 ; i < this.aDiv.length; i++ ){
42                     this.aDiv[i].onmouseover = function(){
43                         that.oldColor = this.className;
44                         this.className = \'active\';
45                     }
46                     this.aDiv[i].onmouseout = function(){
47                         this.className = that.oldColor;
48                     }
49                 }
50             }
51         }
52         window.onload = function(){
53             Bg.init();
54             Bg.setBgColor();
55             Bg.hover();
56         }
57     </script>
58 </head>
59 <body>
60    <div></div>
61    <div></div>
62    <div></div>
63    <div></div>
64    <div></div>
65    <div></div>
66    <div></div>
67    <div></div>
68    <div></div>
69    <div></div> 
70 </body>
71 </html>

我们可以在此例的基础上，稍加改造，让对象支持像jquery一样的链式调用，只需要在3个方法中，返回当前对象(this)即可

 1 var Bg = {
 2     aDiv : [],
 3     oldColor : null,
 4     init : function(){
 5         this.aDiv = document.querySelectorAll( "div" );
 6         return this;
 7     },
 8     setBgColor : function(){
 9         for( var i = 0 ; i < this.aDiv.length; i++ ){
10             if( i % 2 == 0 ) {
11                 this.aDiv[i].className = \'even-color\';
12             }else {
13                 this.aDiv[i].className = \'odd-color\';
14             }
15         }
16         return this;
17     },
18     hover : function(){
19         var that = this;
20         for( var i = 0 ; i < this.aDiv.length; i++ ){
21             this.aDiv[i].onmouseover = function(){
22                 that.oldColor = this.className;
23                 this.className = \'active\';
24             }
25             this.aDiv[i].onmouseout = function(){
26                 this.className = that.oldColor;
27             }
28         }
29     }
30 }
31 window.onload = function(){
32     Bg.init().setBgColor().hover();
33 }

以上是关于[js高手之路] javascript面向对象写法与应用的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript高手之路：全选不选反选效果

[js高手之路]寄生组合式继承的优势

[js高手之路]面向对象+设计模式+继承一步步改造简单的四则运算

[js高手之路]立即表达式的多种写法与注意点以及in操作符的作用

[js高手之路] 我的开源javascript框架gdom - 选择器用法