梳理前端知識— 1-1 this指針/閉包/作用域

一 、 作用域

執(zhí)行環(huán)境

執(zhí)行上下文（execution context），也稱執(zhí)行環(huán)境，定義了變量和函數(shù)有權訪問的數(shù)據(jù)。環(huán)境中的所有變量和函數(shù)都保存在一個變量對象中。當某個執(zhí)行環(huán)境中的代碼執(zhí)行完畢后，該執(zhí)行環(huán)境被銷毀，保存在其中的所有變量和函數(shù)定義也隨之銷毀。
全局執(zhí)行環(huán)境是指最外圍的執(zhí)行環(huán)境，在Web瀏覽器中，就是指window對象，所有的全局對象和函數(shù)都是作為window對象的屬性和方法創(chuàng)建的。
每個函數(shù)都有自己的執(zhí)行環(huán)境，當函數(shù)執(zhí)行完畢時，函數(shù)內(nèi)的變量會被銷毀。
例如

function printColor(){
  var color = "blue";
  console.log(color); //blue
}
console.log(color);   //報錯 "ReferenceError: color is not defined

變量color在函數(shù)printColor中建立，當函數(shù)執(zhí)行完畢時，該函數(shù)的執(zhí)行環(huán)境被銷毀，color這個變量也被銷毀，因此在全局訪問是訪問不到的。

沒有塊作用域

作用域:顧名思義，就是指變量和函數(shù)的作用范圍；
塊作用域, 塊作用域是指用大括號{}括起來的代碼會形成一個作用域，但在JavaScript中是不存在塊作用域的。
例如，在C語言中：

for(int i = 1; i<5; i++){
  printf("%d",i);
}
printf("%d",i);//會報錯i沒有定義

但在JavaScript中：

for(var i = 1; i<5; i++){
  console.log(i);
}
console.log(i);//不會報錯，且會打印出來 5;

這是因為在C語言中，大括號{}括住的部分形成了自己的作用域，在其中聲明的變量i是無法在外部訪問到的。而在javascript當中，沒有塊作用域的概念，在大括號內(nèi)聲明的變量，在大括號外也是可以訪問的。

思考：這里的 i 在什么域里？這里會不會發(fā)生變量提升？

作用域鏈

在JavaScript中有作用域鏈的概念，作用域鏈其實就是執(zhí)行環(huán)境的棧，在標識符解析的過程中，會沿著作用域鏈一層一層向上找。
程序在執(zhí)行過程中，沒進入一個新的執(zhí)行環(huán)境就會將該執(zhí)行環(huán)境壓入執(zhí)行環(huán)境棧中，每執(zhí)行完畢跳出該執(zhí)行環(huán)境，就會將執(zhí)行環(huán)境彈出棧。
例如，以下這段程序,程序摘自《Javascript高級程序設計》：

var color = "blue";

function changeColor(){
  var anotherColor = "red";
  function swapColors() {
      var tempColor = anotherColor;
      anotherColor = color;
      color = tempColor; // 這里可以訪問 color、 anotherColor 和 tempColor
    }                 
    // 這里可以訪問 color 和 anotherColor，但不能訪問 tempColor
    swapColors();
}
// 這里只能訪問 color
changeColor();

執(zhí)行環(huán)境的壓棧順序如下：

全局作用域（var color;function changeColor）---->
changeColor()(var anotherColor; function swapColor)---->
swapColor()(var tempColor);

作用域鏈順序如下, 摘自《Javascript高級程序設計》：

作用域鏈從右下角向左上角能訪問的范圍越來越小. swapColor中可以訪問changeColor函數(shù)中的變量，反之則不可以。
注：自己動手試一試 color、 anotherColor 和 tempColor這三個變量在哪里可以訪問，哪里不可以訪問吧~

面試題
let a = 'global';
    
    function course() {
        let b = 'zhaowa';

        session();
        function session() {
            let c = 'session';
               
            teacher();
            // 2. 函數(shù)提升
            function teacher() {
                // 3. 變量提升
                // var d = 'yy';
                // d = 'yy';
                let d = 'yy';

                console.log(d);
                // 1. 作用域鏈向上查找
                console.log('test1', b);
            }
        }
    }

    course();

    // *************************************
    // 4. 提升優(yōu)先級 => 函數(shù)需要變量
    // 提升維度：變量優(yōu)先
    // 執(zhí)行維度：函數(shù)先打印

    // **************************************
    // 前置結(jié)論：函數(shù)是天然隔離的方案
    // 5. 塊級作用域
    if (true) {
        let e = 111;
        var f = 222;
        console.log(e, f);
    }
    console.log('f', f);
    console.log('e', e);

二 、 閉包

什么是閉包

首先你要知道，閉包沒什么神奇的，也沒什么可怕的！

