对象 - 自定义对象 ¶

本文导航

花括号语法
自我引用this
自定义对象实际上起到什么作用?

作者：KK
发表日期：2016.2.21

前面介绍了一些JS自带的全局对象,这回教你怎么创建自己的对象,首先对象的特征就是typeof(对象变量)得到的结果就是object这个字符串结果,就是一个类型名称,翻译过一就是"对象"

我们这回自己创建对象,最简单的办法就是var a = new Object();这样,将new Object()赋值给一个变量,那么这个变量就是一个对象,你自己typeof一下看看是不是object

注意开头的O是大写的字母O哦,不然要是工作2年后你还写成小写的object就算我饶了你,面试官都打死你

可是这个对象目前是一个空的对象,它没有什么实用的方法(也有一些默认自带的方法,但这个基础教程就不解释太多啦)

我们要为它增加方法其实也很简单,来例子:

var myObj = new Object();
myObj.sayHello = function(){
	alert('hello');
};
myObj.sayHello();

myObj.age = 88; //增加age属性
alert(myObj.age); //88
myObj.age = 99; //就算已经有了属性,都可以重新赋值或者重新计算,比如自增运算 myObj.age++

alert(myObj.name); //undefined 因为我们没有为myObj添加name属性,所以这个属性是"未定义"的(undefined)

第2行代码中为myObj对象增加了一个叫做sayHello的属性,这个属性是一个匿名函数,当属性值为函数时,这个属性就变成了方法,所以可以执行myObj.sayHello()进行方法的调用

花括号语法 ¶

自定义对象不一定要new Object(),而是可以用一种花括号语法来,很简单:var myObj = {};这样就行了,跟new Object的效果是一样的

并且这个花括号也能生两行写

var myObj = {};
var myObj2 = {
	//中间可以写点什么...下面再说
};

然后在花括号里面可以预先定义这个对象的属性和方法:

var myObj = {
	name : '小明'
};

这样就定义了myObj对象,并且有一个name属性,属性值是字符串"小明",属性名称和属性值之间用一个:号隔开,:号左右有没有空格都可以,我个人认为这样的代码比较整洁,不拥挤,所以就加了空格,并且加很多个空格也可以的...只是没那个必要

如果要增加方法,只要将值写成函数就可以了

var myObj = {
	sayHello : function(){
		alert('hello!');
	}
};

其实函数也是值的一种,sayHello就是一个属性,由于值是一个函数,所以它个属性可以用函数语法来执行myObj.sayHello(),所以又称为方法,反正以后我们都把能执行的函数属性叫做方法了,外界也是这么叫的

当一次性声明多个属性或者方法时,在值的后面加个逗号,继续写一个属性名称,再加:号隔开又写一个值就可以,例子:

var myObj = {
	属性名称1 : '属性值1',
	属性名称2 : function(){
		alert('属性值2是一个函数,又叫方法');
	},
	属性名称3 : '属性值3', 属性4 : 444  //可以写在同一行,反正只要有符号隔开就行,不管你怎么分行,隔多少行
};
myObj.属性名称2();

并且在以后的文章中,我都是用花括号语法的哦,人懒嘛,呵呵~~~

自我引用`this` ¶

对象的方法可以使用自己的属性值,使用this对象来代表自己,作为自己的引用,先看代码

var myObj = {
	name : '小明',
	sayName : function(){
		alert('我的名字叫做' + this.name); //this.name就是自己这个对象的name属性
		alert('当前执行的方法代码是\n' + this.sayName); //字符串知识点的章节有提到 \n 是一个转义字符,表示换行
	}
};

但是有个运行规则,当this写在哪个函数里,那么this就是指谁,上面的代码中,this写在一个匿名函数里,这个匿名函数是sayName的值,而sayName又属于myObj,所以this指的是myObj

然而如果sayName里又有函数,这个函数里有this就不是指myObj了,先看代码:

