javaScript笔记 Function

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

方法的定义

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

// 声明式square(4); //可以执行,结果为16function 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); //3628800fac(5); //ReferenceError: fac is not defined

// 构造方法var sum = new Function("num1", "num2", "return num1 + num2;");sum(4,5); //9

// evaleval('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还存在,结果为8result1 = 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);      // nullb();}function b() {console.log("b function run");console.log(typeof arguments.callee.caller);      // a函数}a();

// 像数组一样使用argumentsvar 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() 非标准

// applyvar 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

// callvar 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

// bindvar 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]

参考资料

MDNMDN ReferenceJavaScript Info: Function expressionsJavaScript Info: Function arguments