JavaScript基础（六）即时函数、链式调用原理

即时函数

// 即时函数
(function(接收参数){
	// 代码块
})(传递参数);

例如：

(function(a){
	alert(a); // 10 ^_^ 即时函数默认会执行一次代码块
})(10);

(function(a){
	a(); // 1 ^_^
})(function(){alert(1)});

var T = (function(){
	function Tab(){ }
	// // 默认有一个return
	// return undefined
})();
// 分析 T ==> return undefined
// alert(T); // undefined

var T = (function(){
	function Tab(){
		return 100;
	}
	return {
		tab: Tab
	}
})();
// 分析 T ==> return {tab: Tab})
// alert(T.tab); // function Tab(){return 100;}
alert(T.tab()); // 100

var T = (function(){
	function Tab(){
		return function(){
			return 300;
		}
	}
	return {
		tab: Tab
	}
})();
// 分析 T ==> return {tab: Tab})；T.tab() ==> return function(){return 300;}
alert(T.tab()()); // 300

面试题

(function(callback){
	p = {name: 'cc'};
	callback(p);
	alert(p.name);
})(function(obj){
	obj.name = 'aa';
	obj = {name: 'bb'};
});
// 输出结果？

/*
分析：
	1、等价于
	function(){
		var callback = function(obj){
			obj.name = 'aa';
			obj = {name: 'bb'};
		}
		p = {name: 'cc'};
		callback(p);
		alert(p.name);
	}
	2、
		var callback = function(obj){
			var obj = p; ===> {name: cc};
			obj.name = 'aa';  ===> p.name = 'aa';
			obj = {name: 'bb'}; ===> 陷阱，obj指向新的区域了，这时就和p没有关系
		}
	3、结果输出：aa
*/

链式调用的原理

<div id="box">fadsfga</div>
// 链式调用的原理
function linkFn(id){
	var dom = document.getElementById(id);
	var json = {
		html: function(content){
			dom.innerHTML = content;
			return this;
		},
		css: function(key, value){
			dom.style[key] = value;
			return this;
		}
	}
	return json;
}
// 链式调用
linkFn('box').html('dadafdsfsd').css('color', 'red').css('width', '100px').css('height', '100px').css('border', '1px solid red');