正文

JavaScript 函数声明和变量声明

IP云
IP云V管理员/0 阅读
11/30
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

声明语句： 声明语句是用来 声明 或 定义 标识符（变量和函数名）并给其赋值。

1：var 变量声明（5.3.1节）：

var语句用来声明一个或多个变量： var name_1 = [= value_1] [ ,..., name_n [= value_n]] 

var i;

var j = 0;

var x=1, y=2;

var pi = 3.14,

f = function(x) {return x*x},

k = f(x);

2：遗漏声明（3.9节）

读取一个没有声明的变量的值：JavaScript会报错。

给一个未声明的变量赋值，（在非严格模式中）JavaScript实际上是给全局对象创建一个同名属性，这看起来像是JavaScript自动声明了一个全局变量。 

x  // => Uncaught ReferenceError: x is not defined *读取一个未声明的变量会报错

x=1  // 给一个未声明的变量赋值，等于创建一个全局变量

x  // => 1。

3：重复声明（3.9节）

使用var语句重复声明变量是合法且无害的。 

var v1 = 1

var v1 = 2  // 重复声明带有初始化器，这条语句就像是简单的赋值语句

v1  // => 2var v2 = 1;

var v2  // 重复声明语句不带初始化器，那就什么也不发生

v2  // y的结果是1

4：严格模式："use strict"语句（5.7.3节）

在JavaScript设计之初留下了许多被人诟病的问题，比如变量在声明之前就可以访问，比如给未声明的变量赋值，则这个变量会被定义为一个全局变量，这样会扰乱全局作用域的属性。

ECMAScript5定义了严格模式，严格模式是该语言的一个受限制的子集，它修正了语言的严重缺陷，并提供健壮的差错功能和增强的安全机制。

在严格模式中，给未声明的变量赋值会报错，在变量定义的代码之前读取该变量也会报错。

5：function：函数声明（5.3.2节）

关键字function用来定义函数。

  • 函数声明语句 
function f(x) { return x + 1; }
  • 函数定义表达式 
var f = function(x) { return x + 1; }

