[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高手之路] ...
随机推荐
- 微信网页授权封装接口——node.js版
Wechat 网页授权 授权url:(请在微信客户端中打开此链接体验) xxx为config.js中的WECHAT_DOMAIN 1.scope为snsapi_base xxx/?route=auth ...
- js学习--变量作用域和作用域链
作为一名菜鸟的我,每天学点的感觉还是不错的.今天学习闭包的过程中看到作用域与作用域链这两个概念,我觉得作为一名有追求的小白,有必要详细了解下. 变量的作用域 就js变量而言,有全局变量和局部变量.这里 ...
- Microsoft Visual Studio 打开代码出现乱码解决方案
在用VS编写代码时,文本的字符集可能和编译器的字符集不同,在这种情况下代码会显示出乱码. 解决办法: 在VS的工具->选项里面找到"文本编辑器",勾选“自动检测不带签名的UT ...
- Servlet总结一
Servlet总结一 HttpServlet 想要实现一个servlet必须继承这个类,其实一个servlet就是一个java文件,但是这个类必须是继承HttpServlet. 生命周期 servle ...
- 2017 ACM/ICPC Asia Regional Shenyang Online spfa+最长路
transaction transaction transaction Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 132768/1 ...
- 原生的AJAX
var XHR=null; if (window.XMLHttpRequest) { // 非IE内核 XHR = new XMLHttpRequest(); } else if (window.Ac ...
- 转：【Java并发编程】之四：守护线程与线程阻塞的四种情况
转载请注明出处:http://blog.csdn.net/ns_code/article/details/17099981 守护线程 Java中有两类线程:User Thread(用户线 ...
- js数组、内置对象、自定义对象
[js中的数组] 1.数组的基本概念? 数组是在内存空间中连续存储的一组有序数据的集合 元素在数组中的顺序,称为下标.可以使用下表访问数字的每个元素. 2.如何声明一个数组? ① 使用字面量声明: 在 ...
- HTML5 javascript 音乐 音频
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 【Alpha阶段】第一次Scrum Meeting！
每日任务 1.本次会议为第一次 Meeting会议: 2.本次会议在中午12:30,在第五社区5号楼楼下,召开本次会议为30分钟讨论接下来的任务: 一.今日站立式会议照片 二.每个人的工作 (有wor ...