【前端面試】作用域和閉包

yanest 發(fā)布于2019-08-23 15:14 / 1666人閱讀

摘要：作用域沒有塊級作用域盡量不要在塊中聲明變量。只有函數(shù)級作用域作用域鏈自由變量當(dāng)前作用域沒有定義的變量即為自由變量。自由變量會去其父級作用域找。

1. 題目

說一下對變量提升的理解

說明this的幾種不同使用場景

創(chuàng)建10個a標(biāo)簽，點擊的時候彈出來相應(yīng)的序號

如何理解作用域

實際開發(fā)中閉包的應(yīng)用

手動實現(xiàn)call apply bind

2. 知識點 2.1 執(zhí)行上下文

范圍：一段script或者一個函數(shù)

全局：變量定義、函數(shù)聲明 script

函數(shù)：變量定義、函數(shù)聲明、this、arguments （執(zhí)行之前）

函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別：

a(); //報錯  函數(shù)表達(dá)式 變量聲明 會提前。
var a = function(){}

b(); // 不報錯  函數(shù)聲明
function b(){}

變量定義時會默認(rèn)把他的變量聲明提升：(僅限于他的執(zhí)行上下文，比如一段script和一個函數(shù)中)

console.log(a);
var a = 0;

實際上是

var a;
console.log(a);
a = 0;

2.2 this

this要在執(zhí)行時才能確認(rèn)，定義時無法確認(rèn)。

        var a = {
            name:"a",
            fn:function(){
                console.log(this.name);
            }
        }

        a.fn();  // a
        a.fn.apply({name:"b"});  // b  a.fn.call({name:"b"});
        var fn1 = a.fn();
        fn1();  // undefined

this的使用場景

構(gòu)造函數(shù)中（指向構(gòu)造的對象）

    function Fun(name){
        this.name = name;
    }
    var f = new Fun("a");
    console.log(f.name);

對象屬性中（指向該對象）

普通函數(shù)中（指向window）

call apply bind

都是用來改變一個函數(shù)的this指向，用法略有不同。

call：后面的參數(shù)為調(diào)用函數(shù)的參數(shù)列表

function greet(name) {
  console.log(this.animal,name);
}

var obj = {
  animal: "cats"
};

greet.call(obj,"貓咪");

apply：第二個參數(shù)為調(diào)用函數(shù)的參數(shù)數(shù)組

function greet(name) {
  console.log(this.animal,name);
}

var obj = {
  animal: "cats"
};

greet.apply(obj,["貓咪"]);

bind：當(dāng)綁定函數(shù)被調(diào)用時，bind傳入的參數(shù)會被插入到目標(biāo)函數(shù)的參數(shù)列表的開始位置，傳遞給綁定函數(shù)的參數(shù)會跟在它們后面。

var fun = function (name1,name2){
    console.log(this);
    console.log(name);
}.bind({a:1},"name1");
    fun("name2");

arguments中的this：

var length = 10;
function fn(){
    alert(this.length)
}
var obj = {
    length: 5,
    method: function(fn) {
        arguments[0]()
    }
}

obj.method(fn)//輸出1
這里沒有輸出5，也沒有輸出10，反而輸出了1，有趣。這里arguments是javascript的一個內(nèi)置對象（可以參見mdn：arguments - JavaScript），是一個類數(shù)組（就是長的比較像數(shù)組，但是欠缺一些數(shù)組的方法，可以用slice.call轉(zhuǎn)換，具體參見上面的鏈接），其存儲的是函數(shù)的參數(shù)。也就是說，這里arguments[0]指代的就是你method函數(shù)的第一個參數(shù)：fn，所以arguments[0]()的意思就是：fn()。

不過這里有個疑問，為何這里沒有輸出5呢？我method里面用this，不應(yīng)該指向obj么，至少也會輸出10呀，這個1是鬧哪樣？

實際上，這個1就是arguments.length，也就是本函數(shù)參數(shù)的個數(shù)。為啥這里的this指向了arguments呢？因為在Javascript里，數(shù)組只不過使用數(shù)字做屬性名的方法，也就是說：arguments[0]()的意思，和arguments.0()的意思差不多（當(dāng)然這么寫是不允許的），你更可以這么理解：

arguments = {
    0: fn, //也就是 functon() {alert(this.length)} 
    1: 第二個參數(shù), //沒有 
    2: 第三個參數(shù), //沒有
    ..., 
    length: 1 //只有一個參數(shù)
}

所以這里alert出來的結(jié)果是1。

如果要輸出5應(yīng)該咋寫呢？直接 method: fn 就行了。

2.3 作用域

沒有塊級作用域

        if(true){
            var name = "test"
        }
        console.log(name);

