函数声明和函数表达式有什么区别
使用function关键字可以声明一个函数,函数声明不必放在调用的前面
函数表达式先声明赋值,得到这个变量,再调用,声明必须放到调用的前面
函数表达式就是把函数这个指针赋值给这个变量,函数表达式本质上是个表达式
//函数声明
function SayHello() {
console.log(' Hello ');
}
//函数表达式
var SayHello = function () {
console.log(' Hello ');
}
什么是变量的声明前置?什么是函数的声明前置
定义: 函数声明和变量声明总是被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端。
- 变量的声明前置
var x = 'good';
(function () {
console.log(x);
var x = 10; // 在这里添加一行对x的定义
})();
//输出结果undefined
js在解析这段代码时,会对变量声明做一个调整,变量提升的定义里说到变量的声明会被提升到其作用域最前端。 也就是说var x = 10 被隐式的做出了调整,var x实际上被提升到了这段代码所在作用域(也就是这个匿名函数定义的作用域)的最前面,那就相当于这样一段代码
var x = 'good';
(function () {
var x; // 变量声明被隐式提升
console.log(x);
x = 10;
})();
这就表示x 在匿名函数定义的作用域中声明以后覆盖了全局作用域中的 x ,而这个 x 在这样一段代码里仅仅是声明有这个 x ,还没赋值,就被 console.log 掉了,自然输出结果是 undefined
- 函数的声明前置
func();
function func() {
console.log('nice');
}
这段代码中函数的调用是在函数的定义之前。如果按照javascript的规矩,其代码是按其先后顺序一行一行的执行的话,那么在 func()做出函数调用的动作的时候,其前面是没有任何关于func 这一函数的定义的。 这里之所以能正确调用这个 func 函数,也是由于在整个javascript代码执行前,其中的函数声明被提升到了其作用域的最前面,这样的话在调用func() 函数的时候自然能正确执行而不会出错。
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
函数的"重载"怎样实现
在JS中没有重载,同名函数会被覆盖。但可以在函数体针对不同的参数调用执行相应的逻辑
function printPeopleInfo(name, age, sex){
if(name){
console.log(name);
}
if(age){
console.log(age);
}
if(sex){
console.log(sex);
}
}
printPeopleInfo('Byron', 26);
printPeopleInfo('Byron', 26, 'male');
立即执行函数表达式是什么?有什么作用
立即执行函数表达式
(function(){
var a = 1;
})()
console.log(a);
作用:隔离作用域
求n!,用递归来实现
function factor(n){
if(n<0){
return "error"
}
else if(n === 1 || n===0) {
return 1
}
return n * factor(n-1)
}
factor(n)
7.以下代码输出什么?
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: 男
(3) ["饥人谷", 2, "男", callee: function, Symbol(Symbol.iterator): function]
name valley
*/
getInfo('小谷', 3);
/*输出:name: 小谷
age: 3
sex: undefined
(2) ["小谷", 3, callee: function, Symbol(Symbol.iterator): function]
name valley
*/
getInfo('男');
/*输出:
name: 男
age: undefined
sex: undefined
["男", callee: function, Symbol(Symbol.iterator): function]
name valley
*/
8.写一个函数,返回参数的平方和?
function sumOfSquares(){
var sum = 0;
for(var i=0 ; i < arguments.length ;i++){
sum = arguments[i]*arguments[i] + sum;
}
return sum;
}
var result = sumOfSquares(2,3,4)
var result2 = sumOfSquares(1,3)
console.log(result) //29
console.log(result2) //10
9.以下代码输出什么,为什么?
console.log(a);//输出undefined 变量在当前作用域下被提升了,但没有赋值
var a = 1;
console.log(b);//报错,因为没有声明变量,也没有赋值
10.以下代码输出什么,为什么?
sayName('world');
sayAge(10);
function sayName(name){
console.log('hello ', name);//hello world
}
var sayAge = function(age){
console.log(age);//报错sayAge is not a function sayAge是函数表达式,调用在定义之前就会报错
};
11. 如下代码输出什么? 写出作用域链查找过程伪代码
var x = 10
bar()
function foo() {
console.log(x)
}
function bar(){
var x = 30
foo()
}//输出 10
1.globalContext={
AO:{
x:10
bar()
},Scope:null
}
foo.[[scope]]=globalContext.AO
bar.[[scope]]=globalContext.AO
2.调用bar()进入bar的执行上下文
barContext={
AO:{
x:30
}, Scope:bar.[[scope]]=globalcontext.AO
}
3.调用foo()
fooContext={
AO:{}
Scope:foo.[[scope]]=globalContext
}
12.如下代码输出什么? 写出作用域链查找过程伪代码
var x = 10;
bar()
function bar(){
var x = 30;
function foo(){
console.log(x) // 30
}
foo();
}
1.globalContext={
AO:{
X:10
bar:function()
} ,Scope: null
}
bar.[[scope]]=globalContext.AO
2.调用bar()
barContext={
AO:{
x:30
foo:function()
},Scope:bar.[[scope]]=globalContext
}
foo.[[scope]]=barContext.AO
3.调用foo()
fooContext={
AO:{}
,Scope:foo.[[scope]]=barContext.AO
}
13. 以下代码输出什么? 写出作用域链的查找过程伪代码
var x = 10;
bar()
function bar(){
var x = 30;
(function (){
console.log(x)
})()
}
1.globalContext={
AO:{
x:10
bar:function()
},Scope:null
}
bar.[[scope]]=globalContext.AO
2.调用bar()
barContext={
AO:{
x:30
function
},Scope:bar.[[scope]]=globalContext.AO
}
function.[[scope]]=barContext.AO
3.调用立即执行函数
functionContext={
AO:{
},Scope:function.[[scope]]=barContext.AO
}
14. 以下代码输出什么? 写出作用域链查找过程伪代码
var a = 1;
function fn(){
console.log(a) //undefined
var a = 5
console.log(a)//5
a++
var a
fn3()
fn2()
console.log(a)//20
function fn2(){
console.log(a)//6
a = 20
}
}
function fn3(){
console.log(a)//1
a = 200
}
fn()
console.log(a)//200
1.globalContext={
AO:{
x:1
fn:function
fn3:function
},Scope:null
}
fn.[[scope]]=globalContext.AO
fn3[[scope]]=globalContext.AO
2.调用fn()
fnContext={
AO:{
a:5
fn2:function
},Scope:fn.[[scope]]=globalContext.AO
}
fn2.[[scope]]=fnContext.AO
3.调用fn3()
fn3Context={
AO:{}
,Scope:fn3[[scope]]=globalContext.AO
}
4.调用fn2()
fn2Context={
AO:{}
,Scope:fn2.[[scope]]=fnContext.AO
}