《前端JavaScript面試技巧》學習筆記（3）做用域和閉包

時間 2019-11-06

標籤前端 javascript 面試技巧學習筆記閉包欄目 JavaScript 简体版

原文原文鏈接

題目:

1: 說一下對變量提高的理解javascript

2: 說明 this 的幾種不一樣使用場景html

3: 建立 10 個 < a > 標籤,點擊的時候彈出響應的序列號java

4: 如何理解做用域bash

5: 實際開發中閉包的應用閉包

知識點

執行上下文

範圍: 一段< script >或者一個函數中
全局: 變量定義, 函數聲明
函數: 變量定義, 函數聲明, this, arguments

PS:注意函數聲明和函數表達式的區別app

<script>
console.log(a); // undefind
var a = 100; 

fn('jiangdeng'); //jiangdeng 20
function fn(name) {
    // var age = undefind;
    age = 20;
    console.log(name,age);
    var age; //會被提到此函數內的頂部
}
<script>
複製代碼

解析 : 一個 < script > 標籤內的全部代碼,在一個< script >中定義一個全局的上下文;在執行第一行以前,首先會把全部的變量聲明,函數聲明拿出來;先把 var a 拿到上面來,這個時候還沒給它賦值成100,先用undefind來代替一下;而後第五行有一個函數聲明,把整個函數拿到上面來; 在執行這塊的時候先作了兩件事,把 a 的聲明拿上來並經過undefined賦值來佔位,而後把函數拿到上面來;
注意: 寫代碼的時候要先聲明,而後執行

函數聲明方式

fn(); //能夠執行;執行的時候會把聲明的函數提到前面去
function fn(){
    //函數聲明
    console.log('函數聲明的方式,函數能夠前置執行')
}

fn1(); // Uncaught TypeError: fn1 is not a function
//不能執行,走到 var fn1的時候fn1不是一個函數,這個時候fn1提到前面去就是 var fn1 = undefind;
var fn1 = function(){
    //函數表達式
    console.log('函數表達式的方式,函數不能前置執行')
}
複製代碼

console.log(a);
var a = 100; //會報錯,緣由同上
//至關於 var a = undefind;
//而後執行console.log(a)的時候 a 等於 undefind;>報錯
//最後 a = 100;
複製代碼

// 用函數聲明的方式至關於把fn拿到前面去了;
fn('jiangdeng'); //jiangdeng
function fn(name,age) {
    console.log(name,age);
}

複製代碼

fn('jiangdeng'); //jiangdeng 20
function fn(name) {
    age = 20;
    console.log(name,age);
    var age;
}
複製代碼

在函數裏面也是同樣的,在執行以前,後面的 var age 會被提早到前面去;

this

this 要在執行時才能確認值,定義時沒法確認

var a = {
    name:'A',
    fn:function () {
        console.log(this.name)
    }
}
a.fn();//  "A"; this === a
a.fn.call({name:'B'}) //  "B"; this === {name:"B"}
var fn1 = a.fn;
fn1(); //  undefind; this === window;做爲普通函數執行 這個時候的 this 是 window
複製代碼

回答問題:說明 this 的幾種不一樣使用場景?

做爲構造函數執行
做爲對象屬性執行
做爲普通函數執行這個時候的 this 是 window
call apply bind

代碼演示

構造函數中的this

function Foo(name,age) {
    this.name = name;
    this.age = age;
    return this;
}
var f = new Foo('jiangdeng',22);  
複製代碼

對象屬性中的this

var obj = {
    name : 'A',
    printName : function(){
        console.log(this.name) 
    }
}
//把函數做爲對象屬性來執行
obj.printName() // A     this指向obj這個對象
複製代碼

普通函數

function fn() {
    console.log(this) // this === window
}
fn() 
複製代碼

call apply bind

function fn(name,age) {
    alert(name);
    console.log(this);
}
var fn1 = fn.call({a:100},'jiangdeng',22); //this === {a:100};
複製代碼

bind ()建立一個函數的實例,其this值會綁定到傳給bind()函數的值

var fn = function(name,age){
    alert(name);
    console.log(this);  // {a: 100}
}.bind({a:100});
fn('jiangdeng',22)
複製代碼

做用域

沒有塊級做用域 (大括號是沒辦法約束裏面的變量的)
只有函數和全局做用域

//沒有塊級做用域
if (true) {
    var a = 1000; //在括號裏面和在括號外面聲明變量沒有區別
}
console.log(a)
複製代碼

//函數和全局做用域
var a = 1000;
function fn(){
    var a = 2000;
    console.log(a)
}
console.log(a) // 1000
fn() // 2000
複製代碼

做用域鏈

var a = 1000;
function fn(){
    var b = 2000;
    //當前做用域沒有定義的變量,即自由變量
    console.log(a)
    console.log(b)
}
fn() //1000,2000
複製代碼

自由變量:當前做用域沒有定義的變量,即自由變量
fn 做用域內沒有定義a變量,就去它的父級做用域,即全局做用域去找 a ;
函數的父級做用域是什麼? 就是函數在定義的時候父級做用域,不是在執行時候的父級做用域;函數

