js的this与匿名函数与事件

js-this

js中的this具有多态性

怎样变化this的值

function Person(){
	alert(this);
}
Person();//Person()==window.Person();
function SuperPerson(){
	
}
SuperPerson.a = Person;
SuperPerson.a();//a就是Person，a是由SuperPerson调用的，所以this为SuperPerson

var json = {
	a:Person
};
json.a();//this代表json

利用call和apply函数改变this的值

方法：

/*
 * 让window调用Person函数
 */
Person.call(window);//window.Person();
Person.apply(window);//window.Person();

例：

function Person(a){
	alert(this);
	alert(a);
}
function Per(a,b){
	alert(this);
	alert(a,b);
}

Person.call(window, 5);
Person.call(window,[1,2]);

js-clouse-匿名函数

概念
在函数中定义的函数，在外部中使用

闭包的应用场合

继承的实现方式

匿名函数：对面向对象的进一步封装

匿名函数最简单的写法

/*
 * 匿名函数
 */
(function(){
	alert("aaa");
})();
(function(a){
	alert(a);
})(3);
(function(a){
	alert(a);
})(window);

在匿名函数内部声明一个函数
1
2
3
4
5
6
(function(){
function Person(){
alert("aa");
}
})();
Person();
说明：
1. Person函数是定义在匿名函数内部的
2. 在外部直接调用Person()函数是会报错的，外部是访问不到Person函数的

在匿名函数内部的函数在外部的访问方案

(function(){
	function Person(){
		alert("person");
	}
	/*
	 * 1.给window对象动态添加了一个属性，该属性为Person
	 * 2.把匿名函数中声明的Person函数赋值给window的Person属性
	 */
	window.Person = Person;
})();
window.Person();

通过匿名函数构造一个类Person，该类有getName，setName，getId，setId，a，b方法，将来getName，setName，getId，setId在外部是可以访问的，但是a，b在外部无法访问

/*
 * 第一种写法
 */
(function(){
	function Person(){
		return{
			setName:setName,
			getName:getName,
			setId:setId,
			getId:getId
		};
	}
	/*
	 * 公开的函数
	 */
	function setName(name){
		this.name = name;
	}
	function getName(){
		return this.name;
	}
	function setId(id){
		this.id = id;
	}
	function getId(){
		return this.id;
	}
	/*
	 * 私有的函数
	 */
	function a(){
		
	}
	function b(){
		
	}
	window.Person = Person;
})();
var p = window.Person();
p.setName("abc");
alert(p.getName());

/*
 * 第二种写法
 */
(function(){
	/*
	 * 在匿名函数中定义了一个json对象
	 */
	var Person = {
			setName:function(name){
				this.name = name;
			},
			getName:function(){
				return this.name;
			},
			setId:function(id){
				this.id = id;
			},
			getId:function(){
				return this.id;
			}
	};
	window.Person = Person;
})();

js-event-事件

概念
1. 事件是应该绑定在一个对象上的
2. 事件是对象(绑定了该事件)的一个属性
3. 事件必须有触发机制
jquery声明事件
给id为aaa的元素声明了一个点击事件
1
2
3
$("#aaa").click(function(){

});

事件的做法

第一种

/*
 * 给页面上的div添加单击事件
 */
$().ready(function(){
	for(var i = 0;i < 3; i++){
	$("div").click(function(){
		alert("div");
	});		
	}
});

for循环了3次，事件被叠加了3次，用jquery的click声明单击事件，可叠加

第二种

$().ready(function(){
	for(var i = 0;i < 3; i++){
//		$("div").click(function(){
//			alert("div");
//		});		
		/*
		 * 把click属性从div元素上解除
		 */
		$("div").unbind("click");
		/*
		 * 把click属性绑定在div元素上
		 */
		$("div").bind("click",function(){
			alert("divabc");
		});
	}
});

利用unbind和bind可以避免事件叠加

-给未来元素添加事件

var me = $("body");
me.delegate("div", "click", function(tmp) {
	alert("bbbb");
});
为body下的div元素添加点击事件

delegate可以为已存在的或将来的元素添加事件

自定义事件

什么时候使用

有的时候，有的事件在浏览器内部没有定义，但还需要使用，这个时候就可以使用自定义事件

自定义事件的使用方式

声明一个事件a，把事件a绑定到一个元素上，在元素执行click事件时触发事件a

/*
 * 1.利用unbind和bind声明一个事件a,声明在div元素上
 * 2.声明div元素上的click事件
 * 3.在执行click事件时触发a事件
 */
$().ready(function(){
	/*
	 * 对自定义事件的声明
	 */
	$("div").unbind("事件a");
	$("div").bind("事件a",function(event,a,b){//a,b是形参，event是jquery内部自带的参数，必须要
		/*
		 * 该自定义事件要做的事情
		 */
		alert("事件a");
		alert(a);
		alert(b);
	});
	
	/*
	 * 执行div的click事件时，触发事件a
	 */
	$("div").unbind("click");
	$("div").bind("click",function(){
		/*
		 * trigger触发一个事件
		 */
		$(this).trigger("事件a",[5,6]);//[5,6]是实参
	});
});