var myObj = {
	name : '小明',
	sayName : function(){
		
		function xxx(){
			alert(this.name); //undefined
		}
		xxx();
	}
};

因为xxx里的this是指xxx函数自己,这种现象被业界称为this飘移,再来代码:

var myObj = {
	name : '小明',
	sayName : function(){
		
		function xxx(){
			this.name = 'xxx的name值'; //临时创建name属性
			alert(this.name); //xxx的name值
		}
		xxx();
	}
};

所以并不能读取到myObj外面的name属性,要绕一下弯来实现,办法就是把myObj的this引用保存到一个变量里,再通过这个变量访问name属性

var myObj = {
	name : '小明',
	sayName : function(){
		var self = this;
		function xxx(){
			alert(self.name); //小明
		}
		xxx();
	}
};

自定义对象实际上起到什么作用? ¶

不同的对象有不同的功能,但JS中并不是所有存在的对象都能满足你快速建立你需要的功能

有时候需要你创建自定义对象来补充功能,下面我创建一个叫做"广告"的对象,它的作用是构造一个每2秒切换广告图片的广告区域,并且只有3张广告图轮流换

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>设计一个 广告 对象</title>
<script type="text/javascript">
var Banner = {
	bannerCount : 0,
	buildScope : function(wrapId, img1Url, img2Url, img3Url){
		var bannerWrapId = 'bannerScope' +  + this.bannerCount;
		var bannerHtml = '<div id="' + bannerWrapId + '"></div>';
		var bannerWrap = document.getElementById(wrapId); //通过指定的ID取得广告外框
		if(bannerWrap == null){
			alert('坑,你给我的外框咋找不到咧');
			return;
		}
		bannerWrap.innerHTML = bannerHtml;
		var lastBanner = '';
		
		//这个函数用来切换广告图
		function switchBanner(){
			var showBanner = '';
			if(lastBanner.length == 0 || lastBanner == img3Url){
				showBanner = img1Url;
			}else if(lastBanner == img1Url){
				showBanner = img2Url;
			}else{
				showBanner = img3Url;
			}
			document.getElementById(bannerWrapId).innerHTML = '<img src="' + showBanner + '">';
			lastBanner = showBanner;
		}
		switchBanner(); //先切换一次,将第一张图显示出来
		
		setInterval(switchBanner, 2000);
		
		this.bannerCount++;
	}
};

function buildBanner(divId){
	var imgUrl = 'http://' + document.domain + '/it/demo/js/banner/';
	if(divId == 'div1'){
		Banner.buildScope(
			divId,
			imgUrl +'1.jpg',
			imgUrl +'2.jpg',
			imgUrl +'3.jpg'
		);
	}else if(divId == 'div2'){
		Banner.buildScope(
			divId,
			imgUrl +'4.jpg',
			imgUrl +'5.jpg',
			imgUrl +'6.jpg'
		);
	}else if(divId == 'div3'){
		Banner.buildScope(
			divId,
			imgUrl +'7.jpg',
			imgUrl +'8.jpg',
			imgUrl +'9.jpg'
		);
	}
}
</script>
</head>
<body>
	<div id="div1"></div>
	<br/><br/>
	<div id="div2"></div>
	<br/><br/>
	<div id="div3"></div>
	
	<button type="button" onclick="buildBanner('div1');">向div1构造广告位</button>
	<button type="button" onclick="buildBanner('div2')">向div2构造广告位</button>
	<button type="button" onclick="buildBanner('div3')">向div3构造广告位</button>
</body>
</html>

点击查看效果

我这个例子做得不是很好,所以大家可能通过以上代码还是不能完全了解自定义对象的好处,其实就像自定义函数差不多,但是对象会好一些

继续前进,慢慢接触的应用多了就能感受多了,至少你要知道怎么自定义一个对象

对象 - 自定义对象 ¶

本文导航

花括号语法 ¶

自我引用this ¶

自定义对象实际上起到什么作用? ¶

自我引用`this` ¶