《你不知道的JavaScript》梗概

作用域和闭包

作用域是什么

编译原理

• 分词/词法分析
例：var a = 2;对这段代码进行词法分析，通常会分解成var a = 2 ;。

• 解析/语法分析
生成“抽象语法树（Abstract Syntax Tree, AST）”

• 代码生成
通过AST编译成一组机器指令

理解作用域

• 引擎
从头到尾负责整个JavaScript程序的编译及执行过程。

• 编译器
引擎的好朋友之一，负责语法分析及代码生成等脏活累活（详见前一节的内容）。

• 作用域
引擎的另一位好朋友，负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。

function foo(a) {
  console.log( a ); // 2
}

foo( 2 );

“引擎：我说作用域，我需要为foo进行RHS引用。你见过它吗？ 作用域：别说，我还真见过，编译器那小子刚刚声明了它。它是一个函数，给你。 引擎：哥们太够意思了！好吧，我来执行一下foo。 引擎：作用域，还有个事儿。我需要为a进行LHS引用，这个你见过吗？ 作用域：这个也见过，编译器最近把它声名为foo的一个形式参数了，拿去吧。 引擎：大恩不言谢，你总是这么棒。现在我要把2赋值给a。 引擎：哥们，不好意思又来打扰你。我要为console进行RHS引用，你见过它吗？ 作用域：咱俩谁跟谁啊，再说我就是干这个的。这个我也有，console是个内置对象。给你。 引擎：么么哒。我得看看这里面是不是有log(..)。太好了，找到了，是一个函数。 引擎：哥们，能帮我再找一下对a的RHS引用吗？虽然[…]”

摘录来自: Kyle Simpson、赵望野、梁杰. “你不知道的JavaScript（上卷）”。 iBooks.

作用域嵌套

异常

小结

首先，var a 在其作用域中声明新变量。这会在最开始的阶段，也就是代码执行前进行。接下来，a = 2会查询（LHS查询）变量a并对其进行赋值。

摘录来自: Kyle Simpson、赵望野、梁杰. “你不知道的JavaScript（上卷）”。 iBooks.

词法作用域

词法阶段

全局变量会自动成为全局对象（比如浏览器中的window对象）的属性。

var a = 1;

function fun1() {
  var a = 2;
  console.log(a)//输出2
}

function fun2() {
  var a = 2;
  console.log(window.a)//输出1
}

• JavaScript全局对象——W3C

• JavaScript声明全局变量三种方式的异同

欺骗词法

• eval
可以对一段包含一个或多个声明的“代码”字符串进行演算，并借此来修改已经存在的词法作用域（在运行时）。

• with
本质上是通过将一个对象的引用当作作用域来处理，将对象的属性当作作用域中的标识符来处理，从而创建了一个新的词法作用域（同样是在运行时）

函数作用域和块作用域

• 每一个函数都会创建一个自己的作用域，如果你在该作用域中声明了变量，且该变量存在于外部作用域，那么它会遮蔽外部作用域中的变量。

• 为了不污染全局作用域，可以将代码写入一个匿名函数中调用

	var a = 2;

	(function() {
	  var a = 3;
	  console.log( a ); // 3
	})();

	console.log( a ); // 2

• 变量声明应该距离使用的地方越近越好，并最大限度的本地化

• let

	{
	  let a = 10;
	  var b = 1;
	}

	a // ReferenceError: a is not defined.
	b // 1

• const

	var foo = true;

	if (foo) {
	  var a = 2;
	  const b = 3; // 包含在if中的块作用域常量
	  a = 3; // 正常!
	  b = 4; // 错误!
	}

	console.log( a ); // 3
	console.log( b ); // ReferenceError!

this和对象原型

第一章 关于this

为什么要用this

全面解析

调用位置

