javascript 之 let 在for循环中内部声明与外部声明的区别

内部声明又称为内联声明：

块级作用域的区别：

1.用外部声明方式

以下vue响应原理实验代码为例

var vm = {};
var data = {
  name: "zhangsan",
  age: 20,
};

let key, value;
for (key in data) {
  /* (function (key) { */
  Object.defineProperty(vm, key, {
    get: function () {
      console.log("get", data[key]); // 监听
      return data[key];
    },
    set: function (newVal) {
      console.log("set", newVal); // 监听
      data[key] = newVal;
    },
  });
  /* })(key); */
}

如果我们在外部用let声明key，也不用IIFE来创建作用域，那么结果就是key并没有自己独立的作用域，影响如下图所示：

结果就是name也被污染了。

2.用内联声明

var vm = {};
var data = {
  name: "zhangsan",
  age: 20,
};

/* let key, value; */
for (let key in data) { //这里用内联变量声明，且是let
  /* (function (key) { */
  Object.defineProperty(vm, key, {
    get: function () {
      console.log("get", data[key]); // 监听
      return data[key];
    },
    set: function (newVal) {
      console.log("set", newVal); // 监听
      data[key] = newVal;
    },
  });
  /* })(key); */
}

效果如下：

结论：

在for循环中要想let产生自己的块级作用域，需要使用内联声明。