在JavaScript中方法由兩部分組成： 方法名和方法體忍啸。 JavaScript中的方法跟其他傳統(tǒng)面向對象語言不同,它跟普通的變量沒有區(qū)別,唯一不同點是它是Function對象,因此它會有一些Function類的屬性及方法驾诈。
方法的定義
- 聲明式 使用聲明的方式定義的方法會在程序的預執(zhí)行階段進行解析*,因此該定義可以放在程序中的任何地方,都會被正確加載, 執(zhí)行。
- 敘述式 使用敘述式定義的方法必須當他們被執(zhí)行后才能被調用荆几。
- 構造方法 通過構造方法定義的方法,因調用的時候,總是解析方法體字符串,因此效率低,不推薦使用。
- eval 通過元編程定義方法
// 聲明式
square(4); //可以執(zhí)行,結果為16
function square(number) {
return number * number;
}
// 敘述式
var square = function(number) {return number * number;};
square(4); //16
通過敘述式定義方法時,可以指定方法的名稱,該方法名只能在方法內部進行調用鹅心。
// 敘述式, 指定范圍內的函數(shù)名稱
// factorial為函數(shù)變量, fac為范圍內的函數(shù)名稱,只能在內部進行使用锅移。
var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) };
factorial(10); //3628800
fac(5); //ReferenceError: fac is not defined
// 構造方法
var sum = new Function("num1", "num2", "return num1 + num2;");
sum(4,5); //9
// eval
eval('function sum(num1, num2) {return num1 + num2;}');
sum(4,5); //9
方法的調用
- 方法名稱
- arguments.callee 在 ES5 strict模式中禁止被使用
- 作用范圍內的變量 //上例中的fac
閉包
簡單來說閉包是方法內再一次定義方法,內部方法可以訪問到外部方法的任何變量,并且在內部方法中使用到的變量的生命周期比外部方法長一些熔掺。
var pet = function(name) { // 外部方法定義 name 變量
var getName = function() {
return name; // 內部方法使用了外部方法的 name 變量
}
return getName; // 返回內部方法,結果在外界可以調用到內部方法。
},
myPet = pet("Vivie");
myPet(); // Vivie
function outside(x) {
function inside(y) {
return x + y;
}
return inside;
}
fn_inside = outside(3); // 調用了外部方法,傳遞的x為3,并且返回內部方法
result = fn_inside(5); // 調用內部方法,傳遞y為5, 但因之前傳遞的x還存在,結果為8
result1 = outside(3)(5); // 8
方法內部 arguments 對象
- arguments 是像數(shù)組的一個對象,它有l(wèi)ength方法,返回參數(shù)個數(shù),也可以像數(shù)組,使用下標進行訪問非剃。
- arguments.callee 方法本身 已廢棄
- arguments.callee.caller 調用的函數(shù)
function a() {
console.log("a function run");
console.log(arguments.callee.caller); // null
b();
}
function b() {
console.log("b function run");
console.log(typeof arguments.callee.caller); // a函數(shù)
}
a();
// 像數(shù)組一樣使用arguments
var args = [].join.call(arguments, ':');
// arguments轉換為數(shù)組
var args = [].slice.call(arguments)
屬性
- Function.length 參數(shù)個數(shù)
- Function.prototype 方法原型
- Function.arguments: 廢棄,注意與 arguments對象 的區(qū)別
- Function.caller: 非標準
- Function.displayName: 非標準
- Function.name: 無法在產(chǎn)品模式中使用
方法
- Function.prototype.apply() 在指定的上下文對象和參數(shù)下調用方法,立即生效,參數(shù)為(context, args[])
- Function.prototype.call() 在指定的上下文對象和參數(shù)下調用方法,立即生效,參數(shù)為(context, args1[,args2[,args3]])
- Function.prototype.bind() 綁定指定參數(shù)的方法到指定的對象,需要時再進行調用置逻。參數(shù)為(context, args1[,args2[,args3]])
- Function.prototype.toString() 生成對象的源代碼
- Function.prototype.isGenerator() 非標準
- Function.prototype.toSource() 非標準
// apply
var a = {x:"AAA"};
function test() {
var result = "";
result += this.x;
for(var i=0; i<arguments.length; i++) {
result += arguments[i];
}
console.log(result);
}
test.apply(a, [1,2,3,4]); // AAA1234
// call
var a = {x:"AAA"};
function test() {
var result = "";
result += this.x;
for(var i=0; i<arguments.length; i++) {
result += arguments[i];
}
console.log(result);
}
test.call(a, 1,2,3,4); // AAA1234
// bind
var a = {x:"AAA"};
function test() {
var result = "";
result += this.x;
for(var i=0; i<arguments.length; i++) {
result += arguments[i];
}
console.log(result);
}
var bindFunc = test.bind(a, 1,2,3,4);
bindFunc(); // AAA1234
ES6 特性 了解就行
- 參數(shù) Default
function multiply(a, b = 1) {
return a*b;
}
multiply(5); // 5
- 參數(shù) Rest
function multiply(multiplier, ...theArgs) {
return theArgs.map(x => multiplier * x);
}
var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]
- 箭頭方法
var a = [
"Hydrogen",
"Helium",
"Lithium",
"Beryl-lium"
];
var a2 = a.map(function(s){ return s.length }); // [8, 6, 7, 10]
var a3 = a.map( s => s.length ); // [8, 6, 7, 10]
參考資料
MDN
MDN Reference
JavaScript Info: Function expressions
JavaScript Info: Function arguments
