JavaScript 函数声明和变量声明
声明语句:声明语句是用来声明或定义标识符(变量和函数名)并给其赋值。
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
表达式:
- 出现在等号左边的函数定义,JavaScript通常会编译为函数定义表达式。
var f2 = function(x){ return x*x; } // 这个函数定义会被编译为函数定义表达式,计算出的结果再赋值到变量f2。
f2; // 输出f2,可以看到函数的值。(在JS中,函数也是一个值)
- 出现在括号里的函数定义,JavaScript通常会编译为函数定义表达式:
[1,2,3].map(function(x){ return x*x }) // 定义一个匿名函数
(function(){return 1}()) // 定义一个立即调用函数
(function(){return 1})() // 同上
这也就是为什么立即调用函数一定要用括号括起来的原因,如果没有括号,js预编译会把它当作一个函数声明语句
- 出现在方括号里的函数定义,JavaScript通常会编译为函数定义表达式:
[function(){return 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