JavaScript笔记 Function

在JavaScript中方法由两部分组成： 方法名和方法体。 JavaScript中的方法跟其他传统面向对象语言不同,它跟普通的变量没有区别,唯一不同点是它是Function对象,因此它会有一些Function类的属性及方法。

方法的定义

1. 声明式 使用声明的方式定义的方法会在程序的预执行阶段进行解析*,因此该定义可以放在程序中的任何地方,都会被正确加载, 执行。
2. 叙述式 使用叙述式定义的方法必须当他们被执行后才能被调用。
3. 构造方法 通过构造方法定义的方法,因调用的时候,总是解析方法体字符串,因此效率低,不推荐使用。
4. 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

方法的调用

1. 方法名称
2. arguments.callee 在 ES5 strict模式中禁止被使用
3. 作用范围内的变量 //上例中的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 对象

1. arguments 是像数组的一个对象,它有length方法,返回参数个数,也可以像数组,使用下标进行访问。
2. arguments.callee 方法本身 已废弃
3. 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)

属性

1. Function.length 参数个数
2. Function.prototype 方法原型
3. Function.arguments: 废弃,注意与 arguments对象 的区别
4. Function.caller: 非标准
5. Function.displayName: 非标准
6. Function.name: 无法在产品模式中使用

方法

1. Function.prototype.apply() 在指定的上下文对象和参数下调用方法,立即生效,参数为(context, args[])
2. Function.prototype.call() 在指定的上下文对象和参数下调用方法,立即生效,参数为(context, args1[,args2[,args3]])
3. Function.prototype.bind() 绑定指定参数的方法到指定的对象,需要时再进行调用。参数为(context, args1[,args2[,args3]])
4. Function.prototype.toString() 生成对象的源代码
5. Function.prototype.isGenerator() 非标准
6. 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",
  "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