关于javascript:js学习笔记7函数

函数申明的两种办法

• function 命令申明。function命令前面是函数名，函数名前面是一对圆括号，外面是传入函数的参数。函数体放在大括号外面。

function print(s) {console.log(s);
}

• 变量赋值写法。采纳函数表达式申明函数时，function命令前面个别不带有函数名。如果加上函数名，该函数名只在函数体外部无效，在函数体内部有效。

var print = function x(){console.log(typeof x);
};

x
// ReferenceError: x is not defined

print()
// function

然而，咱们在函数表达式中，往往会退出这个函数名 x。尽管这个 x 只在函数体外部可用，指代函数表达式自身，其余中央都不可用。然而这种写法有两个益处：（1）能够在函数体外部调用本身，不便递归；（2）不便除错（除错工具显示函数调用栈时，将显示函数名，而不再显示这里是一个匿名函数）

• function 命令申明，尾部不须要加分号；函数表达式尾部要加分号

函数的反复申明

若一个函数被屡次申明，后边的申明会笼罩前边的申明（这里要留神的是，因为函数名的晋升，前一次申明在任何时候都是有效的，并不是在第二次申明前还无效，而是全副笼罩）

function f() {console.log(1);
}
f() // 2

function f() {console.log(2);
}
f() // 2

第一等公民

• js 将函数看作一种值，与其余值（数值、字符串、布尔值）位置雷同，但凡能够应用值的中央，就能应用函数。例如把函数赋值给变量和对象的属性，当做参数传入其余函数，作为函数后果返回等。函数只是一个能够执行的值，此外并无非凡之处。

因为函数与其它数据类型位置平等，所以 js 中又称函数为第一等公民。

function add(x, y) {return x + y;}

// 将函数赋值给一个变量
var operator = add;

// 将函数作为参数和返回值
function a(op){return op;}
a(add)(1, 1)
// 2

函数名的晋升

因为 js 引擎将函数名视同变量名，所以也遵循变量申明的准则，会被晋升到代码头部

因而，此代码不报错

f();

function f() {}

然而，若采纳赋值语句定义函数，就会产生谬误。这与变量名申明提前相似，只是将函数申明提前，而没有将函数的赋值提前

f();
var f = function (){};
// TypeError: undefined is not a function

var f;
f();
f = function () {};

再看下这个例子

var f = function () {console.log('1');
}

function f() {console.log('2');
}

f() // 1

先 var f，而后第二个函数申明笼罩了第一个函数申明，接着第一个函数的赋值笼罩了第二个函数的申明，最初还是第一个函数的赋值

函数的属性和办法

• name 属性返回函数的名字

当变量赋值定义函数时，若为匿名函数，返回变量名；若有具体函数名，返回 function 后的函数名

var f3 = function myName() {};
f3.name // 'myName'

name 属性的重要作用，就是获取传入的函数参数的函数名

var myFunc = function () {};

function test(f) {console.log(f.name);
}

test(myFunc) // myFunc

• length 属性返回函数预期传入的参数个数。提供了一种机制，判断定义时和调用时参数的差别，以便实现面向对象编程的“办法重载”（overload）。
• toString（）办法返回一个字符串，内容是函数的源码。值得注意的是，当函数为原生函数时，返回function (){[native code]}；能够返回函数外部正文，并且能够借助这一点变相实现多行字符

var multiline = function (fn) {var arr = fn.toString().split('\n');
  return arr.slice(1, arr.length - 1).join('\n');
};

function f() {/*
  这是一个
  多行正文
*/}

multiline(f);
// " 这是一个
//   多行正文 "

函数作用域

概述

js 只有两种作用域：（1）全局作用域：在函数内部申明；（2）函数作用域：在函数外部定义，内部无奈读取

值得注意的是，函数外部定义的变量，会在该作用域笼罩掉同名全局变量

另外，只有在函数外部申明的才是局部变量，在其余区块中申明，只管和函数一样都有区块，一律是全局变量

