关于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的别名调用，作用域都是全局作用域。

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

函数申明的两种办法

函数的反复申明

第一等公民

函数名的晋升

函数的属性和办法

函数作用域

概述

函数外部的变量晋升

函数自身的作用域

参数

传递形式

同名参数

arguments对象

与数组的关系

闭包

闭包的作用

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

作用

eval命令

eval 的别名调用

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

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

函数申明的两种办法

函数的反复申明

第一等公民

函数名的晋升

函数的属性和办法

函数作用域

概述

函数外部的变量晋升

函数自身的作用域

参数

传递形式

同名参数

arguments对象

与数组的关系

闭包

闭包的作用

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

作用

eval命令

eval 的别名调用

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复