JavaScript：函数

Posted 2020-12-18 qianmo39

函数声明方式

• function 命令

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

• 函数表达式

  var f = function(x, y) {
  return x + y;
  }
  

• Function构造函数

  var f = new Function(‘x‘, ‘y‘, ‘return x + y‘);
  

• 箭头函数

  var f = (x, y) => { return x + y; }
  

函数声明提升

javascript 引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。

hoisted(); // "foo"

function hoisted() {
    console.log("foo");
}

// 等同于
function hoisted() {
    console.log("foo");
}

hoisted(); // "foo"

但是，如果采用赋值语句定义函数，JavaScript 就会报错。

hoisted(); // TypeError: hoisted is not a function

var hoisted = function () {
    console.log("foo");
}

// 等同于
var = hoisted;

hoisted(); // TypeError: hoisted is not a function
hoisted = function () {
    console.log("foo");
}

函数作用域

定义

JavaScript 只有两种作用域：一种是全局作用域，变量在整个程序中一直存在，所有地方都可以读取；另一种是函数作用域，变量只在函数内部存在。

对于顶层函数来说，函数外部声明的变量就是全局变量（global variable），它可以在函数内部读取。

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

f(); // 1

在函数内部定义的变量，外部无法读取，称为“局部变量”（local variable）。

function f() {
    var a = 1;
}

console.log(a); // ReferenceError: a is not defined

函数内部变量提升

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

f() // undefined

// 等同于
function f() {
    var a;
    console.log(a);
    a = 1;
}

f() // undefined

参考资料

• https://wangdoc.com/javascript/types/function.html
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function