function baz(){
  //当前调用栈是：baz
  //因此当前调用位置是全局作用域
  console.log("baz");
  bar();//<--bar的调用位置
}
function bar() {
  // 当前调用栈是baz -> bar
  // 因此，当前调用位置在baz中
  console.log( "bar" );
  foo(); // <-- foo的调用位置
}

function foo() {
  // 当前调用栈是baz -> bar -> foo
  // 因此，当前调用位置在bar中
  console.log( "foo" );
}

baz(); // <-- baz的调用位置

绑定规则

默认绑定

function foo(){
  console.log(this.a);
}

var a = 1;

foo();

function foo(){
  console.log(this.a);
}

var a =2;

(function(){
  "use strict";

  foo();//2
})()

function foo(){
  "use strict";

  console.log(this.a);
}

var a = 1;

foo();//TypeError:this is undefined

隐式绑定

function foo(){
  console.log(this.a);
}

var obj = {
  a:2,
  foo:foo
};

obj.foo();//2

function foo(){
  console.log(this.a);
}

var obj = {
  a:2,
  foo:foo
};

var bar = obj.foo;//函数别名

var a = "oops,global";//a是全局对象的属性

bar();//"oops,global"

显示绑定

function foo(){
  console.log(this.a);
}

var obj = {
  a:2
};

foo.call(obj);//2

function foo(something) {
  console.log( this.a, something );
  return this.a + something;
}

var obj = {
  a:2
};

var bar = function() {
  return foo.apply( obj, arguments );
};

var b = bar( 3 ); // 2 3
console.log( b ); // 5

function foo(something){
  console.log(this.a,something);
  return this.a + something;
}

var obj = {
  a:2
};

var bar = foo.bind(obj);

var b = bar(3);//2 3
console.log(b);//5

• Function.apply(obj,args)
obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args-->arguments）

• Function.call(obj,param_1,param_2,...,param_n)
需要把参数按顺序传递进去

new绑定

function foo(a){
  this.a = a;
}

var bar = new foo(2);

console.log(bar.a);//2

优先级

	var bar = new foo();

	var bar = foo.call(obj2);

	var bar = obj1.foo();

	var bar = foo();

对象

类型

• string

• number

• boolean

• null

• undefined

• object

• String

• Number

• Boolean

• Object

• Function

• Array

• Date

• RegExp

• Error

var strPrimitive = "I am a string"
typeof strPrimitive;//"string"
strPrimitive instanceof String;//false

var strObject = new String("I am a string");
typeof strObject;//"object"
strObject instanceof String;//true

//检查sub-type对象
Object.prototype.toString.call(strObject);//[object String]

内容

• 通过.操作符，通常叫做属性访问

• 通过[key]访问，通常叫做键访问

var myObject = {
  a:2
};

var idx = "a";

console.log(myObject[idx]);//2

var myObject = {};

myObject[true] = "foo";
myObject[3] = "bar";
myObject[myObject] = "baz";

myObject["true"];//"foo"
myObject["3"];//"bar"
myObject["[object Object]"];//"baz"

可计算属性名

var prefix = "foo";

var myObject = {
  [prefix + "bar"]:"hello",
  [prefix + "baz"]:"world"
};

myObject["foobar"];//hello
myObject["foobaz"];//world

复制对象

var newObj = JSON.parse(JSON.stringify(someObj));

属性描述符

var myObject = {
  a:2
};

Object.getOwnPropertyDescriptor(myObject,"a");

//{
//  value:2,
//  writable:true,
//  enumerable:true,
//  configurable:true
//}

1. Writable
这个属性决定了是否可以修改属性的值。

var myObject = {};

Object.defineProperty( myObject, "a", {
value: 2,
writable: false, // not writable!
configurable: true,
enumerable: true
});

myObject.a = 3;

myObject.a; // 2

我们对属性值的修改静默失败。如果在严格模式下，这种方式会抛出TypeError来表示我们无法修改一个不可写的属性。

