JavaScript函數與作用域的知識點

函數聲明和函數表達式有什么區別

函數聲明使用 function fn(){} 直接寫 ,在函數前后都可以調用該函數

fn(); // jirengu
function fn(){
    console.log('jirengu');
}
fn(); // jirengu

函數表達式使用 var fn = function(){} 聲明,調用函數必須先聲明,再調用

fn(); // 報錯 fn is not a function
var fn = function(){
    console.log('jscode')
}
fn(); // jscode

什么是變量的聲明前置?什么是函數的聲明前置

在同一個作用域下,聲明前置是把該聲明的變量和函數提升到自身所在作用域的最頂部。

console.log(str);
var str = 'jirengu';
console.log(str);
fn();
function fn(){
    console.log('jirengu');
}

js解析順序

var str;
function fn(){
    
}

console.log(str); // undefined
var str = 'jirengu';
console.log(str); // jirengu
fn();
console.log('jirengu');

arguments 是什么

arguments 是一個類數組對象,它包含了函數的所有傳入參數,可以用數組下標來獲取值,不建議使用,因為可讀性很差

function fn(name, age, sex){
    console.log(name);  // 柏龍
    console.log(age);   // 30
    console.log(sex);   // 男
    console.log(arguments); // 獲取的是 ['柏龍', 30, '男']
    console.log(arguments[0]);  // 柏龍
}
fn('柏龍', 30, '男');

函數的"重載"怎樣實現

在JS中沒有重載,同名函數會覆蓋
但可以在函數體針對不同的參數調用來執行相應的邏輯

function fn(name, age, sex){
    if(name){
        console.log(name);
    }
    if(age){
        console.log(age);
    }
    if(sex){
        console.log(sex);
    }
}
fn('柏龍', 30);
fn('柏龍', 30, '男');

立即執行函數表達式是什么?有什么作用

(function(){ var str = 'jirengu'; })();

作用 隔離作用域,讓函數里面的變量被保護起來,外部無法訪問

求n!,用遞歸來實現

function fn(n){
    if(n === 1){
        return 1;
    }
    return n * fn(n-1);
}
fn(6); // 720 => 6 * 5 * 4 * 3 * 2 * 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('饑人谷', 2, '男');
getInfo('小谷', 3);
getInfo('男');

getInfo('饑人谷', 2, '男');

'name': 饑人谷
'age': 2
'sex': 男
['饑人谷', 2, '男']
'name' valley

getInfo('小谷', 3);

'name': 小谷
'age': 3
'sex': undefined
['小谷', 3]
'name' valley

getInfo('男');

'name': 男
'age': undefined
'sex': undefined
['男']
'name' valley

寫一個函數,返回參數的平方和?

function sumOfSquares(){

}
var result = sumOfSquares(2,3,4)
var result2 = sumOfSquares(1,3)
console.log(result)  //29
console.log(result)  //10

代碼:

function sumOfSquares(){
    var result = 0;
    for (var i = 0; i < arguments.length; i++) {
        result += arguments[i] * arguments[i]
    }
    return result;
}

如下代碼的輸出?為什么

console.log(a);
var a = 1;
console.log(b);

依次輸出:

undefined 
Uncaught ReferenceError: b is not defined

因為聲明的變量會提升到自身所在作用域的最頂部。

console.log(a); // 先聲明,在第一行輸出是沒有賦值,輸出undefined
console.log(b); // 沒有聲明 所以會報錯

如下代碼的輸出?為什么

sayName('world');
sayAge(10);
function sayName(name){
    console.log('hello ', name);
}
var sayAge = function(age){
    console.log(age);
};

依次輸出:

undefined 
Uncaught TypeError: sayAge is not a function

因為 function 聲明函數無論寫在函數體前面或后面都可以調用,函數表達式在調用時必須先聲明,再調用

如下代碼輸出什么? 寫出作用域鏈查找過程偽代碼

var x = 10
bar() 
function foo() {
  console.log(x)
}
function bar(){
  var x = 30
  foo()
}

