函数和作用域
2017-08-06 本文已影响0人
魔王卡卡
函数声明和函数表达式有什么区别
- 使用function关键字可以声明一个函数，声明不必放在调用前面；
- 函数表达式相当于把一个函数当做一个值，赋值给一个变量，所以声明必须放在调用前面。
什么是变量的声明前置？什么是函数的声明前置
在一个作用域下，var声明的变量和function声明的函数会前置
//代码段如下，因为变量的声明前置，所以在代码段顶部有一条隐性的声明 var a
console.log(a); //因为声明中并没有给a赋值，所以输出为 undefined
var a = 1;
//代码段如下，因为函数的声明前置，所以在代码段顶部有一条隐性的声明 function a(){}
console.log(a); //因为声明中只是一个空函数，所以输出为 function a(){}
function a(){
console.log("hello");
};
arguments 是什么
arguments是获取传递给函数所有参数的类数组对象，可以使用方括号语法来访问每一个元素，也可以使用length属性来确定传递进函数的参数的个数。
需要注意的是，如果定义了函数参数，但没有传进相应的参数值，则没有传递值的函数参数被自动赋予undefined值。
函数的"重载"怎样实现
JavaScript不能像强类型语言那样实现函数重载，在定义两个相同函数名的函数，后一个函数会将前一个覆盖，要实现类似的功能，可以通过检查传入函数中参数的不同执行相应的逻辑模拟重载。
立即执行函数表达式是什么？有什么作用
不需要显示的调用函数，在定义函数后就立即执行的函数就是立即执行的函数表达式，它的作用是隔离作用域，不会产生任何全局变量。
立即执行函数表达式的写法有以下几种：
(function(){
...
})();
(function(){
...
}());
求n!，用递归来实现
function factor(n) {
if (n === 1 || n === 0) {
return 1;
};
if (n < 0) {
return "负数没有阶乘";
};
return n * factor(n - 1);
};
factor(n);
以下代码输出什么？
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('饥人谷', 2, '男');
/*name: 饥人谷
age: 2
sex: 男
["饥人谷", 2, "男"]
name valley
undefined*/
getInfo('小谷', 3);
/*name: 小谷
age: 3
sex: undefined
["小谷", 3]
name valley
undefined*/
getInfo('男');
/*name: 男
age: undefined
sex: undefined
["男"]
name valley
undefined*/
写一个函数，返回参数的平方和？
function sumSquare() {
var sum = 0;
for (i = 0; i < arguments.length; i++) {
sum = sum + arguments[i]*arguments[i];
};
return sum;
};
sumSquare();
如下代码的输出？为什么
console.log(a);
var a = 1;
console.log(b);
/* 将代码段声明前置并重写
var a;
console.log(a);
a = 1;
console.log(b);
所以输出结果为
undefined
Uncaught ReferenceError: b is not defined */
如下代码的输出？为什么
sayName('world');
sayAge(10);
function sayName(name){
console.log('hello ', name);
}
var sayAge = function(age){
console.log(age);
};
/* function sayName(name)是函数声明，该函数的调用可以放在函数声明前面，
而var sayAge = function(age)是一个函数表达式，调用必须放在后面，所以代码段的输出如下：
hello world
Uncaught TypeError: sayAge is not a function*/
如下代码输出什么? 写出作用域链查找过程伪代码
var x = 10
bar()
function foo() {
console.log(x)
}
function bar(){
var x = 30
foo()
}
/*
globalContext = {
AO: {
x: 10
foo: function
bar: function
}
Scope: null
}
foo.[[scope]]: globalContext.AO
bar.[[scope]]: globalContext.AO
barContext = {
AO: {
x: 30
}
Scope: bar.[[scope]]: globalContext.AO
}
fooContext = {
AO: {}
Scope: foo.[[scope]]: globalContext.AO
}
根据上面的作用域链查找过程伪代码，可得console.log(x)的输出为10 undefined，则foo()为10 undefined，则bar()为10 undefined
*/
如下代码输出什么? 写出作用域链查找过程伪代码
var x = 10;
bar()
function bar(){
var x = 30;
function foo(){
console.log(x)
}
foo();
}
/*
globalContext = {
AO: {
x: 10
bar: function
}
Scope: null
}
bar.[[scope]]: globalContext.AO
barContext = {
AO: {
x: 30
foo: function
}
Scope: bar.[[scope]]: globalContext.AO
}
foo.[[scope]]: barContext.AO
fooContext = {
AO: {}
Scope: foo.[[scope]]: barContext.AO
}
根据上面的作用域链查找过程伪代码，可得console.log(x)的输出为30 undefined，则foo()为30 undefined，则bar()为30 undefined
*/
以下代码输出什么? 写出作用域链的查找过程伪代码
var x = 10;
bar()
function bar(){
var x = 30;
(function (){
console.log(x)
})()
}
/*
globalContext = {
AO: {
x: 10
bar: function
}
Scope: null
}
bar.[[scope]]: globalContext.AO
barContext = {
AO: {
x: 30
(function (){console.log(x)}): function
}
Scope: bar.[[scope]]: globalContext.AO
}
(function (){console.log(x)}).[[scope]]: bar.[[scope]]: globalContext.AO
(function (){console.log(x)}) = {
AO: {}
Scope: bar.[[scope]]: globalContext.AO
}
根据上面的作用域链查找过程伪代码，(function (){console.log(x)})()是一个立即执行函数表达式，它的取值应该在barContext中找，则x为30，console.log(x)的输出为30 undefined，bar()为30 undefined
*/
以下代码输出什么？ 写出作用域链查找过程伪代码
var a = 1;
function fn(){
console.log(a) //undefiend
var a = 5
console.log(a) //5
a++
var a
fn3() //1
fn2() //6
console.log(a) //20
function fn2(){
console.log(a)
a = 20
}
}
function fn3(){
console.log(a)
a = 200
}
fn()
console.log(a) //200
/*
globalContext = {
AO: {
a: 1
fn: function
fn3: function
}
Scope: null
}
fn.[[scope]]: globalContext.AO
fn3.[[scope]]: globalContext.AO
执行fn()函数时，根据声明前置，在第一个console.log(a)执行时，作用域链查找过程伪代码如下：
fnContext = {
AO: {
a: undefined
fn2: function
}
Scope: fn.[[scope]]: globalContext.AO
}
fn2.[[scope]]: fnContext.AO
当a=5时，作用域链查找过程伪代码如下
fnContext = {
AO: {
a: 5
fn2: function
}
Scope: fn.[[scope]]: globalContext.AO
}
fn2.[[scope]]: fnContext.AO
当执行a++时，作用域链查找过程伪代码如下
fnContext = {
AO: {
a: 6
fn2: function
}
Scope: fn.[[scope]]: globalContext.AO
}
fn2.[[scope]]: fnContext.AO
执行函数fn3()时，先代入fn3.[[scope]]: globalContext.AO中a的值，输出console.log(a)，再重新对a赋值
fn3Context = {
AO: {
a: 200
}
Scope: fn3.[[scope]]: globalContext.AO
}
执行fn3()后，全局上下文中a的值变为200
执行函数fn2()时，先代入fn2.[[scope]]: fnContext.AO中a的值，输出console.log(a)，再重新对a赋值
fn2Context = {
AO: {
a: 20
}
Scope: fn2.[[scope]]: fnContext.AO
}
执行fn2()后，fn()中a的值变为20
根据上面的计算，最终的详细输出结果为：
fn()共输出5个值，一一对应为
第一个console.log(a) => undefined
第二个console.log(a) => 5
fn3() => 1
fn2() => 6
第三个console.log(a) => 20
代码段最后一个console.log(a) => 200 undefined
*/