5.1：函数调用表达式(invocation expression)(4.5节）

函数调用表达式：以一个函数表达式开始，函数表达式后跟随一对圆括号，括号内是一个以逗号分割开的参数列表。 

f()

f(0)

Math.max(x,y,z)

5.2：函数声明表达式和函数声明语句(4.3节、5.1节）

函数定义表达式：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/function 

function [name]([param_1[, param_2[, ..., param_N]]]) {

  [statements]

};

函数声明语句：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function 

function name([param_1,[, param_2,[..., param_N]]]) {

  [statements]

}

函数声明语句和函数表达式语句几乎没有区别，唯一的区别是函数定义表达式的函数名(name)是可选的，JavaScript预编译把一段函数定义代码编译成表达式还是语句，主要看这段code出现的位置。

表达式(expression)：JavaScript解释器会将表达式计算(evaluate)出一个结果，如果没有赋值语句，则这个结果不会产生任何副作用。复杂的表达式由简单的表达式组合而成。语句(statement)：语句用来执行使某件事情发生，是会产生“副作用”的表达式。

语句： 直接使用符合函数声明语句的格式定义一个函数，则JS将函数编译为为函数声明语句。 

function f1(x) { return x*x; }  // 这条语句会产生一个副作用，就是定义了一个name为f1的函数。

f1;  // 输出f1，可以看到函数的值。（在JS中，函数也是一个值）

f1(3);  // =>9 当然，你可以用函数调用表达式调用这个函数，输出结果是9

表达式：

  1. 出现在等号左边的函数定义，JavaScript通常会编译为函数定义表达式。 
var f2 = function(x){ return x*x; }  // 这个函数定义会被编译为函数定义表达式，计算出的结果再赋值到变量f2。

f2;  // 输出f2，可以看到函数的值。（在JS中，函数也是一个值）
  1. 出现在括号里的函数定义，JavaScript通常会编译为函数定义表达式： 
[1,2,3].map(function(x){ return x*x })  // 定义一个匿名函数

(function(){return 1}())  // 定义一个立即调用函数

(function(){return 1})()  // 同上

这也就是为什么立即调用函数一定要用括号括起来的原因，如果没有括号，js预编译会把它当作一个函数声明语句

  1. 出现在方括号里的函数定义，JavaScript通常会编译为函数定义表达式： 
[function(){return 1;}]
  1. 箭头函数表达式：箭头函数 表达式 的语法比 函数表达式 更短。

表达式计算出一个值，在JavaScript中，函数就是一个值，可以被赋值可以被传递，但表达式不会对程序产生副作用 

var f4 = function ff(x){ return x*x; }; ff;  // =>undefined *因为表达式不产生副作用，没有名为ff函数，如果调用ff()，会报错

(function  ff(){return 1})(); ff;  // 同上

[function ff(){return 1;}]; ff;  // 同上

5.3：避免js引起错误编译， ( [ + - / 前加分号

上面有4种情况：等于号、圆括号、方括号，箭头函数会被认为是表达式。

一条语句如果以这些符号开头，那么js编译器会把他们当作表达式来解析，那么就会产生问题，因为JS一条句子结束可以不加分号，而这里表达式并不是一句语句，所以这个表达式会和前面（没有分号的句子）表达式合并成一条语句。

比如在任意一条语句后面定义匿名函数，都会报错。 

var a = 1

(function(){ console.log('hello world') })()

// => Error: 1 is not a function

这是因为匿名函数这里被当作表达式解析，但表达式不是一条语句，所以会和前面的内容合并成一条语句。如果以 [ 也同理。当然我们不会以等于号开头以及箭头函数开头。所以要格外注意以 ( 和 [ 开头的句子。解决办法就是在 ( 前面加一上分号。当然，很多都会每一行结尾加分号，这也能避免这种麻烦。 

var a = 1

;(function(){ console.log('hello world') })()

类似的情况还有加号 + 、减号 - 、正则的起始符 / ，所以遇到 ( [ + - / 这5个符号开头的句子，要注意让编译器知道这些表达式不属于前面的语句。

也就是如果你是一个不喜欢加分号的程序员，那就要在这5个符号开头的句子前加上分号，或者避免以这5个符号开头。

6：声明提前(hoisting)（3.10.1节）

JavaScript引擎在“预编译”会把var声明语句会和函数声明语句提前至函数顶部，这就意味着整个作用域内都可以该变量。但var声明语句的初始化代码不会被提升到函数顶部，所以在初始化代码之前访问变量，则变量的值为undefined，声明代码之前给变量赋值，则是一条正常的赋值语句。 

console.log(v3)  // 声明被提前，但在初始化之前访问，不会报错，结果未undefined

var v3 = 1  // “预编译”已经将声明提前，“解释器”运行到此是初始化变量

console.log(v3)  // 在初始化之后访问v3，结果是

在变量声明代码之前给变量赋值，是一条正常的赋值语句，并不是遗漏声明，因为代码声明已经被提至函数顶部。 

function f(){

  a = 1  // 预编译在代码解释之前完成，当解释器解释到这条赋值语句的时候，预编译已经声明变量a，所以这是一条正常的赋值语句

  var a  // 声明是预编译完成的，并不是js解释器完成的

}f();

a  // => a is not defined 因为a=1并不是遗漏声明，所以没有创建全局变量

注意：在声明变量的代码之前调用变量是没有任何问题，而给遗漏声明的变量赋值JS会自动创建一个全局变量，但是访问为声明的变量会报错。console.log(v4); // Uncaught ReferenceError: v4 is not defined

作用域链 上找不到对象时会报错，原型链上找不到属性是返回undfined，不报错。 

f1()  // 函数声明也被提前，在定义函数之前就可以调用函数f1

function f1(){return 1;}

function f2(){return ff; function ff(){return 100;}}

f2()()  // ff的声明被提前，所以返回的ff是一个函数对象

函数声明语句会提前，而函数定义语句不会提前。这就比较有趣了，var变量声明会被提前，但函数定义要到初始化表达式的时候，才会定义。 

f3  // 和函数声明语句截然相反，函数表达式的定义并没有提升，f3的值是undefined，

var f3 = function() {return 1;}  // 用函数定义表达式定义一个函数。

function f4(){return ff; var ff = function (){return 100;}}

f4()  // ff声明提前，但表达式定义没有提前，所以返回的ff是一个undefined

@@@在ES2015之前，申明变量都用var，var只有函数作用域和局部作用域，没有块作用域，在ES2015开始，有let和const

相关阅读

目录[+]