閉包是指有權訪問另一個函數(shù)作用域中的變量的函數(shù), 創(chuàng)建閉包的常見形式是在一個函數(shù)內(nèi)部創(chuàng)建并返回另一個函數(shù)。

在這個例子中，返回的匿名函數(shù)就是一個閉包。
根據(jù)前面說的執(zhí)行環(huán)境和作用域鏈，我們知道一個函數(shù)創(chuàng)建了一個執(zhí)行上下文，函數(shù)內(nèi)部的變量在函數(shù)外是訪問不到的，get函數(shù)的a變量在外部是訪問不到的，而閉包的作用就是使我們能夠在函數(shù)外邊訪問到函數(shù)內(nèi)部的變量，返回的匿名函數(shù)能夠訪問到get函數(shù)的內(nèi)部變量a。
而根據(jù)作用域鏈知道，一個外層函數(shù)的內(nèi)部函數(shù)是可以向上搜索從而訪問到外層函數(shù)的變量的，就如同get函數(shù)中的匿名函數(shù)是可以訪問到get函數(shù)中的變量的，因此前者就成為了后者的閉包。而這種函數(shù)嵌套是我們最常見的閉包形式。

閉包的作用域鏈

仍以getA()這段代碼為例，當函數(shù)get()執(zhí)行完畢時，其活動對象不會被銷毀，因為匿名函數(shù)的作用域鏈仍在引用這個活動對象（引用為0時才可以被銷毀，后面內(nèi)存管理會說）。
當get()函數(shù)執(zhí)行完畢之后，其執(zhí)行環(huán)境的作用域鏈會被銷毀，但它的活動對象仍然會留在內(nèi)存中，直到匿名函數(shù)被銷毀后，get()函數(shù)的活動對象才會被銷毀。因此需要手動銷毀來避免內(nèi)存泄漏。

var getA = get();
var res = getA();
getA = null;

由于閉包會攜帶父函數(shù)的作用域，因此會比其他函數(shù)占用更多的內(nèi)存，從而影響性能，因此要慎重使用閉包。

閉包的副作用

作用域鏈的這種機制導致了閉包保存的是父函數(shù)變量的最終值。這在出現(xiàn)循環(huán)的時候就會產(chǎn)生意想不到的結(jié)果。

function createFunctions(){
  var result = new Array();
  for (var i=0; i < 10; i++){
    result[i] = function(){
      return i;
    };
  }
  return result;
}

我們希望這段代碼返回一個函數(shù)數(shù)組，其中每個函數(shù)都能返回對應的索引值，但實際上由于閉包最終保存的是父函數(shù)最終的變量對象，此時的i值為10，因此最終返回值都為10。
解決方案如下：

function createFunctions(){
  var result = new Array();
  for (var i=0; i < 10; i++){
        result[i] = (function(num){
          return function(){
            return num;
          };
        })(i);
    }
    return result;
}

在這種解決方案中，調(diào)用每個匿名函數(shù)的時候，傳入變量i，由于函數(shù)參數(shù)是按值傳遞的，所以會將變量i的當前值復制給參數(shù)num。而在這個匿名函數(shù)內(nèi)部，又創(chuàng)建并返回了一個訪問num的閉包，這樣一來，result數(shù)組中的每個函數(shù)都有自己的num變量的一個副本，因此就可以返回不同的數(shù)值了。

三、this 上下文 context

  • 我家門前有條河，門前河上有座橋，河里有群鴨。
  • 我家門前有條河，'這河上'有座橋，‘這河里’有群鴨。
  • this是在執(zhí)行時動態(tài)讀取上下文決定的
    考察重點 - 各使用態(tài)中的指針指向
函數(shù)直接調(diào)用 - this指向是window
 function foo() {
        console.log('函數(shù)內(nèi)部this', this);
    }

    foo()
隱式綁定 - this的指向是調(diào)用堆棧的上一級
 function fn() {
        console.log('隱式綁定', this.a)
    }

    const obj = {
        a: 1,
        fn
    }

    obj.fn = fn;
    obj.fn();
面試題
 const foo = {
        bar: 10,
        fn: function() {
            console.log(this.bar);
            console.log(this);
        }
    }

    // 取出
    let fn1 = foo.fn;
    fn1(); // ??

 const o1 = {
        text: 'o1',
        fn: function() {
            // 直接使用上下文 - 傳統(tǒng)分活
            // console.log('o1fn_this', this);
            return this.text;
        }
    }

    const o2 = {
        text: 'o2',
        fn: function() {
            // 呼叫領導執(zhí)行 - 部門協(xié)作
            return o1.fn();
        }
    }

    const o3 = {
        text: 'o3',
        fn: function() {
            // 直接內(nèi)部構造 - 公共人
            let fn = o1.fn;
            return fn();
        }
    }

    console.log('o1fn', o1.fn()); // ?
    console.log('o2fn', o2.fn()); // ?
    console.log('o3fn', o3.fn()); // ?
  1. 在執(zhí)行函數(shù)時，函數(shù)背上一級調(diào)用，上下文指向上一級
  2. 直接變成了公共函數(shù)的話，指向window