盡量不要在塊中聲明變量。

只有函數(shù)級作用域

2.4 作用域鏈

自由變量 當(dāng)前作用域沒有定義的變量即為自由變量。

自由變量會去其父級作用域找。是定義時的父級作用域，而不是執(zhí)行。

        var a = 100;
        function f1(){
            var b = 200;
            function f2(){
                var c = 300;
                console.log(a); //自由變量
                console.log(b); //自由變量
                console.log(c);
            }
            f2();
        };
        f1();

2.5 閉包

　一個函數(shù)中嵌套另外一個函數(shù)，并且將這個函數(shù)return出去，然后將這個return出來的函數(shù)保存到了一個變量中，那么就創(chuàng)建了一個閉包。

閉包的兩個使用場景

1.函數(shù)作為返回值

        function fun(){
            var a = 0;
            return function(){
                console.log(a); //自由變量，去定義時的父級作用域找
            }
        }

        var f1 = fun();
        a = 1000;
        f1();

2.函數(shù)作為參數(shù)

        function fun(){
            var a = 0;
            return function(){
                console.log(a); //自由變量，去定義時的父級作用域找
            }
        }

        function fun2(f2){
            a = 10000
            f2();
        }

        var f1 = fun();

        fun2(f1);

具體解釋看高級-閉包中的說明

閉包的兩個作用：

能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)

可以讓函數(shù)內(nèi)部的變量一直保存在內(nèi)存中

實際應(yīng)用場景1：

閉包可以將一些不希望暴露在全局的變量封裝成“私有變量”。

假如有一個計算乘積的函數(shù)，mult函數(shù)接收一些number類型的參數(shù)，并返回乘積結(jié)果。為了提高函數(shù)性能，我們增加緩存機(jī)制，將之前計算過的結(jié)果緩存起來，下次遇到同樣的參數(shù)，就可以直接返回結(jié)果，而不需要參與運(yùn)算。這里，存放緩存結(jié)果的變量不需要暴露給外界，并且需要在函數(shù)運(yùn)行結(jié)束后，仍然保存，所以可以采用閉包。

上代碼：

function calculate(param){
    var cache = {};
    return function(){
        if(!cache.parame){
            return cache.param;
        }else{
            //緩存計算....
            //cache.param = result
            //下次訪問直接取
        }
    }
}

實際應(yīng)用場景2

延續(xù)局部變量的壽命

img 對象經(jīng)常用于進(jìn)行數(shù)據(jù)上報，如下所示：

var report = function( src ){
    var img = new Image();
    img.src = src;
};
report( "http://xxx.com/getUserInfo" );

但是通過查詢后臺的記錄我們得知，因為一些低版本瀏覽器的實現(xiàn)存在 bug，在這些瀏覽器
下使用 report 函數(shù)進(jìn)行數(shù)據(jù)上報會丟失 30%左右的數(shù)據(jù)，也就是說， report 函數(shù)并不是每一次
都成功發(fā)起了 HTTP 請求。

丟失數(shù)據(jù)的原因是 img 是 report 函數(shù)中的局部變量，當(dāng) report 函數(shù)的
調(diào)用結(jié)束后， img 局部變量隨即被銷毀，而此時或許還沒來得及發(fā)出 HTTP 請求，所以此次請求
就會丟失掉。

現(xiàn)在我們把 img 變量用閉包封閉起來，便能解決請求丟失的問題：

var report = (function(){
    var imgs = [];
    return function( src ){
        var img = new Image();
        imgs.push( img );
        img.src = src;
    }
})();

閉包缺點：浪費資源！

3. 題目解答 3.1 說一下對變量提升的理解

變量定義和函數(shù)聲明

注意函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別

變量定義時會默認(rèn)把他的變量聲明提升：(僅限于他的執(zhí)行上下文，比如一段script和一個函數(shù)中)

console.log(a);
var a = 0;

實際上是

var a;
console.log(a);
a = 0;

3.2 說明this的幾種不同使用場景

構(gòu)造函數(shù)中（指向構(gòu)造的對象）

對象屬性中（指向該對象）

普通函數(shù)中（指向window）

call apply bind

3.3 創(chuàng)建10個a標(biāo)簽，點擊的時候彈出來相應(yīng)的序號

實現(xiàn)方法1：用let聲明i

        var body = document.body;
        console.log(body);
        for (let i = 0; i < 10; i++) {
            let obj = document.createElement("i");
            obj.innerHTML = i + "
";
            body.appendChild(obj);
            obj.addEventListener("click",function(){
                alert(i);
            })
        }

