函數(shù)聲明和函數(shù)表達(dá)式有什么區(qū)別
使用function關(guān)鍵字可以聲明一個(gè)函數(shù),函數(shù)聲明不必放在調(diào)用的前面
函數(shù)表達(dá)式先聲明賦值,得到這個(gè)變量,再調(diào)用,聲明必須放到調(diào)用的前面
函數(shù)表達(dá)式就是把函數(shù)這個(gè)指針賦值給這個(gè)變量,函數(shù)表達(dá)式本質(zhì)上是個(gè)表達(dá)式
//函數(shù)聲明
function SayHello() {
console.log(' Hello ');
}
//函數(shù)表達(dá)式
var SayHello = function () {
console.log(' Hello ');
}
什么是變量的聲明前置?什么是函數(shù)的聲明前置
定義: 函數(shù)聲明和變量聲明總是被JavaScript解釋器隱式地提升(hoist)到包含他們的作用域的最頂端。
- 變量的聲明前置
var x = 'good';
(function () {
console.log(x);
var x = 10; // 在這里添加一行對x的定義
})();
//輸出結(jié)果undefined
js在解析這段代碼時(shí),會對變量聲明做一個(gè)調(diào)整,變量提升的定義里說到變量的聲明會被提升到其作用域最前端。 也就是說var x = 10 被隱式的做出了調(diào)整,var x實(shí)際上被提升到了這段代碼所在作用域(也就是這個(gè)匿名函數(shù)定義的作用域)的最前面,那就相當(dāng)于這樣一段代碼
var x = 'good';
(function () {
var x; // 變量聲明被隱式提升
console.log(x);
x = 10;
})();
這就表示x 在匿名函數(shù)定義的作用域中聲明以后覆蓋了全局作用域中的 x ,而這個(gè) x 在這樣一段代碼里僅僅是聲明有這個(gè) x ,還沒賦值,就被 console.log 掉了,自然輸出結(jié)果是 undefined
- 函數(shù)的聲明前置
func();
function func() {
console.log('nice');
}
這段代碼中函數(shù)的調(diào)用是在函數(shù)的定義之前。如果按照javascript的規(guī)矩,其代碼是按其先后順序一行一行的執(zhí)行的話,那么在 func()做出函數(shù)調(diào)用的動作的時(shí)候,其前面是沒有任何關(guān)于func 這一函數(shù)的定義的。 這里之所以能正確調(diào)用這個(gè) func 函數(shù),也是由于在整個(gè)javascript代碼執(zhí)行前,其中的函數(shù)聲明被提升到了其作用域的最前面,這樣的話在調(diào)用func() 函數(shù)的時(shí)候自然能正確執(zhí)行而不會出錯(cuò)。
arguments 是什么
由于JavaScript允許函數(shù)有不定數(shù)目的參數(shù),所以我們需要一種機(jī)制,可以在函數(shù)體內(nèi)部讀取所有參數(shù)。這就是arguments對象的由來。
arguments對象包含了函數(shù)運(yùn)行時(shí)的所有參數(shù),arguments[0]就是第一個(gè)參數(shù),arguments[1]就是第二個(gè)參數(shù),以此類推。這個(gè)對象只有在函數(shù)體內(nèi)部,才可以使用。
var f = function(one) {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
f(1, 2, 3)
// 1
// 2
// 3
函數(shù)的"重載"怎樣實(shí)現(xiàn)
在JS中沒有重載,同名函數(shù)會被覆蓋。但可以在函數(shù)體針對不同的參數(shù)調(diào)用執(zhí)行相應(yīng)的邏輯
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');
立即執(zhí)行函數(shù)表達(dá)式是什么?有什么作用
立即執(zhí)行函數(shù)表達(dá)式
(function(){
var a = 1;
})()
console.log(a);
作用:隔離作用域
求n!,用遞歸來實(shí)現(xià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.寫一個(gè)函數(shù),返回參數(shù)的平方和?
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 變量在當(dāng)前作用域下被提升了,但沒有賦值
var a = 1;
console.log(b);//報(bào)錯(cuò),因?yàn)闆]有聲明變量,也沒有賦值
10.以下代碼輸出什么,為什么?
sayName('world');
sayAge(10);
function sayName(name){
console.log('hello ', name);//hello world
}
var sayAge = function(age){
console.log(age);//報(bào)錯(cuò)sayAge is not a function sayAge是函數(shù)表達(dá)式,調(diào)用在定義之前就會報(bào)錯(cuò)
};
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.調(diào)用bar()進(jìn)入bar的執(zhí)行上下文
barContext={
AO:{
x:30
}, Scope:bar.[[scope]]=globalcontext.AO
}
3.調(diào)用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.調(diào)用bar()
barContext={
AO:{
x:30
foo:function()
},Scope:bar.[[scope]]=globalContext
}
foo.[[scope]]=barContext.AO
3.調(diào)用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.調(diào)用bar()
barContext={
AO:{
x:30
function
},Scope:bar.[[scope]]=globalContext.AO
}
function.[[scope]]=barContext.AO
3.調(diào)用立即執(zhí)行函數(shù)
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.調(diào)用fn()
fnContext={
AO:{
a:5
fn2:function
},Scope:fn.[[scope]]=globalContext.AO
}
fn2.[[scope]]=fnContext.AO
3.調(diào)用fn3()
fn3Context={
AO:{}
,Scope:fn3[[scope]]=globalContext.AO
}
4.調(diào)用fn2()
fn2Context={
AO:{}
,Scope:fn2.[[scope]]=fnContext.AO
}