如何console.log('o2fn', o2.fn())的結(jié)果是o2
    // 1. 顯式人為干涉
    fn.call(o2)
    // 2. 不許改變this
    const o1 = {
        text: 'o1',
        fn: function() {
            return this.text;
        }
    }

    const o2 = {
        text: 'o2',
        fn: o1.fn
    }
    // this指向的最后調(diào)用他的對象，執(zhí)行fn時，o1.fn搶過來掛載在自己的o2fn上即可
顯式綁定（bind ｜ apply ｜ call)
function foo() {
        console.log('函數(shù)this', this);
    }
    foo();

    foo.call({a: 1});
    foo.apply({a: 1});

    const bindFoo = foo.bind({a: 1});
    bindFoo();
追問：call、apply、bind區(qū)別
  1. call < = > apply 傳參不同 依次傳入/數(shù)組傳入
  2. bind 返回值不同
  • 面試：手寫apply & bind
    // 1. 需求：手寫bind => bind位置 => Function.prototype => 原型
    Function.prototype.newBind = function() {
        // 2. bind改變原理
        const _this = this;
        const args = Array.prototype.slice.call(arguments);
        const newThis = args.shift();

        // 核心封裝函數(shù)不執(zhí)行
        return function() {
            // 執(zhí)行核心apply
            return _this.newApply(newThis, args);
        }
    }

    // 2. 內(nèi)層實現(xiàn)
    Function.prototype.newApply = function(context) {
        if (typeof this !== 'function') {
            throw new TypeError('Error');
        }

        // 參數(shù)兜底
        context = context || window;

        // 臨時掛載執(zhí)行函數(shù)
        context.fn = this;

        let result = arguments[1]
            ? context.fn(...arguments[1])
            : context.fn();

        delete context.fn;
        return result;
    }
new
    class Course {
        constructor(name) {
            this.name = name;
            console.log('this', this);
        }
        test() {
            console.log('this1', this);
        }
        asyncTest() {
            // 異步隊列 => async queue
            setTimeout(function() {
                console.log('this_async', this);
            }, 100)
        }
    }

    const course = new Course('this');
    course.test();
    course.asyncTest();
思考：如何不寫bind實現(xiàn)bind效果

es6箭頭函數(shù)

var obj = {
    a:1,
    func1: function(){
        console.log(this.a)
    },
    func2: () => {
        console.log(this.a)
    }
}

obj.func1 = obj.func1.bind(obj) // 手動指定 func1 的 this 指向
var func1 = obj.func1
func1() // 1

var func2 = obj.func2
func2() // 箭頭函數(shù) this是靜態(tài)綁定，this 指向 window

作業(yè)

  1. 如下代碼會報錯嗎？如果報錯請說明原因，如果不報錯請說明運行結(jié)果和原因
for(var i = 1; i<5; i++){
   console.log(i);
}
console.log(i);
  1. 如下代碼輸出是什么？為什么？請寫出js解釋器實際執(zhí)行的等效代碼
var v='Hello World'; 
(function(){ 
   console.log(v); 
   var v='I love you'; 
})()
  1. 如下代碼輸出是什么？為什么？請寫出js解釋器實際執(zhí)行的等效代碼
function main(){ 
   console.log(foo);     // ?
   var foo = 10;
   console.log(foo);     // ?
   function foo(){ 
      console.log("我來自 foo"); 
   } 
   console.log(foo);     // ?
} 
main();
  1. 如下代碼輸出是什么？為什么？
var a = 10;
var foo = {
   a: 20,
   bar: function () {
      var a = 30;
      return this.a;
   }
};

console.log(
   foo.bar(),             // ?
   (foo.bar)(),           // ?
   (foo.bar = foo.bar)(), // ?
   (foo.bar, foo.bar)()   // ?
   );
  1. 如下代碼輸出是什么？為什么？請寫出js解釋器實際執(zhí)行的等效代碼
var a = 10;
function main(){
   console.log(a);        // ?
   var a = 20;
   console.log(a);        // ?
   (function(){
      console.log(a);     // ?
      var a = 30;
      console.log(a);     // ?
   })()
   console.log(a);        // ?
}
main()
  1. 為什么點擊所有的button打印出來的都是5而非0,1,2,3,4？要怎么修改？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">

<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul>
<li><button>0</button></li>
<li><button>1</button></li>
<li><button>2</button></li>
<li><button>3</button></li>
<li><button>4</button></li>
</ul>
</body>
</html>

var buttons = $("button")

for(var i=0;i<buttons.length;i++){
   buttons[i].onclick = function(){
      console.log(i)
   }
}
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容