这次主要用例子解释一下什么是作用域, 什么是自由变量, 什么是闭包, 因为用一句话概括实在是概括不出来, 欢迎有大神可以一句话解释的在评论区评论一下, 十分感谢.
1. 说一下变量提升的理解
以下两种情况下会进行变量提示
变量定义
函数申明 (要区分函数表达式和函数申明)
2. 说明 this 几种不同的使用场景
在构造函数中使用
作为对象属性时使用
作为普通函数时使用
- call,apply,bind
- var a = {
- name: 'A',
- fun: function() {
- console.log(this.name);
- }
- };
- a.fun(); //this === a
- a.fun.call({ name: 'B' }); //this === { name: 'B' }
- var fun1 = a.fun;
- fun1(); //this === window
3. 创建 10 个 a 标签, 点击每个弹出对应的序号
错误的例子:
- // 在点击 a 标签时每个输出的都是 10
- var i, a;
- for (i = 0; i <10; i++) {
- a = document.createElement('a');
- a.innerhtml = i + '<br>';
- a.addEventListener('click', function(e) {
- e.preventDefault();
- alert(i); // 自由变量, 会从父元素找 i, 点击时, 其实 i 已经执行完变成了 10
- });
- document.body.appendChild(a);
- }
使用闭包改进的例子:
当然, 在 ES6 中可以使用 let
- var i;
- for (i = 0; i <10; i++) {
- (function(i) {
- // 函数作用域
- var a = document.createElement('a');
- a.innerHTML = i + '<br>';
- a.addEventListener('click', function(e) {
- e.preventDefault();
- alert(i);
- });
- document.body.appendChild(a);
- })(i);
- }
4. 如何理解作用域
自由变量
作用域链, 及自由变量的查找, 找不到逐级向上找
闭包的两个场景:
3.1 函数作为变量传递
3.2. 函数作为返回值
5. 实际开发中闭包的应用
- // 判断一个数字是否出现过
- function isFirst() {
- var _list = [];
- return function(id) {
- if (_list.indexOf(id)>= 0) {
- return false;
- } else {
- _list.push(id);
- return true;
- }
- };
- }
- var first = isFirst();
- first(10);
- first(10);
- first(20);
来源: http://www.jianshu.com/p/88d8879592ac