本教程版权归小圆和饥人谷所有,转载须说明来源
问答题
1. 函数声明和函数表达式有什么区别 (*)
函数声明是使用function
关键字声明一个函数,function
命令后面是函数名,在结尾的大括号后面不用加分号。
function print(s) {
console.log(s);
}
函数表达式则是将一个函数赋值给变量,function
命令后面不带有函数名,需要在语句的结尾加上分号,表示语句结束。
var print = function(s) {
console.log(s);
};
2. 什么是变量的声明前置?什么是函数的声明前置 (**)
变量的声明前置Javascript引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行的运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升。实际上执行过程是解释器在未执行的时候先解析出变量声明,然后给他初始值undefined
,然后才逐句执行程序。
console.log(a); // undefined
var a = 2;
函数的声明前置和变量的声明会前置一样,函数的声明同样会前置,如果我们使用函数表达式,那么规则和变量一样;
console.log(fn); //undefined
var fn = function(){}
如果我们使用函数声明的方式,那么即使函数写在最后也可以在前面语句调用,前提是函数声明部分已经被下载到本地。
fn(); // "1"
function fn(){
console.log("1");
}
3. arguments 是什么 (*)
由于javascript允许函数有不定数目的参数,所以我们需要一种机制,可以在函数体内部读取所有的参数,这就是arguments
对象的由来。
-
arguments
对象包含了函数运行时的所有参数,arguments[0]
就是第一个参数,arguments[1]
就是第二个参数,以此类推。这个对象只有在函数体内部,才可以使用。
var f = function(one) {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
f(1,2,3)
//1
//2
//3
-
arguments
对象不仅可以读取参数,还可以为参数赋值(严格模式不允许这种用法)
var f = function(a,b) {
arguments[0] = 3;
arguments[1] = 2;
return a + b;
}
f(1,1)
//5
- 可以用
arguments
的length
属性,判断函数调用时到底带几个参数
function f() {
return arguments.length;
}
f(1,2,3) //3
f(1) //1
f() //0
4. 函数的重载怎样实现 (**)
在javascript中没有函数重载的概念,函数通过名字确定唯一性,函数名相同参数不同也被认为是相同的参数,后面的覆盖前面的,因此可通过arguments实现
function add() {
var sum = 0;
for(var a=0 ; a<argumrnts.length ; a++) {
sum = sum + arguments[a];
}
return sum;
}
add(1,2) //3
add(1,2,3) //6
5. 立即执行函数表达式是什么?有什么作用 (***)
立即执行函数表达式(Immediately-Invoked Function Expression)简称IIFE,是将函数定义放在一个圆括号里,让JavaScript引擎将其理解为一个表达式,再在函数的定义后面加一个(),以达到定义函数后立即调用该函数的效果。
表达式
(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();
注意,上面两种写法最后的分号都是必须的。如果省略分号,遇到连着两个IIFE,可能就会报错。
作用:
- 一是不必为函数命名,避免了污染全局变量;
- 二是IIFE内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量。
6. 什么是函数的作用域链 (****)
在Javascript中,函数也是对象,实际上,javascript里一切都是对象。函数对象和其他对象一样,拥有可以通过代码访问的属性和一系列仅供javascript引擎访问的内部属性。其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用于中对象的集合,这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问。
代码题
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('hunger', 28, '男');
getInfo('hunger', 28);
getInfo('男');
输出:
name:hunger age:28 sex:男 ["hunger",28,"男"] name valley
name:hunger age:28 sex:undefined ["hunger",28] name valley
name:男 age:undefined sex:undefined ["男"] name valley
2.写一个函数,返回参数的平方和?如 (难度**)
function sumOfSquares(){
}
sumOfSquares(2,3,4); // 29
sumOfSquares(1,3); // 10
回答:
function sumOfSquares(){
var sum = 0;
for(var i= 0;i<arguments.length;i++){
sum = sum + arguments[i]*arguments[i];
}return sum;
}
sumOfSquares(2,3,4); // 29
sumOfSquares(1,3); // 10
3.如下代码的输出?为什么 (难度*)
console.log(a);
var a = 1;
console.log(b);
输出:
undefined
Error: b is not defined
原因:
- 因为声明变量a的语句在后面,经过变量提升,初始值为undefined
- 因为变量b不存在,所以出错
4.如下代码的输出?为什么 (难度*)
sayName('world');
sayAge(10);
function sayName(name){
console.log('hello ', name);
}
var sayAge = function(age){
console.log(age);
};
输出:
hello world
Error: sayAge is not a function
原因:
- 因为函数sayName使用函数声明,即使函数写在后面也可以在前面的语句中调用它
- 因为函数sayAge使用函数表达式,并写在调用函数语句的后面,函数的声明前置和变量的声明前置一样,sayAge被当作一个变量被提到了代码前端,所以未检测到该函数
5.如下代码的输出?为什么 (难度**)
function fn(){}
var fn = 3;
console.log(fn);
输出:
3
原因:由于变量fn提升,先被赋予一个函数,后被赋值为3,后面的会覆盖前面的,所以变量fn值为3
6.如下代码的输出?为什么 (难度***)
function fn(fn2){
console.log(fn2);
var fn2 = 3;
console.log(fn2);
console.log(fn);
function fn2(){
console.log('fnnn2');
}
}
fn(10);
输出:
function fn2(){
console.log('fnnn2');
}
3
function fn(fn2){
console.log(fn2);
var fn2 = 3;
console.log(fn2);
console.log(fn);
function fn2(){
console.log('fnnn2');
}
}
原因:
- 调用fn(10),10为实参传递给fn2,但是fn()的函数体内,fn2()函数提升,所以覆盖掉了fn2=10,此时输出fn2()函数的内容
- fn2=3又覆盖掉了fn2之前被赋予的函数,此时输出3
- 当前作用域没有fn函数,则向上一级作用域寻找fn函数,最后直接输出fn函数本身
7.如下代码的输出?为什么 (难度***)
var fn = 1;
function fn(fn){
console.log(fn);
}
console.log(fn(fn));
输出:
Error: fn is not a function
原因:当在同一个作用域内定义了名字相同的变量和方法的话,无论顺序如何,变量的值会覆盖方法的值。所以1覆盖了fn(),fn为一个变量而不是函数
8.如下代码的输出?为什么 (难度**)
//作用域
console.log(j);
console.log(i);
for(var i=0; i<10; i++){
var j = 100;
}
console.log(i);
console.log(j);
输出:
undefined
undefined
10
100
原因:因为for循环语句的大括号内不是一个作用域,括号里声明的变量还是全局变量,由于变量提升,所以前两个结果为undefined,后两个结果为赋值后的10和100
9.如下代码的输出?为什么 (难度****)
fn();
var i = 10;
var fn = 20;
console.log(i);
function fn(){
console.log(i);
var i = 99;
fn2();
console.log(i);
function fn2(){
i = 100;
}
}
输出:
undefined
100
10
以上代码声明前置后相当于
var i;
var fn;
function fn() {
var i;
console.log(i);
i = 99;
function fn2() {
i = 100;
}
fn2();
console.log(i);
}
fn();
i = 10;
fn = 20;
console.log(i);
原因:先执行fn(),由于声明前置,所以i还未被赋值,所以函数fn内第一个console.log(i)为undefined;
再执行fn2(),函数fn2的i = 100覆盖了fn里的i = 99,所以函数fn内第二个console.log(i)为100;
全局环境中i又被赋值为10,所以函数外面的console.log(i)为10。
10.如下代码的输出?为什么 (难度*****)
var say = 0;
(function say(n){
console.log(n);
if(n<3) return;
say(n-1);
}( 10 ));
console.log(say);
输出:
10
9
8
7
6
5
3
2
0
原因:首先,function say(n)是一个立即执行函数表达式,而这个表达式的一个特性就是可以保护该函数体内的变量,所以var say和function say(n)无关,不会产生冲突,所以最后一行的console.log(say);还是会输出say原来的值,即0;
其次,在function say(n)函数内部,这是一个带参数的立即执行函数表达式,参数为10。而且这个函数还是用了递归形式,递归的跳出条件是 n < 3。当n每次减一时,会输出一个值(console.log(n))。当n减至为2时,2 < 3满足跳出递归的条件,所以执行return跳出函数。所以该函数的输出是10 9 8 7... 2。