實現(xiàn)方法2 包裝作用域

    var body = document.body;
    console.log(body);
    for (var i = 0; i < 10; i++) {
        (function (i) {
            var obj = document.createElement("i");
            obj.innerHTML = i + "
";
            body.appendChild(obj);
            obj.addEventListener("click", function () {
                alert(i);
            })
        })(i)
    }

3.4 實際開發(fā)中閉包的應(yīng)用

能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)

可以讓函數(shù)內(nèi)部的變量一直保存在內(nèi)存中

封裝變量，權(quán)限收斂

應(yīng)用1

var report = (function(){
    var imgs = [];
    return function( src ){
        var img = new Image();
        imgs.push( img );
        img.src = src;
    }
})();

用于防止變量銷毀。

應(yīng)用2

    function isFirstLoad() {
        var arr = [];
        return function (str) {
            if (arr.indexOf(str) >= 0) {
                console.log(false);
            } else {
                arr.push(str);
                console.log(true);
            }
        }
    }

    var fun = isFirstLoad();
    fun(10);
    fun(10);

將arr封裝在函數(shù)內(nèi)部，禁止隨意修改，防止變量銷毀。

3.5 手動實現(xiàn)call apply bind

context 為可選參數(shù)，如果不傳的話默認(rèn)上下文為 window；

context 創(chuàng)建一個 Symbol 屬性，調(diào)用后即刪除，不會影響context

    Function.prototype.myCall = function (context) {
      if (typeof this !== "function") {
        return undefined; // 用于防止 Function.prototype.myCall() 直接調(diào)用
      }
      context = context || window;
      const fn = Symbol();
      context[fn] = this;
      const args = [...arguments].slice(1);
      const result = context[fn](...args);
      delete context[fn];
      return result;
    }

apply實現(xiàn)類似call，參數(shù)為數(shù)組

    Function.prototype.myApply = function (context) {
      if (typeof this !== "function") {
        return undefined; // 用于防止 Function.prototype.myCall() 直接調(diào)用
      }
      context = context || window;
      const fn = Symbol();
      context[fn] = this;
      let result;
      if (arguments[1] instanceof Array) {
        result = context[fn](...arguments[1]);
      } else {
        result = context[fn]();
      }
      delete context[fn];
      return result;
    }

1.判斷是否為構(gòu)造函數(shù)調(diào)用

2.注意參數(shù)要插入到目標(biāo)函數(shù)的開始位置

    Function.prototype.myBind = function (context) {
      if (typeof this !== "function") {
        throw new TypeError("Error")
      }
      const _this = this
      const args = [...arguments].slice(1)
      return function F() {
        // 判斷是否用于構(gòu)造函數(shù)
        if (this instanceof F) {
          return new _this(...args, ...arguments)
        }
        return _this.apply(context, args.concat(...arguments))
      }
    }

GPU云服務(wù)器云服務(wù)器 js作用域和上下文 js面試閉包如何回答前端面試前端工程師面試

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101742.html

發(fā)表評論

登陸后可評論

0條評論

yanest

男|高級講師

我要關(guān)注我要私信

TA的文章

云主機(jī)什么配置-云主機(jī)哪種配置才算好？

閱讀 3406·2021-09-22 15:17
c學(xué)習(xí)筆記——自定義qsort函數(shù)

閱讀 2761·2021-09-02 15:15
css 布局2

閱讀 1794·2019-08-30 15:54
ABAP的權(quán)限檢查跟蹤(Authorization trace)工具

閱讀 2014·2019-08-30 14:02
去重方法小結(jié)

閱讀 2544·2019-08-29 16:58
vue實現(xiàn)選中效果

閱讀 3003·2019-08-29 16:08
ReactNative實現(xiàn)tab標(biāo)簽組合

閱讀 1345·2019-08-26 12:24
es6/es7之Decorator裝飾器

閱讀 1670·2019-08-26 10:41

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【前端面試】作用域和閉包

相關(guān)文章

【進(jìn)階2-3期】JavaScript深入之閉包面試題解

【進(jìn)階2-2期】JavaScript深入之從作用域鏈理解閉包

你應(yīng)該要知道的作用域和閉包

深入javascript——作用域和閉包

Web前端經(jīng)典面試試題（一）

發(fā)表評論

0條評論

yanest

男|高級講師

TA的文章

云主機(jī)什么配置-云主機(jī)哪種配置才算好？

c學(xué)習(xí)筆記——自定義qsort函數(shù)

css 布局2

ABAP的權(quán)限檢查跟蹤(Authorization trace)工具

去重方法小結(jié)

vue實現(xiàn)選中效果

ReactNative實現(xiàn)tab標(biāo)簽組合

es6/es7之Decorator裝飾器

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【前端面試】作用域和閉包

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！