标签：关键词 head margin scale function content over html 基础上
一、什么是对象？
对象是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 }
标签：关键词 head margin scale function content over html 基础上
原文地址：http://www.cnblogs.com/ghostwu/p/7637384.html
