在JavaScript中方法由两部分组成： 方法名和方法体。 JavaScript中的方法跟其他传统面向对象语言不同,它跟普通的变量没有区别,唯一不同点是它是Function对象,因此它会有一些Function类的属性及方法。
方法的定义
- 声明式 使用声明的方式定义的方法会在程序的预执行阶段进行解析*,因此该定义可以放在程序中的任何地方,都会被正确加载, 执行。
- 叙述式 使用叙述式定义的方法必须当他们被执行后才能被调用。
- 构造方法 通过构造方法定义的方法,因调用的时候,总是解析方法体字符串,因此效率低,不推荐使用。
- eval 通过元编程定义方法
// 声明式
square(4); //可以执行,结果为16
function square(number) {
return number * number;
}
// 叙述式
var square = function(number) {return number * number;};
square(4); //16
通过叙述式定义方法时,可以指定方法的名称,该方法名只能在方法内部进行调用。
// 叙述式, 指定范围内的函数名称
// factorial为函数变量, fac为范围内的函数名称,只能在内部进行使用。
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 是像数组的一个对象,它有length方法,返回参数个数,也可以像数组,使用下标进行访问。
- arguments.callee 方法本身 已废弃
- arguments.callee.caller 调用的函数
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函数
}
a();
// 像数组一样使用arguments
var args = [].join.call(arguments, ':');
// arguments转换为数组
var args = [].slice.call(arguments)
属性
- Function.length 参数个数
- Function.prototype 方法原型
- Function.arguments: 废弃,注意与 arguments对象 的区别
- Function.caller: 非标准
- Function.displayName: 非标准
- Function.name: 无法在产品模式中使用
方法
- Function.prototype.apply() 在指定的上下文对象和参数下调用方法,立即生效,参数为(context, args[])
- Function.prototype.call() 在指定的上下文对象和参数下调用方法,立即生效,参数为(context, args1[,args2[,args3]])
- Function.prototype.bind() 绑定指定参数的方法到指定的对象,需要时再进行调用。参数为(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 特性 了解就行
- 参数 Default
function multiply(a, b = 1) {
return a*b;
}
multiply(5); // 5
- 参数 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",
"Beryllium"
];
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
