Pemahaman mendalam tentang skop JavaScript dan penutupan

Skop

Skop ialah skop pembolehubah dan fungsi Semua pembolehubah yang diisytiharkan dalam fungsi dalam JavaScript sentiasa kelihatan dalam badan fungsi Terdapat skop global dan skop tempatan dalam JavaScript, tetapi tiada skop peringkat blok, skop tempatan Pembolehubah mempunyai keutamaan yang lebih tinggi daripada pembolehubah global Mari kita gunakan beberapa contoh untuk memahami "peraturan tersembunyi" skop dalam JavaScript (ini juga soalan yang sering ditanya dalam temu bual bahagian hadapan).

1. Isytiharkan pembolehubah terlebih dahulu
Contoh 1:

var scope="global";
function scopeTest(){
  console.log(scope);
  var scope="local" 
}
scopeTest(); //undefined

Salin selepas log masuk

Output di sini tidak ditentukan dan tiada ralat dilaporkan Ini kerana pengisytiharan dalam fungsi yang kami nyatakan sebelum ini sentiasa kelihatan dalam badan fungsi Fungsi di atas adalah bersamaan dengan:

var scope="global";
function scopeTest(){
  var scope;
  console.log(scope);
  scope="local" 
}
scopeTest(); //local

Salin selepas log masuk

Perhatikan bahawa jika anda terlupa var, pembolehubah akan diisytiharkan sebagai pembolehubah global.

2. Tiada skop peringkat blok

Tidak seperti bahasa lain yang biasa digunakan, tiada skop peringkat blok dalam Javascript:

function scopeTest() {
  var scope = {};
  if (scope instanceof Object) {
    var j = 1;
    for (var i = 0; i < 10; i++) {
      //console.log(i);
    }
    console.log(i); //输出10
  }
  console.log(j);//输出1

}

Salin selepas log masuk

Skop pembolehubah dalam JavaScript adalah tahap fungsi, iaitu semua pembolehubah dalam fungsi ditakrifkan di seluruh fungsi Ini juga membawa beberapa "peraturan tersembunyi" yang akan kita hadapi jika kita tidak memberi perhatian:

var scope = "hello";
function scopeTest() {
  console.log(scope);//①
  var scope = "no";
  console.log(scope);//②
}

Salin selepas log masuk

Keluaran nilai pada ① ternyata tidak ditentukan, yang benar-benar gila Kami telah pun menentukan nilai pembolehubah global. Sebenarnya, kod di atas adalah bersamaan dengan:

var scope = "hello";
function scopeTest() {
  var scope;
  console.log(scope);//①
  scope = "no";
  console.log(scope);//②
}

Salin selepas log masuk

Isytihar terlebih dahulu dan pembolehubah global mempunyai keutamaan yang lebih rendah daripada pembolehubah tempatan Menurut dua peraturan ini, tidak sukar untuk memahami mengapa undefined adalah output.

Rantai skop

Dalam JavaScript, setiap fungsi mempunyai konteks pelaksanaannya sendiri Apabila kod dilaksanakan dalam persekitaran ini, rantaian skop objek boleh ubah akan dibuat kepada objek berubah-ubah.
Hujung hadapan rantai skop ialah objek pembolehubah persekitaran pelaksanaan kod semasa, yang sering dipanggil "objek aktif". carian akan berhenti Jika tidak, ia akan terus mencari rantai skop atas sehingga ia menemui objek global:

Pencarian langkah demi langkah bagi rantaian skop juga akan mempengaruhi prestasi program Semakin panjang rantaian skop pembolehubah, semakin besar kesan terhadap prestasi Ini adalah salah satu sebab utama mengapa kami cuba mengelak daripada menggunakan pembolehubah global.

Penutupan

Konsep asas
Skop ialah prasyarat untuk memahami penutupan bermakna pembolehubah dalam skop luaran sentiasa boleh diakses dalam skop semasa.

function createClosure(){
  var name = "jack";
  return {
    setStr:function(){
      name = "rose";
    },
    getStr:function(){
      return name + ":hello";
    }
  }
}
var builder = new createClosure();
builder.setStr();
console.log(builder.getStr()); //rose:hello

Salin selepas log masuk

Contoh di atas mengembalikan dua penutupan dalam fungsi Kedua-dua penutupan mengekalkan rujukan kepada skop luaran, jadi pembolehubah dalam fungsi luaran sentiasa boleh diakses tidak kira di mana ia dipanggil. Fungsi yang ditakrifkan di dalam fungsi akan menambah objek aktif fungsi luaran kepada rantai skopnya sendiri Oleh itu, dalam contoh di atas, sifat fungsi luaran boleh diakses melalui fungsi dalaman Ini juga merupakan cara untuk JavaScript mensimulasikan pembolehubah persendirian.

Nota: Memandangkan penutupan akan mempunyai skop fungsi tambahan (fungsi tanpa nama dalaman membawa skop fungsi luaran), penutupan akan mengambil lebih banyak ruang memori daripada penggunaan yang berlebihan boleh menyebabkan penggunaan memori.

Pembolehubah dalam penutupan

Apabila menggunakan penutupan, disebabkan oleh pengaruh mekanisme rantai skop, penutupan hanya boleh mendapatkan nilai terakhir fungsi dalaman Kesan sampingan ini ialah jika fungsi dalaman berada dalam gelung, nilai pembolehubah sentiasa nilai terakhir.

  //该实例不太合理，有一定延迟因素，此处主要为了说明闭包循环中存在的问题
  function timeManage() {
    for (var i = 0; i < 5; i++) {
      setTimeout(function() {
        console.log(i);
      },1000)
    };
  }

