[js高手之路] javascript面向对象写法与应用
2017-10-08 14:43
645 查看
一、什么是对象?
对象是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
三、为对象添加属性和方法
此处创建了一个obj对象, 添加了3个属性: userName, age, sex,一个方法: showUserName
访问属性和方法:
对象.属性名称
对象.方法名称()
另一种形式创建对象
先创建一个空的json,然后再为这个空的json对象添加属性和方法,上例方法中使用了一个关键词this, 关于this的指向问题,可以参考我的这篇文章[js高手之路]this知多少。
也可以直接在创建json的时候,添加属性和方法
四,用面向对象的写法,封装一个加、减法.
方式一:
方式二:
方式三:
更强的四则运算封装,参考我的这篇文章:[js高手之路]面向对象+设计模式+继承一步步改造简单的四则运算
五、用面向对象的写法,封装一个素数对象
这里我用的是json方式,你可以试试用构造函数方式改写
六、面向对象的写法,封装一个隔行变色的效果
我们可以在此例的基础上,稍加改造,让对象支持像jquery一样的链式调用,只需要在3个方法中, 返回当前对象(this)即可
对象是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
三、为对象添加属性和方法
var obj = new Object(); obj.userName = 'ghostwu'; obj.age = 22; obj.sex = 'man'; obj.showUserName = function(){ alert( obj.userName ); } obj.showUserName();
此处创建了一个obj对象, 添加了3个属性: userName, age, sex,一个方法: showUserName
访问属性和方法:
对象.属性名称
对象.方法名称()
另一种形式创建对象
var obj = {}; obj.userName = 'ghostwu'; obj.age = 22; obj.sex = 'man'; obj.showUserName = function(){ return this.userName + '---->' + this.age + '---->' + this.sex; } alert( obj.showUserName() );
先创建一个空的json,然后再为这个空的json对象添加属性和方法,上例方法中使用了一个关键词this, 关于this的指向问题,可以参考我的这篇文章[js高手之路]this知多少。
也可以直接在创建json的时候,添加属性和方法
var obj = { userName : 'ghostwu', age :22, sex :'man', showInfo : function(){ return this.userName + '---->' + this.age + '--->' + this.sex; } }; alert( obj.showInfo() );
四,用面向对象的写法,封装一个加、减法.
方式一:
var obj = new Object(); obj.add = function( a, b ){ return a + b; }; obj.sbb = function( a, b ){ return a - b; } alert( obj.add( 10, 20 ) ); alert( obj.sbb( 10, 20 ) );
方式二:
var obj = {}; obj.add = function( a, b ){ return a + b; } obj.sbb = function( a, b ){ return a - b; } alert( obj.add( 10, 20 ) ); alert( obj.sbb( 10, 20 ) );
方式三:
var obj = { add : function( a, b ){ return a + b; }, sbb : function( a, b ){ return a - b; } }; alert( obj.add( 10, 20 ) ); alert( obj.sbb( 10, 20 ) );
更强的四则运算封装,参考我的这篇文章:[js高手之路]面向对象+设计模式+继承一步步改造简单的四则运算
五、用面向对象的写法,封装一个素数对象
var Prime = { aPrime : [], isPrime : function( n ){ if ( n < 2 ) { return false; }else { var flag = true; for( var i = 2; i < n; i++ ){ if( n % i == 0 ) { flag = false; break; } } return flag; } }, getPrime : function( start, end ){ for( var i = start; i <= end; i++ ){ if( this.isPrime( i ) ) { this.aPrime.push( i ); } } return this.aPrime; }, count : function(){ return this.aPrime.length; } }; alert( Prime.isPrime( 11 ) ); alert( Prime.getPrime( 1, 100 ) ); alert( Prime.count() );
这里我用的是json方式,你可以试试用构造函数方式改写
六、面向对象的写法,封装一个隔行变色的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { margin: 10px; padding: 10px; } .even-color { background:#ccc; } .odd-color { background: #eee; } .active{ background:yellow; } </style> <script> var Bg = { aDiv : [], oldColor : null, init : function(){ this.aDiv = document.querySelectorAll( "div" ); }, setBgColor : function(){ for( var i = 0 ; i < this.aDiv.length; i++ ){ if( i % 2 == 0 ) { this.aDiv[i].className = 'even-color'; }else { this.aDiv[i].className = 'odd-color'; } } }, hover : function(){ var that = this; for( var i = 0 ; i < this.aDiv.length; i++ ){ this.aDiv[i].onmouseover = function(){ that.oldColor = this.className; this.className = 'active'; } this.aDiv[i].onmouseout = function(){ this.className = that.oldColor; } } } } window.onload = function(){ Bg.init(); Bg.setBgColor(); Bg.hover(); } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
我们可以在此例的基础上,稍加改造,让对象支持像jquery一样的链式调用,只需要在3个方法中, 返回当前对象(this)即可
var Bg = { aDiv : [], oldColor : null, init : function(){ this.aDiv = document.querySelectorAll( "div" ); return this; }, setBgColor : function(){ for( var i = 0 ; i < this.aDiv.length; i++ ){ if( i % 2 == 0 ) { this.aDiv[i].className = 'even-color'; }else { this.aDiv[i].className = 'odd-color'; } } return this; }, hover : function(){ var that = this; for( var i = 0 ; i < this.aDiv.length; i++ ){ this.aDiv[i].onmouseover = function(){ that.oldColor = this.className; this.className = 'active'; } this.aDiv[i].onmouseout = function(){ this.className = that.oldColor; } } } } window.onload = function(){ Bg.init().setBgColor().hover(); }
相关文章推荐
- JavaScript 定义类的最佳写法——完整支持面向对象(封装、继承、多态),兼容所有浏览器,支持用JSDuck生成文档
- JS:CSS在JAVASCRIPT中的应用
- 服务器端 js 利用JavaScript开发事件驱动的Web应用 – node.js简介
- 使用 Node.js 开发基于 JavaScript 的 RESTful 应用
- 悟透JavaScript(理解JS面向对象的好文章)
- js(javascript)中的奇特for循环写法!
- javascript面向对象的一些写法
- 归纳下js面向对象的几种常见写法
- JSINQ——Linq在Javascript的应用
- Javascript中定义方法的另类写法(批量定义js对象的方法)
- javascript面向对象的写法及jQuery面向对象的写法
- js(javascript)中的奇特for循环写法!
- javascript面向对象的5种写法
- javascript面向对象写法--极简主义法
- 面向对象的Javascript编程(JS数据结构)
- JS 中面向对象的5种写法
- JS面向对象5中写法
- js原生之一个面向对象的应用
- json在javascript中的应用(json.js)
- javascript中面向对象的5种写法