闭包

练习

---

下面的代码输出多少？修改代码让 fnArr[i]() 输出 i。使用 两种以上的方法

var fnArr = [];
for (var i = 0; i < 10; i++) {
  fnArr[i] = function(){
    return i;
  };
}
console.log(fnArr[3]()); // => 10
/*
产生的原因是，
变量 i 和匿名函数 function(){return i;} 
构成的闭包在 console.log(fnArr[3]()) 执行 fnArr[3]() 时，
所引用的变量 i 的值为10
*/

解决方法如下

// 方法一
var fnArr = [];
for (var i = 0; i < 10; i++) {
  (function(i){
    fnArr[i] = function(){
      return i;
    };
  })(i);
}
console.log(fnArr[3]()); // => 3

// 方法二
var fnArr = [];
for (var i = 0; i < 10; i++) {
  fnArr[i] = (function(i){
    return function(){
      return i;
    };
  })(i);
}
console.log(fnArr[3]()); // => 3

// 方法三
var fnArr = [];
for (let i = 0; i < 10; i++) {
  fnArr[i] = function(){
    return i;
  };
}
console.log(fnArr[3]()); // => 3

---

封装一个汽车对象，可以通过如下方式获取汽车状态

var Car = (function(){
  var speed = 0;
  function setSpeed(s){
    speed = s;
  }
  /* your code */
  function getSpeed(){
    return speed;
  }
  function accelerate(){
    speed += 10;
  }
  function decelerate(){
    speed >= 10 ? speed -= 10 : console.log(`减速幅度超过最低速度，请修正`);
  }
  function getStatus(){
    return speed > 0 ? `running` : `stop`;
  }
  /* your code */
  return {
    setSpeed: setSpeed,
    /* code */
    getSpeed: getSpeed,
    accelerate: accelerate,
    decelerate: decelerate,
    getStatus: getStatus
  };
})();

// 测试
Car.setSpeed(30);
Car.getSpeed(); // => 30
Car.accelerate();
Car.getSpeed(); // => 40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); // => 20
Car.getStatus(); // => 'running';
Car.decelerate(); 
Car.decelerate();
Car.getStatus();  // => 'stop';

---

下面这段代码输出结果是？为什么？

var a = 1;
setTimeout(function(){
  a = 2;
  console.log("1: " + a);
}, 0);
var a;
console.log("2: " + a);
a = 3;
console.log("3: " + a);
// 运行结果如下
// 2: 1
// 3: 3
// <· undefined -->匿名函数默认返回的，忽略
// 1: 2
// 分析如下：
// 先将声明的变量提升，得到
var a;
var a;
a = 1;
setTimeout(function(){
  a = 2;
  console.log("1: " + a);
}, 0);
console.log("2: " + a);
a = 3;
console.log("3: " + a);

因为定时器的运行机制是，将指定的代码移出本次执行，等到下一轮 Event Loop 时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮 Event Loop 时重新判断。这意味着，setTimeout 指定的代码，必须等到本次执行的所有代码都执行完，才会执行。

// 所以，执行顺序为
// 1
console.log("2: " + a); // => 2: 1
// 2
a = 3;
console.log("3: " + a); // => 3: 3
// 3
a = 2;
console.log("1: " + a); // => 1: 2

---

下面这段代码输出结果是？为什么？

var flag = true;
setTimeout(function(){
  flag = false;
}, 0);
while(flag) {}
console.log(flag);
// tips: 千万不要把这段代码放到控制台里运行，后果自负

依据 setTimeout 的运行机制，以上代码执行顺序如下

var flag = true;
while(flag) {}
console.log(flag);

flag = false;
/*
因为 flag = true，while(flag){} 是个死循环，
浏览器不会执行 console.log(flag)，更不会执行 flag = false
*/

---

下面这段代码输出？如何输出 delayer:0, delayer:1...（使用闭包来实现）

for (var i = 0; i < 5; i++) {
  setTimeout(function(){
    console.log('delayer:' + i);
  }, 0);
  console.log(i);
}

运行结果如下

// 0
// 1
// 2
// 3
// 4
// <· undefined --> 匿名函数默认返回的，忽略
// delayer:5
// delayer:5
// delayer:5
// delayer:5
// delayer:5

根据变量提升的规则，以及定时器的运行机制，以上代码整理如下

var i;
for (i = 0; i < 5; i++) {
  console.log(i);
  setTimeout(function(){
    console.log('delayer:' + i);
  }, 0);
}
// console.log(i) 的打印结果自不必说，当代码执行到 setTimeout 时，在下一轮事件循环中的匿名函数要打印5次 i ，其值已自增到5

改造如下

for (var i = 0; i < 5; i++) {
  (function(i){
    setTimeout(function(){
      console.log('delayer:' + i);
    }, 0);
  })(i);
  console.log(i);
}

结果如下

屏幕快照 2017-10-10 14.13.03.png

---

如何获取元素的真实宽高

var p = document.createElement("p");
var body = document.querySelector("body");
body.append(p);
var mp = document.querySelector("p");
// console.log(window.getComputedStyle(p, null))
// console.log(p.style)
function getStyle(element){ // 兼容低版本IE
  return element.currentStyle ? element.currentStyle : window.getComputedStyle(element, null);
}
console.log(getStyle(mp).height); // 0px
console.log(getStyle(mp).width); // 1264px

---

URL 如何编码解码？为什么要编码？

• 编码方法：

  1. encodeURI()
  2. encodeURIComponent()

• 解码方法：

  1. decodeURI()
  2. decodeURIComponent()

  其中，encodeURI 与 encodeURIComponent 区别

  	不编码字符	范围
  encodeURI	1. ASCII字母 2. 数字 3. ~!@#$&*()=:/,;?+'	编码范围小于 encodeURIComponent
  encodeURIComponent	1. ASCII字母 2. 数字 3. ~!*()'	-

• 编码原因：
  对 URL 来说，之所以要进行编码，是因为 URI 中有些字符会引起歧义，例如键值对的值中字符串包含 = 或 &
  URL编码的原则就是使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符

• 另外，你还清楚 URI 与 URL 分别是什么吗？
  URI 是统一资源标识符，而 URL 是统一资源定位符。因此，笼统地说，每个 URL 都是 URI，但不一定每个 URI 都是 URL

---

补全如下函数，判断用户的浏览器类型

function isAndroid(){
  return navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1
}
function isIphone(){
  return navigator.userAgent.indexOf('iPhone') > -1
}
function isIpad(){
  return navigator.userAgent.indexOf('iPad') > -1
}
function isIOS(){
  return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
}

---

小结

• 函数都是“自私”的，除非通过 return 关键字，否则外界无法访问到函数的变量，而且就算 return 关键字将变量返回，外界也只能是“可远观而不可亵玩焉”

  （变量是朕的，朕不给，你不能抢；就算朕给你看，你也不能胡来，要听朕的话@_@）

  正是由于函数的这一特性，ES5 才能通过函数来实现块级作用域，if () {}、for () {}，如果为了美观，大可用 {} 将编写的代码包裹起来，但要记住，这些花括号 {} 在 ES5 中都不会形成块级作用域，函数的花括号 {} 形成的函数作用域才是“封闭”的

  ES6 中 单纯使用 {} 会形成块级作用域