Salin selepas log masuk

Program di atas tidak memasukkan nombor 1-5 seperti yang kami jangkakan, tetapi mengeluarkan 5 kesemuanya 5 kali. Mari lihat contoh lain:

function createClosure(){
  var result = [];
  for (var i = 0; i < 5; i++) {
    result[i] = function(){
      return i;
    }
  }
  return result;
}

Salin selepas log masuk

Nilai pulangan untuk memanggil createClosure()[0]() ialah 5 dan nilai pulangan createClosure()[4]() masih 5. Melalui dua contoh di atas, kita dapat melihat masalah penutupan apabila menggunakan fungsi dalaman dengan gelung: kerana rantai skop setiap fungsi menyimpan objek aktif untuk fungsi luaran (timeManage, createClosure), oleh itu, mereka semua merujuk kepada pembolehubah yang sama i. Apabila fungsi luaran kembali, nilai i pada masa ini ialah 5, jadi nilai setiap fungsi dalaman i juga adalah 5.
Jadi bagaimana untuk menyelesaikan masalah ini? Kita boleh memaksa hasil yang diharapkan dikembalikan melalui pembungkus tanpa nama (ungkapan fungsi laksana sendiri tanpa nama):

function timeManage() {
  for (var i = 0; i < 5; i++) {
    (function(num) {
      setTimeout(function() {
        console.log(num);
      }, 1000);
    })(i);
  }
}

Salin selepas log masuk

Atau kembalikan tugasan fungsi tanpa nama dalam fungsi tanpa nama penutupan:

function timeManage() {
  for (var i = 0; i < 10; i++) {
    setTimeout((function(e) {
      return function() {
        console.log(e);
      }
    })(i), 1000)
  }
}
//timeManager();输出1,2,3,4，5
function createClosure() {
  var result = [];
  for (var i = 0; i < 5; i++) {
    result[i] = function(num) {
      return function() {
        console.log(num);
      }
    }(i);
  }
  return result;
}
//createClosure()[1]()输出1；createClosure()[2]()输出2

Salin selepas log masuk

无论是匿名包裹器还是通过嵌套匿名函数的方式，原理上都是由于函数是按值传递，因此会将变量i的值复制给实参num，在匿名函数的内部又创建了一个用于返回num的匿名函数，这样每个函数都有了一个num的副本，互不影响了。

闭包中的this

在闭包中使用this时要特别注意，稍微不慎可能会引起问题。通常我们理解this对象是运行时基于函数绑定的，全局函数中this对象就是window对象，而当函数作为对象中的一个方法调用时，this等于这个对象（TODO 关于this做一次整理）。由于匿名函数的作用域是全局性的，因此闭包的this通常指向全局对象window：

var scope = "global";
var object = {
  scope:"local",
  getScope:function(){
    return function(){
      return this.scope;
    }
  }
}

Salin selepas log masuk

调用object.getScope()()返回值为global而不是我们预期的local，前面我们说过闭包中内部匿名函数会携带外部函数的作用域，那为什么没有取得外部函数的this呢？每个函数在被调用时，都会自动创建this和arguments，内部匿名函数在查找时，搜索到活跃对象中存在我们想要的变量，因此停止向外部函数中的查找，也就永远不可能直接访问外部函数中的变量了。总之，在闭包中函数作为某个对象的方法调用时，要特别注意，该方法内部匿名函数的this指向的是全局变量。

幸运的是我们可以很简单的解决这个问题，只需要把外部函数作用域的this存放到一个闭包能访问的变量里面即可：

var scope = "global";
var object = {
  scope:"local",
  getScope:function(){
    var that = this;
    return function(){
      return that.scope;
    }
  }
}
object.getScope()()返回值为local。

Salin selepas log masuk

内存与性能

由于闭包中包含与函数运行期上下文相同的作用域链引用，因此，会产生一定的负面作用，当函数中活跃对象和运行期上下文销毁时，由于必要仍存在对活跃对象的引用，导致活跃对象无法销毁，这意味着闭包比普通函数占用更多的内存空间，在IE浏览器下还可能会导致内存泄漏的问题，如下：

 function bindEvent(){
  var target = document.getElementById("elem");
  target.onclick = function(){
    console.log(target.name);
  }
 }

Salin selepas log masuk

上面例子中匿名函数对外部对象target产生一个引用，只要是匿名函数存在，这个引用就不会消失，外部函数的target对象也不会被销毁，这就产生了一个循环引用。解决方案是通过创建target.name副本减少对外部变量的循环引用以及手动重置对象：

 function bindEvent(){
  var target = document.getElementById("elem");
  var name = target.name;
  target.onclick = function(){
    console.log(name);
  }
  target = null;
 }

Salin selepas log masuk

闭包中如果存在对外部变量的访问，无疑增加了标识符的查找路径，在一定的情况下，这也会造成性能方面的损失。解决此类问题的办法我们前面也曾提到过：尽量将外部变量存入到局部变量中，减少作用域链的查找长度。

总结：闭包不是javascript独有的特性，但是在javascript中有其独特的表现形式，使用闭包我们可以在javascript中定义一些私有变量，甚至模仿出块级作用域，但闭包在使用过程中，存在的问题我们也需要了解，这样才能避免不必要问题的出现。