代碼輸出: 10

globalContent = {
    AO: {
        x: 10,
        foo: function,
        bar: function
    },
    scope: null
}
foo.[[scope]] = globalContent.AO;
bar.[[scope]] = globalContent.AO;

barContent = {
    AO: {
        x: 30
    },
    scope : globalContent.AO;
}
fooContent = {
    AO: {
        
    },
    scope : globalContent.AO;
}

如下代碼輸出什么? 寫出作用域鏈查找過程偽代碼

var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x) 
  }
  foo();
}

代碼輸出:30

globalContent = {
    AO: {
        x: 10,
        bar: function
    },
    scope: null
}
bar.[[scope]] = globalContent.AO;

barContent = {
    AO: {
        x: 30,
        foo: function
    },
    scope : globalContent.AO;
}
foo.[[scope]] = barContent.AO;

fooContent = {
    AO: {
        
    },
    scope : barContent.AO;
}

以下代碼輸出什么? 寫出作用域鏈的查找過程偽代碼

var x = 10;
bar() 
function bar(){
  var x = 30;
  (function (){
    console.log(x)
  })()
}

代碼輸出:30

globalContent = {
    AO: {
        x: 10,
        bar: function
    },
    scope: null
}
bar.[[scope]] = globalContent.AO;

barContent = {
    AO: {
        x: 30,
        fn : function 
    },
    scope : globalContent.AO;
}
foo.[[scope]] = barContent.AO;

fnContent = {
    AO: {
        
    },
    scope : barContent.AO;
}

以下代碼輸出什么? 寫出作用域鏈查找過程偽代碼

var a = 1;

function fn(){
  console.log(a)
  var a = 5
  console.log(a)
  a++
  var a
  fn3()
  fn2()
  console.log(a)

  function fn2(){
    console.log(a)
    a = 20
  }
}

function fn3(){
  console.log(a)
  a = 200
}

fn()
console.log(a)

代碼輸出:

undefined
5
1
6
20
200
globalContent = {
    AO: {
        a: 1, // fn3 調用fnContent.AO a=200
        fn: function,
        fn3: function
    },
    scope: null
}
fn.[[scope]] = globalContent.AO;
fn3.[[scope]] = globalContent.AO;

fnContent = {
    AO: {
        a: undefined, // 第二次打印為 5  
        fn3: function, // 第三次打印 1
        fn2: function, // 第4次打印 6
    }
    scope: globalContent.AO;
}
fn3Content = {
    AO: {
        
    },
    scope: globalContent.AO;
}

fn2Content = {
    AO: {
        a: 20 // 第5次打印 調用fnContent.AO a=20 
    }
    scope: fnContent.AO;
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,117評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,860評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,128評論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,291評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,025評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,421評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,477評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,642評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,177評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,970評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,157評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,717評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,410評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,821評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,053評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,896評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,157評論 2 375

推薦閱讀更多精彩內容

  • 1. 函數聲明和函數表達式有什么區別 使用function關鍵字聲明一個函數時,聲明不必放到調用的前面。//函數聲...
    _李祺閱讀 279評論 0 0
  • 1.函數聲明和函數表達式有什么區別 函數聲明使用function關鍵字進行聲明,聲明不必放到調用的前面。因為函數可...
    山門龍龍閱讀 324評論 0 0
  • 1.函數聲明和函數表達式有什么區別 函數聲明 代碼執行時函數聲明會被提升到最前執行,所以函數的調用與函數聲明的順序...
    Feiyu_有貓病閱讀 396評論 0 0
  • 聲明前置和作用域也是JS 部分面試常考點 1.函數聲明和函數表達式有什么區別 函數聲明:使用function關鍵字...
    湖衣閱讀 206評論 0 0
  • 函數聲明和函數表達式有什么區別? 函數聲明和函數表達式是EMACScript規定的兩種不同的聲明函數的方法。1.函...
    LeeoZz閱讀 352評論 0 1