函数外部的变量晋升

与全局作用域一样，函数作用域外部也会产生“变量晋升”景象。var命令申明的变量，不论在什么地位，变量申明都会被晋升到函数体的头部。

function foo(x) {if (x > 100) {var tmp = x - 100;}
}

// 等同于
function foo(x) {
  var tmp;
  if (x > 100) {tmp = x - 100;};
}

函数自身的作用域

在 js 中，函数是一等公民，与值雷同，因而也有本人的作用域，其作用域与变量一样，就是其申明时所在的作用域，与运行时所在的作用域无关。

var a = 1;
var x = function () {console.log(a);
};

function f() {
  var a = 2;
  x();}

f() // 1

下面代码中，函数 x 是在函数 f 的内部申明的，所以它的作用域绑定外层，外部变量 a 不会到函数 f 体内取值，所以输入1，而不是2。

总之，函数执行时所在的作用域，是定义时的作用域，而不是调用时所在的作用域。

很容易犯错的一点是，如果函数 A 调用函数 B，却没思考到函数B 不会援用函数 A 的外部变量。

var x = function () {console.log(a);
};

function y(f) {
  var a = 2;
  f();}

y(x)
// ReferenceError: a is not defined

下面代码将函数 x 作为参数，传入函数 y。然而，函数x 是在函数 y 体外申明的，作用域绑定外层，因而找不到函数 y 的外部变量a，导致报错。

同样的，函数体外部申明的函数，作用域绑定函数体外部。

function foo() {
  var x = 1;
  function bar() {console.log(x);
  }
  return bar;
}

var x = 2;
var f = foo();
f() // 1

下面代码中，函数 foo 外部申明了一个函数 bar，bar 的作用域绑定 foo。当咱们在foo 内部取出 bar 执行时，变量 x 指向的是 foo 外部的 x，而不是foo 内部的x。正是这种机制，形成了下文要解说的“闭包”景象。

参数

首先留神，参数是能够省略的。无论函数定义时定义了多少参数，然而运行时提供多少参数甚至不提供参数，js 都不会报错。省略的参数的值就变为 undefined。须要留神的是，函数的length 属性与理论传入的参数个数无关，只反映函数预期传入的参数个数。

function f(a, b) {return a;}

f(1, 2, 3) // 1
f(1) // 1
f() // undefined

f.length // 2

然而，没有方法只省略靠前的参数，而保留靠后的参数。如果肯定要省略靠前的参数，只有显式传入undefined。

function f(a, b) {return a;}

f(, 1) // SyntaxError: Unexpected token ,(…)
f(undefined, 1) // undefined

下面代码中，如果省略第一个参数，就会报错

传递形式

• 若参数是原始类型的值（数值、字符串、布尔值），那么传递形式是传值传递。行将值拷贝到函数中进行操作。这时在函数体内批改参数值，不会影响到函数内部的原始值

var p = 2;

function f(p) {p = 3;}
f(p);

p // 2

• 然而，若参数是复合类型的值（数组、对象、其余函数），那么传入形式是传址传递。行将参数的地址传到函数中进行操作，这时在函数外部批改参数，将会影响到原始值。

var obj = {p: 1};

function f(o) {o.p = 2;}
f(obj);

obj.p // 2

同名参数

若有同名的参数，则取最初呈现的那个值，即便后边的参数没有值或者被省略，也是以其为准

function f(a, a) {console.log(a);
}

f(1) // undefined

这时，若要取得第一个 a 的值，能够应用 arguments 对象

function f(a, a) {console.log(arguments[0]);
}

f(1) // 1

arguments 对象

arguments 对象蕴含了函数运行时的所有参数，arguments[0]就是第一个参数，arguments[1]就是第二个参数，以此类推。这个对象只有在函数体外部，才能够应用。

var f = function (one) {console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
}

f(1, 2, 3)
// 1
// 2
// 3

个别状况下，arguments 对象能够在运行时批改，例如，函数 f() 调用时传入的参数，在函数外部被批改成 3 和2。