var a = 1000;
function F1() {
    var b = 2000;
    function F2() {
        var c = 3000;
        console.log(a); //a 是自由變量
        console.log(b); //b 是自由變量
        console.log(c);
    }
    F2()
}
F1() //1000 2000 3000
複製代碼

不要管 F1 ,F2 在什麼地方執行,要看它們在哪裏定義的
做用域鏈:一個自由變量不斷的往它父級做用域找,造成一個鏈式結構ui

閉包

//閉包的使用場景：函數做爲返回值
function F1() {
    var a = 1000;

    //返回一個函數(函數做爲返回值)
    return function() {
        console.log(a) // a 是自由變量,去它的父級做用域尋找
    }
}
//f1 獲得一個函數
var f1 = F1(); //F1執行後返回的是一個函數,把它賦值給f1
var a = 2000;
f1(); //1000

//補充一點知識:F1()執行返回的結果是 {console.log(a)},
//爲何不是1000呢?由於F1雖然執行了,可是裏面的函數尚未執行,要想獲得1000必須還得加一個(),如F1()();

複製代碼

一個函數的做用域和它的父級做用域在它定義的時候就肯定好了,因此肯定函數的做用域不看它執行時候的做用域,要看它定義時候的做用域。

閉包的使用場景:

函數做爲返回值(如上面demo)
函數做爲參數傳遞(把函數傳到另外一個函數中執行),跟上面相似

function F1() {
    var a = 100;
    return function() {
        console.log(a)// a 是自由變量,去它的父級做用域尋找
    }
}
var f1 = F1();
function F2(fn) {
    var a = 200;
    //雖然fn()執行的結果(f1傳入後)是返回下列註釋的函數,但並無什麼卵用,由於函數的做用域不看它執行時候的做用域,看它聲明定義時候的做用域
    fn() // >>function () {console.log(a)}
}
F2(f1) // 100
複製代碼

題目解答:

1: 說一下對變量提高的理解
考察的是對執行上下文的理解,主要內容是:this

變量定義
函數聲明 ,函數表達式
應用的場景,一是script標籤內,一是構造函數中 ,變量的聲明和定義都會被提早

2: 說明 this 的幾種不一樣使用場景spa

做爲構造函數執行
做爲對象屬性執行
做爲普通函數執行這個時候的 this 是 window
call apply bind

//構造函數
  function Foo(name){
    this.name=name
  }
  var f=new Foo('zhangsan')
  
  //對象屬性
  var obj={
    name:'zhangsan',
    printName:function(){
      console.log(this.name)
    }
  }
  obj.printName()
  
  //普通函數
  function fn(){
    console.log(this);
  }
  fn()

  //call apply bind
  function fn1(name,age){
    alert(name)
    console.log(this)
  }
  fn1.call({x:100},'zhangsan',20)

  var fn2=function (name,age){    //bind在函數聲明的形式後不可用，必須是函數表達式
    alert(name)
    console.log(this)
  }.bind({y:200})
  fn2('zhangsan',20)
複製代碼

3: 建立 10 個 a 標籤,點擊的時候彈出響應的序列號

//這是錯誤的寫法
var i;
for (i = 0; i < 10; i++) {
   var a = document.createElement('a');
    a.innerHTML = i + '<br>';
    a.addEventListener('click', function(e) {
        e.preventDefault();
        alert(i); // i 自由變量,要去父做用域去尋找
    })
    document.body.append(a);
}
複製代碼

錯誤寫法的結果是每一個a標籤上點擊的時候,彈出來的都是10
錯誤的緣由: alert(i) 裏面的 i 是一個自由變量;會去 function 的父做用域找,這個時候 i 早就成 10了 (原本是9,自增1)

//正確寫法
var i;
for (i = 0; i < 10; i++) {
    (function(i) {
        var a = document.createElement('a');
        a.innerHTML = i + '<br>';
        a.addEventListener('click', function(e) {
            e.preventDefault(); 
            alert(i);
         })
        document.body.appendChild(a);
    })(i)
}
複製代碼

把 i 做爲參數傳進函數裏面,讓它做爲函數的做用域中的一個變量;當 i 等於0的時候,存儲這個變量,而後執行...這裏至關於生成了十個函數,每次執行的參數都不一樣

4: 如何理解做用域

自由變量
做用域鏈 , 即自由變量的查找
閉包的兩個場景

5: 實際開發中閉包的應用

閉包實際應用中主要用於封裝變量,收斂權限;
在下面的例子中,在isFirstLoad函數的中能用到的就只有 return 回的那一部分;而_list在外面是沒法修改到的

//閉包實際應用中主要用於封裝變量,收斂權限
function isFirstLoad() {
    var  _list = [];
    return function (id) {
        if (_list.indexOf(id) >= 0) {
            return false
        }else{
            _list.push(id)
            return true
        }
    }
}
// 使用
var firstLoad = isFirstLoad();
firstLoad(10); //true
firstLoad(10);//false
firstLoad(20);//true
firstLoad(20);//false
//在isFirstLoad函數外，沒法修改_list的值
複製代碼