2. Configurable
只要属性是可配置的（Configurable），就可以用defineProperty(..)方法来修改属性描述符。如果该属性为false那么将无法使用defineProperty(..)方法，而且这个值的设置是单向的。因为一旦修改它为false那么就无法撤销！而且还会禁止删除这个属性，delete语句会对它静默失败。（delete myObject.a）

3. Enumerable

fot (var k in myObject){
  console.log(k,myObject[k]);
} //输出所有可以被枚举的属性

不变性

var myObject = {
  a:2
};

Object.preventExtensions(myObject);

myObject.b = 3;
myObject.b; //undefined

Getter和Setter

var myObject = {
  get a(){
    return this._a_;
  },
  set a(val){
    this._a_ = val*2;
  }
};

Object.defineProperty(
  myObject,
  "b",
  {
    get:function() {
      return this.a*2;
    },
    enumerable:true
  }
);

myObject.a= 4;

console.log(myObject.a);//8
console.log(myObject.b);//16

存在性

var myObject = {
  a:2
};

("a" in myObject);//true
("b" in myObject);//false

myObject.hasOwnProperty("a");//true
myObject.hasOwnProperty("b");//false

遍历

var arr = [1,2,3,4,5];

• forEach(..)
遍历数组中所有的值，并忽略回调函数的返回值。

	arr.forEach(function(e) {
    console.log(e);//1,2,3,4,5
	});

• every(..)
一直运行直到回调函数返回false

	arr.every(function(e) {
    console.log(e);//1,2,3
    if (e == 3) {
      return false;
    }
	});

• some(..)
一直运行直到回调函数返回ture

	arr.some(function(e) {
	  console.log(e);//1,2,3
	  if( e==3){
	    return true;
	  }
	});

• for..in
这种遍历方式无法直接获取属性值，因为它实际上遍历的是对象中所有可枚举的属性。当它用在数组上的时候，会返回数组的下标。 我们先来看对于对象属性的访问：

	var foo = {
	  a:1,
	  b:2,
	  c:3,
	  d:4
	};
	for (var key in foo) {
	  if (foo.hasOwnProperty(key)) {
	    console.log(key);//a,b,c,d
	  }
	}

	var arr = [1,2,3,4,5];
	for (var key in arr) {
	  console.log(key);//0,1,2,3,4
	}

• for..of

	var arr = [1,2,3,4,5];

	for(var v of arr){
		console.log(v);//1,2,3,4,5
	}

	var myArray = [1,2,3];
	var it = myArray[Symbol.iterator]();
	it.next();//{value:1,done:false}
	it.next();//{value:2,done:false}
	it.next();//{value:3,done:false}
	it.next();//{value:undefined,done:true}

	var myObject = {
	    a: 2,
	    b: 3
	};

	Object.defineProperty( myObject, Symbol.iterator, {
	    enumerable: false,
	    writable: false,
	    configurable: true,
	    value: function() {
	        var o = this;
	        var idx = 0;
	        var ks = Object.keys( o );//['a','b']
	        return {
	            next: function() {
	                return {
	                    value: o[ks[idx++]],
	                    done: (idx > ks.length)
	                };
	            }
	        };
	    }
	} );

	//console.log(Object.keys(myObject));//['a','b']

	// 手动遍历myObject
	var it = myObject[Symbol.iterator]();
	it.next(); // { value:2, done:false }
	it.next(); // { value:3, done:false }
	it.next(); // { value:undefined, done:true }

	// 用for..of遍历myObject
	for (var v of myObject) {
	    console.log( v );//2,3
	}

	var myObject = {
	    a: 2,
	    b: 3,
	    [Symbol.iterator]:function() {
	      var o = this;
	      var idx = 0;
	      var ks = Object.keys( o );//['a','b']
	      return {
	          next: function() {
	              return {
	                  value: o[ks[idx++]],
	                  done: (idx > ks.length)
	              };
	          }
	      };
	    }
	};

提升

编译器再度来袭

foo();
function foo(){
  console.log(a);//undefined
  var a =2;
}