var f = function(a, b) {arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 5

然而若应用严格模式，批改 arguments 对象就不会影响到理论的函数参数。

var f = function(a, b) {
  'use strict'; // 开启严格模式
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 2

通过 arguments 对象的 length 属性，能够判断函数调用时到底带几个参数。

function f() {return arguments.length;}

f(1, 2, 3) // 3
f(1) // 1
f() // 0

与数组的关系

值得注意的是，尽管 arguments 很像数组，但它是一个对象。数组专有的办法（比方 slice 和forEach），不能在 arguments 对象上间接应用。

如果要让 arguments 对象应用数组办法，真正的解决办法是将 arguments 转为真正的数组。上面是两种罕用的转换方法：slice办法和逐个填入新数组。

var args = Array.prototype.slice.call(arguments);

// 或者
var args = [];
for (var i = 0; i < arguments.length; i++) {args.push(arguments[i]);
}

闭包

js 语言特有链式作用域构造，子对象会一级一级的向上寻找所有父对象的变量。即所有父对象的变量对子对象都是可见的，然而子对象的变量对父对象不可见（老父亲了）

例如，函数外部能够间接读取全局变量，函数内部却无奈读取函数外部的变量；F2 能够读取 F1 的变量，F1 却不能读取 F2 的变量

function f1() {
  var n = 999;
  function f2() {console.log(n); // 999
  }
}

下边咱们思考一个问题，原本 f1 内部是读取不到 f1 的变量的，然而 f2 能够读取到父对象 f1 的变量，若咱们把 f2 作为返回值，不就能够在 f1 内部读取 f1 的外部变量了吗！

function f1() {
  var n = 999;
  function f2() {console.log(n);
  }
  return f2;
}

var result = f1();
result(); // 999

这就是闭包的概念，简略来说，闭包就是定义在函数外部的函数，可能读取父函数外部变量的 f2. 实质上讲，闭包可能记住诞生的环境，是将函数外部和函数内部链接起来的一座桥梁

闭包的作用

• 读取函数外部的变量
• 使得诞生环境始终存在，使函数外部变量始终保留在内存中。如下，闭包使得外部变量记住上一次调用时的运算后果。

start是函数 createIncrementor 的外部变量。通过闭包，start的状态被保留了，每一次调用都是在上一次调用的根底上进行计算。从中能够看到，闭包 inc 使得函数 createIncrementor 的外部环境，始终存在。所以，闭包能够看作是函数外部作用域的一个接口。

为什么会这样呢？起因就在于 inc 始终在内存中，而 inc 的存在依赖于createIncrementor，因而也始终在内存中，不会在调用完结后，被垃圾回收机制回收。

function createIncrementor(start) {return function () {return start++;};
}

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7

• 封装对象的公有属性和公有办法

function Person(name) {
  var _age;
  function setAge(n) {_age = n;}
  function getAge() {return _age;}

  return {
    name: name,
    getAge: getAge,
    setAge: setAge
  };
}

var p1 = Person('张三');
p1.setAge(25);
p1.getAge() // 25

下面代码中，函数 Person 的外部变量 _age，通过闭包getAge 和setAge，变成了返回对象 p1 的公有变量。

• 留神，外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的外部变量，所以内存耗费很大。因而不能滥用闭包，否则会造成网页的性能问题。

IIFE：立刻调用的函数表达式

在 js 中，圆括号 () 是一种运算符，跟在函数名之后，示意调用该函数。比方，print()就示意调用 print 函数。

然而，当咱们在定义函数后立刻调用函数时，不能定义后加括号，否则会产生语法错误。这是因为 function 即能够当做语句，也能够当做表达式，而 js 引擎规定，若 function 呈现在句首，一律解释为语句。所以，JavaScript 引擎看到行首是 function 关键字之后，认为这一段都是函数的定义，不应该以圆括号结尾，所以就报错了。

// 语句
function f() {}

// 表达式
var f = function f() {}

解决办法也很简略，就是将函数放到一个圆括号里。这就是 IIFE（立刻调用的函数表达式）

值得注意的是，最初的分号是必须的，否则会报错

(function(){/* code */}());
// 或者
(function(){/* code */})();

作用

通常状况下，只对匿名函数应用这种“立刻执行的函数表达式”。它的目标有两个：一是不用为函数命名，防止了净化全局变量；二是 IIFE 外部造成了一个独自的作用域，能够封装一些内部无奈读取的公有变量。

// 写法一
var tmp = newData;
processData(tmp);
storeData(tmp);

// 写法二
(function () {
  var tmp = newData;
  processData(tmp);
  storeData(tmp);
}());

下面代码中，写法二比写法一更好，因为完全避免了净化全局变量。

eval 命令

eval命令承受一个字符串作为参数，并将这个字符串当作语句执行。

eval('var a = 1;');
a // 1

如果参数字符串无奈当作语句运行，那么就会报错。

eval('3x') // Uncaught SyntaxError: Invalid or unexpected token

放在 eval 中的字符串，应该有单独存在的意义，不能用来与 eval 以外的命令配合应用。举例来说，上面的代码将会报错。

eval('return;'); // Uncaught SyntaxError: Illegal return statement

下面代码会报错，因为 return 不能独自应用，必须在函数中应用。

如果 eval 的参数不是字符串，那么会原样返回。

eval(123) // 123

eval没有本人的作用域，都在以后作用域内执行，因而可能会批改以后作用域的变量的值，造成平安问题。

var a = 1;
eval('a = 2');

a // 2

下面代码中，eval命令批改了内部变量 a 的值。因为这个起因，eval有平安危险。

为了避免这种危险，JavaScript 规定，如果应用严格模式，eval外部申明的变量，不会影响到内部作用域。

(function f() {
  'use strict';
  eval('var foo = 123');
  console.log(foo);  // ReferenceError: foo is not defined
})()

下面代码中，函数 f 外部是严格模式，这时 eval 外部申明的 foo 变量，就不会影响到内部。

不过，即便在严格模式下，eval仍然能够读写以后作用域的变量。

(function f() {
  'use strict';
  var foo = 1;
  eval('foo = 2');
  console.log(foo);  // 2
})()

下面代码中，严格模式下，eval外部还是改写了内部变量，可见平安危险仍然存在。

总之，eval的实质是在以后作用域之中，注入代码。因为平安危险和不利于 JavaScript 引擎优化执行速度，所以个别不举荐应用。通常状况下，eval最常见的场合是解析 JSON 数据的字符串，不过正确的做法应该是应用原生的 JSON.parse 办法。

eval 的别名调用

后面说过 eval 不利于引擎优化执行速度。更麻烦的是，还有上面这种状况，引擎在动态代码剖析的阶段，根本无法分辨执行的是eval。

var m = eval;
m('var x = 1');
x // 1

下面代码中，变量 m 是eval的别名。动态代码分析阶段，引擎分辨不出 m('var x = 1') 执行的是 eval 命令。

为了保障 eval 的别名不影响代码优化，JavaScript 的标准规定，但凡应用别名执行 eval，eval 外部一律是全局作用域。

var a = 1;

function f() {
  var a = 2;
  var e = eval;
  e('console.log(a)');
}

f() // 1

下面代码中，eval是别名调用，所以即便它是在函数中，它的作用域还是全局作用域，因而输入的 a 为全局变量。这样的话，引擎就能确认 e() 不会对以后的函数作用域产生影响，优化的时候就能够把这一行排除掉。

eval的别名调用的模式形形色色，只有不是间接调用，都属于别名调用，因为引擎只能分辨 eval() 这一种模式是间接调用。

eval.call(null, '...')
window.eval('...')
(1, eval)('...')
(eval, eval)('...')

下面这些模式都是 eval 的别名调用，作用域都是全局作用域。