函数和作用域是JavaScript的重要组成部分,我们在使用JavaScript编写程序的过程中经常要用到这两部分内容,作为初学者,我经常有困惑,借助写此博文来巩固下之前学习的内容。
(一)JavaScript函数
JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其他语句调用以执行函数包含的代码语句。
1.JavaScript创建函数的方法有两种:
- 函数声明:
function funcDeclaration(){ return 'A is a function'; }
- 函数表达式:
var funExpression=function(){ return 'A is a function '; }
上述函数声明和函数表达式的区别(注明:翻译自:不同的方式来写一个函数)在:
JavaScript解析器中存在一种变量声明被提升(hosting)的机制,也就是说变量(函数)的声明会被提升到作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。
例如以下代码段:
alert(foo); // function foo() {}
alert(bar); // undefined
function foo() {}
var bar = function bar_fn() {};
alert(foo); // function foo() {}
alert(bar); // function bar_fn() {}
输出结果分别是function foo() {}
、undefined
、function foo() {}
和function bar_fn() {}
。
可以看到foo
的声明写在alert之后,仍然可以被正确调用,因为JavaScript解释器会将其提升到alert前面,而以函数表达式创建的函数bar
则不享受此待遇。
所以,JavaScript 引擎执行以上代码的顺序可能是这样的:
- 创建变量
foo
和bar
,并将它们都赋值为undefined
。 - 创建函数
foo
的函数体,并将其赋值给变量foo
。 - 执行前面的两个 alert。
- 创建函数
bar_fn
,并将其赋值给bar
。 - 执行后面的两个 alert。
2.函数的参数
在调用函数时,你可以向其传递值,这些值被称为参数。
function printName(name){
console.log(name);
}
printName('Byron');
printName('Casper);
其中name是形参,'Byron'和'Casper'是实参。
说到函数的参数,我们不得不提到arguments。此处涉及的内容有点多,请看客们参考楼主之前转载的javascript arguments。
3.函数重载
重载是很多面向对象语言实现多态性的手段之一,在静态语言中确定一个函数的手段是靠方法签名--函数名+参数列表,也就是说相同名字的函数参数个数不同或者顺序不同都被认为是不同的函数,成为函数重载。
在JavaScript中没有函数重载的概念,函数通过名字确定唯一性,参数不同也被认为是相同的函数,后面的覆盖前面的。
4.返回值
有时候我们希望在函数执行后给我们一个反馈,就像表达式一样,给我们个结果,我们可以通过return
来实现
function fn(a, b){
a++;
b++;
return a + b;
}
var result = fn(2, 3);
conslole.log(result);
这样我们就能拿到函数希望给我们的反馈了,调用return后,函数立即终端并返回结果,即使后面还有语句也不在执行。其实我们不写return语句,函数也会默认给我们返回undefined
5.命名冲突
当在同一个作用域内定义了名字相同的变量和方法的话,无论其顺序如何,变量的赋值会覆盖方法的赋值。
var fn = 3;
function fn(){}
console.log(fn); // 3
当函数执行有命名冲突的时候,函数执行时载入顺序是 变量、函数、参数
,典型例子如下:
function fn(fn){
console.log(fn);
var fn = 3;
console.log(fn);
}
fn(10); 输出结果为:10 3
(二)函数作用域
在JavaScript中,变量的作用域有全局作用域和局部作用域两种。
说到这里,我们不得不提下JavaScript中的作用域链。
在JavaScript中,函数也是对象,实际上,JavaScript里面一切都是对象。函数对象和其他对象一样。
JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里。 ----JavaScript权威指南
JavaScript的作用域的是实现和C/C++不同,并非用“堆栈”方式,而是使用列表,具体过程如下(EMA262中所述):
任何执行上下文时的作用域,都是由作用域链(scope chain)来实现的;
在一个函数被定义的时候,会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性;
在一个函数对象被调用的时候,会创建一个活动对象(也就是一个对象),然后对于每一个函数的形参,都命名为该活动对象的命名属性,然后将这个活动对象做为此时的作用域链(scope chain)最前端,并将这个函数对象的[[scope]]加入到scope chain中。
参考:
1.JavaScript 开发进阶:理解 JavaScript 作用域和作用域链