[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高手之路] ...
随机推荐
- URI和URL的区别 一起学习呗
一直存在很多技术上的争论,其中最为妙的恐怕就是web地址应该叫什么的问题.通常情况就是这样:有人把地址栏的内容叫"URL",这时候有些人就来劲了:"不!其实那就是URI. ...
- 安装sklearn过程
sklearn是scikit-learn的简称,诸多python工具包都需要这个库 安装顺序: wheel numpy scipy sklearn 因为这个库一直安装不好,都没有动力继续深造机器学习了 ...
- Docker 集群环境实现的新方式
近几年来,Docker 作为一个开源的应用容器引擎,深受广大开发者的欢迎.随着 Docker 生态圈的不断建设,应用领域越来越广.云计算,大数据,移动技术的快速发展,加之企业业务需求的不断变化,紧随技 ...
- 学习js函数--函数定义
函数的定义方法有三种 1.函数表达式 2.函数声明 3,new function构造函数 这边主要看下函数表达式和函数声明 函数表达式(未省略标志的) var alertName = function ...
- px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
- 【Java数据结构学习笔记之二】Java数据结构与算法之队列(Queue)实现
本篇是数据结构与算法的第三篇,本篇我们将来了解一下知识点: 队列的抽象数据类型 顺序队列的设计与实现 链式队列的设计与实现 队列应用的简单举例 优先队列的设置与实现双链表实现 队列的抽象数据类型 ...
- Navicat连接oracle数据出现的oci问题
为了用navicat操作数据库,我安装了navicat,安装完后可以连接oracle,mysql,sql service,sqlite,所以这个工具非常好用. 但是在连接数据库的时候报错了:" ...
- 【Beta阶段】第二次scrum meeting
Coding/OSChina 地址 1. 会议内容 学号 主要负责的方向 昨日任务 昨日任务完成进度 接下去要做 99 PM 会议总结,博客编写,代码整理 100% 准备下一次会议内容,并对已完成的代 ...
- 【Alpha】Daily Scrum Meeting——Day6
站立式会议照片 1.本次会议为第五次Meeting会议: 2.本次会议在上午大课间09:40,在禹州楼召开,本次会议为30分钟讨论昨天的任务完成情况以及接下来的任务安排. 燃尽图 每个人的工作分配 成 ...
- vbs文件共享变量与函数的方法
参考资料: vbs能否像其他编程语言一样,把写好的代码打包成类库以供调用呢?经过搜索和实验,发现vbs文件之间可以互相调用并共享变量,这样我们就不用再反复地编写轮子了. 以下是一个调用实例: ==== ...