function foo(){
  var a;
  console.log(a);
  a = 2;
}
foo();

foo();//TypeError!
bar();//ReferenceError!
var foo = function bar(){
  //...
}

var foo;

foo();
bar();

foo = function(){
  var bar = ..self..
}

函数优先

foo();//1

var foo;

function foo() {
  console.log('1');
}

foo = function() {
  console.log('2');
}

foo();//2

function foo() {
  console.log(1);
}

foo();//1

foo = function() {
  console.log(2);
}

foo();//2

foo();//3
function foo() {
  consloe.log(1);
}
var foo = function() {
  console.log(2);
}
function foo() {
  console.log(3);
}

function foo() {
  a = 1;
}
foo();
console.log(a);//1

function foo() {
  var a = 1;
}
foo();
console.log(a);//ReferenceError

小结

作用域闭包

实质问题

当函数可以记住并访问所在词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

function foo(){
  var a = 2;

  function bar(){
    console.log(a);//2
  }

  return bar;
}
var baz = foo();
baz();//2  这就是闭包的效果

循环和闭包

for(var i = 1;i<=5;i++) {
  setTimeout(function timer() {
    console.log(i);
  }, i*1000);
}

for(var i = 1; i<=5; i++) {
  (function(j) {
    setTimeout(function timer() {
      console.log(j);
    }, j*1000);
  })(i)
}

IIFE:立即执行函数表达式 (function(){...})()

题外话

var isEnd = true;

window.setTimeout(function () {
  isEnd = false;//1s后，改变isEnd的值
}, 1000);

//这个while永远的占用了js线程，所以setTimeout里面的函数永远不会执行
while (isEnd);

//alert也永远不会弹出
alert('end');

模块

function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];

    function doSomething() {
        console.log( something );
    }

    function doAnother() {
        console.log( another.join( " ! " ) );
    }

    return {
        doSomething: doSomething,
        doAnother: doAnother
    };
}
var foo = CoolModule();

foo.doSomething();//cool
foo.doAnother();//1!2!3!

必须有外部的封闭函数，该函数必须至少被调用一次（每次调用都会创建一个新的模块实例）封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并且可以访问或者修改私有的状态。

现代的模块机制

var MyModules = (function Manager() {
    var modules = {};

    function define(name, deps, impl) {
        for (var i=0; i<deps.length; i++) {
            deps[i] = modules[deps[i]];
        }
        modules[name] = impl.apply( impl, deps );
    }

    function get(name) {
        return modules[name];
    }

    return {
        define: define,
        get: get
    };
})();

MyModules.define( "bar", [], function() {
    function hello(who) {
        return "Let me introduce: " + who;
    }

    return {
        hello: hello
    };
} );

MyModules.define( "foo", ["bar"], function(bar) {
    var hungry = "hippo";

    function awesome() {
        console.log( bar.hello( hungry ).toUpperCase() );
    }

    return {
        awesome: awesome
    };
} );

var bar = MyModules.get( "bar" );
var foo = MyModules.get( "foo" );

console.log(bar.hello( "hippo" ));//Let me introduce:hippo
foo.awesome();//LET ME INTRODUCE:HIPPO

未来的模块机制

//bar.js
function hello(who){
	return "Let me introduce:"+who;
}

export hello;

//foo.js
//仅从"bar"模块中导入hello()
import hello from "bar";

var hungry = "hippo";

function awesome(){
	console.log(
		hello(hungry).toUpperCase();
	)
}

export awesome;

//导入完整的"foo"和"bar"模块
module foo from "foo";
module foo from "bar";

console.log(
	hello("rhino").toUpperCase();
)//Let me introduce:rhino

foo.awesome();//LET ME INTRODUCE:RHINO

小结

• 为创建内部作用域而调用了一个包装函数

• 包装函数的返回值必须至少包括一个对内部函数的引用，这样就会创建涵盖整个包装函数内部作用域的闭包。