[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高手之路] ...
随机推荐
- hdu 2066 最短路水题
题意:给出多个可选择的起始点和终点,求最短路 思路:执行起始点次的spfa即可 代码: #include<iostream> #include<cstdio> #include ...
- xml字符串转对象xml文件转对象
判断是否是ie浏览器和非ie浏览器的方法有多种,在此只介绍用例中的方法: 1.解析xml字符串,得到xml对象的方式: function createXml(str){ if(document.all ...
- mpls vpn剩余笔记
将IP地址映射为简单的具有固定长度的标签 用于快速数据包交换 20 3 1 8 在整个转发过程中,交换节点仅根据标记进行转发 标签交换路径(LSP) 多协议标签交换MPLS最初是为了提高转发速度而提出 ...
- 集美大学网络1413第十一次作业成绩（团队七） -- Alpha冲刺之事后诸葛亮
题目 团队作业7--Alpha冲刺之事后诸葛亮 团队作业7成绩 团队/分值 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队角色. 管理.合作 总结 讨论照片 团队成员 角色.贡献 总 ...
- 201521123068 《java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 泛型,即参数化类型,不考虑类型参数的继承关系,getClass方法的返 ...
- 201521123072《Java程序设计》第1周学习总结
201521123072<Java程序设计>第1周学习总结 标签(空格分隔): JAVA学习 1,本周学习总结 了解了JDK,JRE,JVM,学会使用cmd中一些简单的命令 了解了Java ...
- 201521123072《java程序设计》第十二周学习总结
201521123072<java程序设计>第十二周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象 ...
- 实际用户ID，有效用户ID及设置用户ID
实际用户ID,有效用户ID和设置用户ID 看UNIX相关的书时经常能遇到这几个概念,但一直没有好好去理清这几个概念,以致对这几个概念一直一知半解.今天好好区分了一下这几个概念并总结如下.说白了这几个U ...
- java基础知识3--如何获取资源文件（Java中获取资源文件的url）
java开发中,常见的resource文件有:.xml,.properties,.txt文件等,后台开发中经常用到读取资源文件,处理业务逻辑,然后返回结果. 获取资源文件的方法说明getResourc ...
- String ua = request.getHeader("user-agent")---ua值为null
最近在修改错误日志,发现总报空指针,追踪代码发现这个ua的值有时候会为null,上网查了半天也无果,按常理说ua的值不可能为null,俩小时没找到原因,只是将ua判null了一下,记录一下,如果有大虾 ...