1. 程式人生 > >一.js高階(6)-閉包-定時器-js中程式碼執行順序

一.js高階(6)-閉包-定時器-js中程式碼執行順序

閉包1:巢狀的兩個作用域中 內層作用域訪問外層作用域 區域性變數的 過程

閉包2 :  就是能夠訪問其他函式內部變數的函式;

    由於js中只有函式內部的子函式才能訪問區域性變數,所以可以簡單的把閉包理解為"定義在哈拿書內部的函式";

    本質上閉包就是連線函式內部和外部的一座橋樑;

 

 閉包的作用:可以讓我們利用函式的作用域儲存一些我們需要的變數 

      1.可以解決定時器中無法儲存變數的問題  2.節約程式碼量

 

閉包特點:延展了函式的作用域  (可以在函式外部讀取成員函式內部)

     閉包函式不會被輕易釋放 (讓函式始終存活在記憶體中)

閉包的缺點: 佔用記憶體

 

//j定時器

for(var i=0; i<3; i++){

    setTimeout(function(){
        console.log(i);
    },0)
} // 4 4 4 4

瀏覽器執行程式碼順序:  限制性執行棧中的程式碼, 再執行任務佇列中的程式碼

  執行棧:  script 標籤中的程式碼

  任務佇列:  定時器中的函式程式碼   繫結的事件函式程式碼

所以, 定時器中的程式碼要等到 for迴圈完成之後再執行

 

//閉包中 this 的指向問題
var
name = "The Window"; var obj = { name: "My Object", getNameFunc: function () {  return function () {    return this.name;   };   }    }; console.log(obj.getNameFun()() ); //the window

//1. 定義變數 that 來儲存 this的值
var obj = {
  name = 'the pbj',
  getNameFunc: function () {
      var that = this;  return function () {    return that.name;   };   }

  };
console.log(obj.getNameFun()() ); //the obj
//2. 利用bind(this), 將this指向obj

var object = {    
  name: "My Object",
  getNameFunc: function () {
    return function () {
      return this.name;
    }.bind(this);
   }
 };
console.log(object.getNameFunc()()); //the obj