1、函數定義
函數包含一組語句，它們是javascript的基礎模塊單元，用於代碼復用、信息隱藏和組合調用。函數用於指定對象的行為
2、函數的四種調用模式及this的初始化
第一種：方法調用模式
以下事例證明通過方法調用模式調用時，this綁定到擁有該方法的對象。如：
復制代碼 代碼如下:
var person = {
name: "defaultName",
setName : function(name){
this.name = name;
}
};
person.setName("zhangsan");
alert(person.name);
第二種：函數調用模式
以下事例證明通過函數調用模式調用時，this綁定到全局對象上。如：
復制代碼 代碼如下:
var test = add(value1, value2);
var name = "defaultName";
var person = {
name: "zhangsan", // person中定義的name
getName : function(){
// 通過此方法可以將test函數的this改變為person的this對象
var that = this; // 解決方案
// getName中定義的name
var name = "lisi";
var test = function(){
// 通過that來訪問person中的對象
// this指向Global對象
// this.name = defaultName
// that.name = zhangsan
alert([this.name, that.name]);
};
test(); // 函數調用模式
}
}
person.getName();
第三種：構造器調用模式
復制代碼 代碼如下:
// 定義一個Person的構造器，在調用時一定要用new調用
var Person = function(name){
this.name = name;
}
// 添加一個方法到Person
Person.prototype.getName = function(){
return this.name;
};
// 構造一個Person對象
var person = new Person("zhangsan");
alert(person.getName()); // 調用getName獲取person對象中name屬性的值
第四種：Apply調用模式
復制代碼 代碼如下:
<script type="text/javascript">
// 定一個累加方法。如sum(1,2,3,4...)
// 該方法位於window執行環境中。
var displayName = function(){
alert("sum的執行環境: " + typeof(this));
alert("Name: " + this.name); // 取出當前執行環境中name屬性
}
// 定一個Person對象
var Person = {
name: "zhangsan"
};
displayName.apply(Person);
</script>
3、Apply和call的區別
復制代碼 代碼如下:
// 定一個對象，包含一個add方法，返回a、b的和
var Person = {
'add' : function(a, b){
return a + b;
}
};
// 顯示a、b的和
function showInfo(a, b){
alert(this.add(a, b));
}
// 通過apply方法改變showInfo方法的this指向
//showInfo(1, 3); // 對象不支持次對象
showInfo.apply(Person, [1, 3]);
showInfo.call(Person, 1, 3);
// 從上面可以看出，apply和call的區別是apply接受一個數組作為被調函數的參數，
// 而call是通過將被調函數的所有參數以逗號分隔的形式展開
4、函數參數（arguments）
arguments並不是一個數組，只是與數組相似。arguments除了擁有length屬性，數組的所有屬性和方法都不具備。用arguments來實現一個累加的函數。
復制代碼 代碼如下:
function sum(){
var total = 0;
for(var i=0; i<arguments.length; i++){ // arguments.length返回sum函數調用時傳遞參數的個數
total += arguments[i];
}
return total;
}
alert("sum: " + sum(1, 3, 2, 4));
5、函數返回值（return）
當一個函數被調用，通常會從函數的｛開始執行到｝結束。如果想提前結束該函數的執行可以使用return語句，此時，return語句後面的所有語句將永遠不會執行。如：
復制代碼 代碼如下:
function test(){
alert("first");
return;
alert("second"); // 該語句永遠被不會執行
}
test();
// 一個函數總是會返回值，如果沒有使用return返回值，默認返回undefined。如：
function test(){
alert("first");
}
alert(test()); // 輸出：undefined
// 如果函數前使用new方式調用，且返回值不是一個對象，則返回this（新對象）。如：
function test(){
alert("first");
}
var t = new test();
alert(typeof t); // 輸出：‘object'
alert(t instanceof test); // 輸出：true
6、異常（exception）
異常是干擾程序正常流程的非正常事故（可能人為有意的）。當檢查出這樣的事故，應當拋出異常。如：
復制代碼 代碼如下:
function add(a, b){ // 定義一個加法函數
// 如果傳遞的參數不是數字類型，則拋出一個異常信息
if(typeof a != 'number' || typeof b != 'number'){
throw {
'name' : "typeError", // 屬性是自定義的，名字可以任意取
'message': "add方法必須使用數字作為參數"
};
}
return a + b;
}
(function(){
// 捕獲add方法可能產生的異常
try{
add(10, "");
} catch(e){
// 一個try語句只有一個catch語句，如果要處理多個異常，則通過異常的name屬性來區別
// 判斷異常的類型
if(e.name === "typeError"){
alert(e.message);
}
}
})();
7、給類型添加方法
javascript中允許給基本類型添加方法。如：boolean、string、Number
實例：在Function中添加一個method函數，該函數為Function添加其他自定義的函數（避免使用prototype），然後利用method函數想Function中添加一個add函數，最後測試add函數在Function中確實存在。該方法將func函數添加到Function中，以name命名。然後，返回Function的對象
復制代碼 代碼如下:
Function.prototype.method = function(name, func){
// 避免覆蓋已有的方法
if(!this.prototype[name]){
this.prototype[name] = func;
}
return this;
};
// 通過Function.method方法添加一個加法函數到Function，該函數的名稱為“add”
Function.method("add", function(a, b){
if(typeof a != 'number' || typeof b != 'number'){
throw {
'name' : "typeError",
'message' : "add方法必須傳入數字"
};
}
return a + b;
});
// 調用Function的add方法是否存在
(function(){
try{
alert(Function.add(1, 3)); // 輸出：4
} catch(e){
if(e.name === 'typeError'){
alert(e.message);
}
}
})();
// 去除字符串兩端的空白
String.method("trim", function(){
return this.replace(/^\s+|\s+$/g, '');
});
alert('|' + " hello world ".trim() + '|'); // 輸出： '|hello world|'
// 添加數字的取整函數
Number.method("integer", function(){
// 可以通過此種方式調用函數，如：Math.random() == Math['random']() == Math["random"]()
return Math[this < 0 ? 'ceil' : 'floor'](this);
});
alert((-10 / 3).integer()); // 輸出：-3
8、遞歸調用（arguments.callee）
遞歸調用就是自己調用自己。調用分為：直接調用和間接調用下面展示使用遞歸調用來計算指定值的斐波那契數列。
復制代碼 代碼如下:
// 求i的階乘
function factorial(i){
if(i < 2){
return 1;
}
return i*factorial(i-1); // 遞歸調用
}
alert(factorial(5)); // 求5的階乘
// 以上方式存在一個問題？如下：
var factorial = function(i){
if(i < 2){
return 1;
}
return i*factorial(i-1); // factorial還能被調用嗎？不能
}
var test = factorial;
factorial = null;
alert(test(2));
// 解決方案：
var factorial = function(i){
if(i < 2){
return 1;
}
return i*arguments.callee(i-1); // arguments.callee返回正被執行的 Function 對象，也就是所指定的 Function 對象的正文
}
var test = factorial;
factorial = null;
alert(test(5));
9、作用域
復制代碼 代碼如下:
// 在程序中，作用域控制著變量的可見性和生命周期。
var name = "default"; // 全局作用域
function getName(){
var name = "getName"; // getName作用域下
for(var i=0; i<2; i++){
var inName = "inName";
}
alert(i + "," + inName); // 2,inName 注意：在js中沒有塊級作用域，及if、for、while中聲明的變量是放在塊所在的作用域下
return name;
}
alert(getName()); // getName 注意：js存在函數作用域，所以在函數內部定義的變量在外部是不可見的
alert(name); // default
注意：在現代的很多語言中，推薦將變量盡可能的延遲聲明。如：java而在js中，卻不推薦這樣做，因為js不支持塊級作用域。推薦在函數的開始就將所有用到的變量進行聲明。
10、閉包
函數能夠訪問它被創建時環境的上下文稱為閉包。作用域的好處是，內部函數可以訪問外部函數的所有變量（除this和arguments）。
復制代碼 代碼如下:
var myObject = {
value : 0,
increment : function(inc){
this.value = typeof inc === 'number' ? inc : 1;
},
getValue : function(){
return this.value;
}
};
myObject.increment(10);
alert(myObject.value);
alert(myObject.getValue());
// 上面使用字面常量方式定義了一個myObject對象。但是value變量可以被外部對象訪問
var myObject = function(){
var value = 0;
return {
increment: function(inc){
value += typeof inc === 'number' ? inc : 1;
},
getValue : function(){
return value;
}
};
}();
myObject.increment(10);
alert(myObject.value); // 不能被外部對象訪問
alert(myObject.getValue()); // 10
// 漸變body的背景色（黃色到白色）
var fade = function(node){
var level = 1;
var step = function(){
var hex = level.toString(16);
node.style.backgroundColor = '#FFFF' + hex + hex;
if(level < 15){
level += 1;
setTimeout(step, 500); // 如果level小於15，則內部函數自我調用
}
};
setTimeout(step, 1); // 調用內部函數
};
fade(document.body);
// 下面是一個很糟糕的例子
<a href="#" name="test">點擊我...</a><br> // 點擊時顯示3
<a href="#" name="test">點擊我...</a><br> // 點擊時顯示3
<a href="#" name="test">點擊我...</a><br> // 點擊時顯示3
var add_the_handlers = function(nodes){
var i;
for(i = 0; i < nodes.length; i += 1) {
nodes[i].onclick = function(e){ // 函數構造時的：i
alert(i);
};
}
};
var objs = document.getElementsByName("test");
add_the_handlers(objs);
// 造成上面的原因是：a標簽的事件函數綁定了變量i，則不是函數在構造時的i值。
// 解決方案如下：
var add_the_handlers = function(nodes){
var i;
for(i = 0; i < nodes.length; i += 1) {
nodes[i].onclick = function(i){
return function(e){
alert(i); // 輸出的i是構造函數傳遞進來的i，不是事件處理綁定的i。
};
}(i);
}
};
var objs = document.getElementsByName("test");
add_the_handlers(objs);
11、回調（callbacks）
復制代碼 代碼如下:
// data表示參數，而call_function則表示回調函數
function sendRequest(data, call_function){
// setTimeout來模仿客戶端請求服務端中傳輸數據的時間。
// 當3秒鐘後就調用回調函數（有客戶端實現回調函數）
setTimeout(function(){
call_function(data); // 調用回調函數
}, 3000);
}
// 測試sendRequest函數
sendRequest("參數", function(context){
alert("context=" + context);
});
12、模塊
模塊是一個提供接口而隱藏狀態和實現的函數或對象。
一般形式：一個定義了私有變量和函數的函數；利用閉包創建可以訪問私有變量和函數的特權函數；最後返回這個特權函數，或者把他們保存到一個可以被訪問到的地方。
復制代碼 代碼如下:
Function.prototype.method = function(name,func){
this.prototype[name] = func;
return this;
};
String.method("deentityify",function(){
var entity = {
quot : '"',
lt : '<',
gt : '>'
};
return function(){
return this.replace(/&([^&;]+);/g, function(a, b){ // 怎樣知道a、b的值，了解正則表達式
var r = entity[b];
return typeof r === "string" ? r : a;
});
};
}());
alert("<">".deentityify()); // 測試：<">
注：模塊模式通常結合單例模式使用，JavaScript的單例模式就是用對象字面量方式創建的對象，對象的屬性值可以是數值或函數，並且屬性值在該對象的生命周期中不會發生變化。
13、級聯（鏈式操作）
對於一些不返回值的方法，我們返回this，而不是undefined，那麼我們就可以啟動以級聯（鏈式）去操作該對象。如下：
復制代碼 代碼如下:
var $ = function(id){
var obj = document.getElementById(id);
obj.setColor = function(color){
this.style.color = color;
return this;
};
obj.setBgColor = function(color){
this.style.backgroundColor = color;
return this; // 返回this對象，啟動級聯
};
obj.setFontSize = function(size){
this.style.fontSize = size;
return this;
};
return obj;
};
$("test").setColor("red")
.setFontSize("30px")
.setBgColor("blue");
// 改進後的代碼：
(function(id){
var _$ = function(id){
this.element = document.getElementById(id);
};
_$.prototype = {
setColor : function(color){
this.element.style.color = color;
return this;
},
setBgColor : function(color){
this.element.style.backgroundColor = color;
return this;
},
setFontSize : function(size){
this.element.style.fontSize = size;
return this;
}
};
// 添加到window原型鏈中
window.$ = function(id){
return new _$(id);
};
})();
$("test").setColor("red")
.setFontSize("30px")
.setBgColor("blue");
14、套用
所謂套用就是將函數與傳遞給它的參數相結合，產生一個新的函數。如：下面代碼中定義一個add()函數，該函數能夠返回一個新的函數，並把參數值傳遞給這個新函數，從而實現連加操作。
復制代碼 代碼如下:
// 第一種方式：
var add = function(a){
return function(b){
return a + b;
}
};
alert(add(1)(2)); // 3
// 第二種方式：用arguments實現
var add = function(){
var arg = arguments;
return function(){
var sum = 0;
for(var i=0; i<arg.length; i++){
sum += arg[i];
}
for(i=0; i<arguments.length; i++){
sum += arguments[i];
}
return sum;
}
};
alert(add(1,2,3)(4,5,6)); // 21
// 第三種方式：通過一個套用方法（curry）實現
var add = function(){
var sum = 0;
for(var i=0; i<arguments.length; i++){
sum += arguments[i];
}
return sum;
};
// 添加方法到Function的原型鏈上
Function.prototype.method = function(name, func){
this.prototype[name] = func;
return this;
};
// 套用方法
Function.method('curry', function(){
// 通過數組Array的slice方法，使得arguments也具有concat方法
var slice = Array.prototype.slice,
args = slice.apply(arguments), that = this;
return function(){
return that.apply(null, args.concat(slice.apply(arguments)));
};
});
alert(add.curry(1,2)(3,4)); // 10
15、記憶
函數可以用對象去記住先前操作的結果，從而能避免無謂的運算。這種優化被稱為記憶。
復制代碼 代碼如下:
var fibonacci = function(){
var mome = [0,1]; // 存放計算後的數據
var fib = function(n){
var result = mome[n];
// 如果不存在被計算過的數據，則直接計算。然後在將計算結果緩存
if(typeof result !== 'number'){
result = fib(n-1) + fib(n-2);
mome[n] = result;
}
return result;
};
return fib;
}();
for(var i=0; i<=10; i++){
document.writeln("// " + i + ": " + fibonacci(i) + "<br/>");
}
//==========================
// 創建一個具有記憶的函數
//==========================
var memoizer = function(memo, fundamental){
var shell = function(n){
var result = memo[n];
if(typeof result !== "number"){
result = fundamental(shell, n);
memo[n] = result;
}
return result;
};
return shell;
};
// 通過記憶函數memoizer完成斐波那契數列
var fibonacci = memoizer([0,1], function(shell, n){
return shell(n-1) + shell(n-2);
});
// 通過記憶函數memoizer完成階乘
var factorial = memoizer([1,1], function(shell, n){
return n * shell(n-1);
});
for(var i=0; i<=15; i++){
document.writeln("// " + i + ": " + factorial(i) + "<br/>");
}
小伙伴們看明白了沒，非常實用吧，如有遺漏的地方，還請大神們指點下，共同進步