函数声明和函数表达式
函数声明
function name(param) { statements }
name:函数名 param:传递给函数的参数的名称,一个函数最多可以有255个参数 statements:组成函数体的声明语句
JavaScript 中的函数声明被提升到了函数定义 ,你可以在函数声明之前使用该函数
函数声明不能出现在if语句,while循环或其他语句中。
默认情况下,函数是返回 undefined 的。想要返回一个其他的值,函数必须通过一个 return 语句指定返回值
函数表达式(function expression)
var named = function(){}
name: 函数名,可以省略。当省略函数名的时候,该函数就成为了匿名函数
var myFunction = function() {statements}
也可以在定义时为函数命名
var myFunction = function namedFunction(){statements}
命名函数表达式的好处是当我们遇到错误时,堆栈跟踪会显示函数名,容易寻找错误。
可以看到,上面的两个例子都不以function开头。不以function开头的函数语句就是函数表达式定义。
函数表达式不会放到开头,所以不能在定义之前调用。
什么是变量的声明前置?什么是函数的声明前置
解析器将当前作用域内声明的所有变量放到作用域的开始处,但是,只有变量的声明被前置了(值都为undefined),而赋值操作被保留在原处。
JavaScript解析器允许在函数声明之前使用函数,此时不仅仅是函数名被前置了,整个函数定义也被前置了,所以就可以直接调用函数
arguments
arguments 是一个类似数组的对象, 对应于传递给函数的参数
arguments对象是所有函数中可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数的条目,第一个条目的索引从0开始。
arguments对象不是一个 Array 。它类似于数组,但除了 长度之外没有任何数组属性
arguments的值与对应的命名参数的值保持同步,即修改命名参数或arguments的值,两者都发生改变,但他们的内存空间是独立的。
arguments.length 由传入参数的个数决定,不能修改,与数组不同
arguments.callee是一个指针,指向拥有这个arguments对象的函数。
arguments和this类似,当函数被调用时会自动获取,内部函数在搜索这两个变量时,只会搜索到其活动对象为止,因此永远不可能直接访问外部函数中的这两个变量。
在严格模式下('use strict'; ),arguments不再追随参数的变化,而且也没有callee属性
想要得到函数的形参参数数量, 请使用 Function.length 属性
函数的"重载"怎样实现
在其他面向对象的语言中,理由函数签名来实现重载,函数签名包括参数的类型和参数的数量。ECMAScript没有函数签名,所以不可能实现重载,重名的函数自会被覆盖。 但可以在函数体针对不同的参数调用执行相应的逻辑
//例如对参数个数进行判断 模拟重载
function aFunction() {
switch(arguments.length) {
case 0:
.........
break;
case 1:
........
break;
}
}
立即执行函数表达式是什么?有什么作用
立即执行函数表达式是将函数函数声明包含在一对圆括号中,表示他实际上是一个函数表达式。而紧随其后的另一对圆括号会立即调用这个函数。
(function(){
//code
})()
它的目的有两个:一是不必为函数命名,避免了污染全局变量;二是IIFE内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量。
求n!,用递归来实现
unction Factorial(n){
if n<1 {
return 1;
}else {
return n*Factorial(n-1);
}
}
function getInfo(name, age, sex){
console.log('name:',name);
console.log('age:', age);
console.log('sex:', sex);
console.log(arguments);
arguments[0] = 'valley';
console.log('name', name);
}
getInfo('boring', 1, '男');
//输出 name: boring age: 1 sex: 男 ['valley', 1, '男'] name valley
getInfo('小飞', 4);
//输出 name: 小飞 age: 4 sex: undefined ['valley', 1, '男'] name valley
getInfo('男');
//输出 name: 男 age: undefined sex: undefined ['valley', 1, '男'] name valley
function sumOfSquares(){
var result = 0;
for(var i=0, i
console.log(a); //输出undefined 变量声明前置 var a
var a = 1;
console.log(b); // 报错 因为b没有声明
sayName('world');
sayAge(10);
function sayName(name){
console.log('hello ', name);
}
var sayAge = function(age){
console.log(age);
};
//输出结果 hello world 并报错 函数声明提前 所以可以提前调用
// 而函数表达式则不可以提前调用
如下代码输出什么? 写出作用域链查找过程伪代码
var x = 10
bar()
function foo() {
console.log(x)
}
function bar(){
var x = 30
foo()
}
输出10
function foo(){}
function bar(){}
var x
x =10
全局执行上下文
globalContext = {
AO:{
x:10,
foo():function,
bar():function
},
Scope:null
}
//声明 foo 时
foo.[[scope]] = globalContext.AO
//声明 bar 时
bar.[[scope]] = globalContext.AO
bar()
bar执行上下文
barContext = {
AO:{ x = 30 },
Scope: bar.[[scope]] //globalContext.AO
}
foo()
foo执行上下文
fooContext = {
AO:{},
foo.[[scope]] = globalContext.AO //找到a =10
}
var x = 10;
bar()
function bar(){
var x = 30;
function foo(){
console.log(x)
}
foo();
}
输出30
function bar(){}
var x
x=10
globalContext {
AO: {
x: 30,
bar(): function
}
}
bar执行上下文
barContext {
AO:{
x: 30,
foo(): function
}
scope: globalContext.AO
}
foo执行上下文
fooContext {
AO: {}
scope: barContext.AO // 找到30
var x = 10;
bar()
function bar(){
var x = 30;
(function (){
console.log(x)
})()
}
输出30
function bar() {}
var x
x = 10
globalContext {
AO: {
x: 10,
bar: function
}
}
bar执行上下文
barContext {
AO: {
x: 30,
匿名函数: function
}
sope: globalContext.AO
}
匿名函数为立即执行函数 so在barContext.AO中找到 x 为30
var a = 1;
function fn(){
console.log(a) 声明了a但没赋值所以 undefined
var a = 5
console.log(a) a被赋值为 5
a++
var a
fn3() 在globalContext.AO中找到 a=1 然后给g.AO中的a赋值为200
fn2() 在fnContext.AO中找到a 此时a=6 然后给fn.AO中的a赋值为20
console.log(a) 在fnCotext.AO中找到 a=20
function fn2(){
console.log(a)
a = 20
}
}
function fn3(){
console.log(a)
a = 200
}
fn()
console.log(a) 找全局作用域中找到a=200
输出结果 undefined 5 1 6 20 200
最终的函数作用域
function fn(){}
function fn3(){}
var a
a = 1;
globalContext= {
AO: {
fn: function,
fn3: function,
a: 200
}
}
fn执行上下文
fnContext = {
AO: {
a: 20,
fn2: function
}
scope: globalContext.AO
}
fn2执行上下文
fn2Context = {
AO: {}
scope: fnContext.AO
}
fn3执行上下文
fn3Context = {
AO:{}
scope: globalContext.AO
}