[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
三、为对象添加属性和方法
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();
}
[js高手之路] javascript面向对象写法与应用的更多相关文章
- [js高手之路]javascript腾讯面试题学习封装一个简易的异步队列
这道js的面试题,是这样的,页面上有一个按钮,一个ul,点击按钮的时候,每隔1秒钟向ul的后面追加一个li, 一共追加10个,li的内容从0开始技术( 0, 1, 2, ....9 ),首先我们用闭包 ...
- [js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist
promise主要是用来解决异步回调问题,其实还有好几种比promise更好的方案,后面再说,这节,我们先用promise来改造下,我以前写的一篇文章[js高手之路]javascript腾讯面试题学习 ...
- [js高手之路]面向对象版本匀速运动框架
这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...
- [js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
- [js高手之路]从原型链开始图解继承到组合继承的产生
基于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 f ...
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...
- [js高手之路]设计模式系列课程-发布者,订阅者重构购物车
发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...
- [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息
抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...
- [js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)
该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路] ...
随机推荐
- java.lang.reflect.MalformedParameterizedTypeException异常问题
做dubbo框架集成的时候,出现的问题,本来的原来的工程没有错误,引入dubbo后报错,原因是spring的jar文件冲突,我用的spring是4.x,dubbo引入的是2.5所以需要去掉,相关的po ...
- PHP常量定义define与const
一.const PHP5.3以前,const只能在类内部声明变量,5.3+允许在外部声明变量,但还不能使用常量计算! const ONE = 1; const WORD = 'hello world' ...
- [自制操作系统] 原子操作&核间中断&读写锁&PRWLock
本文主要为读论文Scalable Read-mostly Synchronization Using Passive Reader-Writer Locks的记录. 并将其在JOS上实现.其中包括la ...
- 波涛1202wm8833 lihomme/历织造 2013秋装全新男装夹克 整身年龄外套潮流立领男士休闲外套薄_9才号
波涛1202wm8833 lihomme/历织造 2013秋装全新男装夹克 整身年龄外套潮流立领男士休闲外套薄_9才号 波涛1202wm8833lihomme/历织造2013秋装全新男装夹克整身年龄外 ...
- 当今游戏大作share的特性大盘点
极品游戏制作时的考虑要素大盘点 不知不觉入坑Steam已近4年,虽然说Steam的毒性让很多人走向一条不归路,但是想我这样即使"中毒"还是很快乐很感恩的.那么本期文章就谈谈我对其中 ...
- Java程序设计——学生信息系统
1.团队课程设计博客链接 http://www.cnblogs.com/YYYYYYY/p/7065278.html 2.个人负责模块说明 2.1 管理界面 2.2 清空:单击清空键,可清空数据栏 2 ...
- MarkDown 例子
一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...
- Java、javax、org、sun、Java.util等常用包的区别、详解、实例
Java.javax.org.sun包都是jdk提供的类包,且都是在rt.jar中.rt.jar是JAVA基础类库(java核心框架中很重要的包),包含lang在内的大部分功能,而且rt.jar默认就 ...
- 聊聊JAVA中 String类为什么不可变
前言 "我的风格比较偏传统和经典" 小明说,"我们在打扮自己的问题上还是蛮冒险的...我觉得当你是只狗的时候,穿什么都hold的住!" 哈哈哈,脱离单身狗快两年 ...
- python之线程相关的其他方法
一.join方法 (1)开一个主线程 from threading import Thread,currentThread import time def walk(): print('%s is r ...