一、什么是对象?
对象是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 }
作者:ghostwu, 出处:http://www.cnblogs.com/ghostwu
博客大多数文章均属原创,欢迎转载,且在文章页面明显位置给出原文连接