windows域（域、模块、空间、闭包）

变量对象

变量对象，也叫活动对象，包含所有像变量、函数、其它被定义在执行上下文一个分支的声明。当函数被调用 时，编译器会扫描它，包括它的参数，变量和其它声明。所有东西，当被打包给一个单对象，就变成了一个变量对象。

'variableObject': { // contains function arguments, inner variable and function declarations }

域链

在执行上下文的创建阶段，域链是在变量对象之后被创建。域自己本身包含变量对象。域链就是来解决变量问题的。当执行遇到一个变量时，Javascript总是从最底层的代码层级块中查找，如果没有，则继续跳到父域中去查找直到找到该变量，这仅是查找变量，查找其它资源也是这个套路。域链能被简单的定义为一个包含变量对象的对象，且拥有自己的执行上下文和其它父执行上下文，一个对象拥有一打其它对象。

'scopeChain': { // contains its own variable object and other variable objects of the parent execution contexts}

执行上下文对象

执行上下文能被表示为一个抽象的对象：

executionContextObject = { 'scopeChain': {}, // contains its own variableObject and other variableObject of the parent execution contexts 'variableObject': {}, // contains function arguments, inner variable and function declarations 'this': valueOfThis }

代码执行阶段

执行上下文的第二个阶段，是代码执行阶段，从值被分配，到代码最后被执行。

作用域

作用域是指，有一组嵌套函数，内部函数拥有访问父域变量的其它资源的权限。这就是说子函数的作用域被绑到了父的执行上下文上。作用域有时也被当作静态域。

function grandfather() { var name = 'Hammad'; // likes is not accessible here function parent() { // name is accessible here // likes is not accessible here function child() { // Innermost level of the scope chain // name is also accessible here var likes = 'Coding'; } } }

你注意到作用域是向前工作，上面代码中的name变量能被子的执行上下文访问。不过它不能反向提供给父级，意思是上面的变量likes不能被父函数访问。这也告诉我们变量在不同的执行上下文中若有同样的名字，获取它们的优先级是根据执行栈自上而下的。一个变量，和另一个变量有相似的名字，在最里面的函数（执行栈的最高上下文）有更高的优先级。

闭包

闭包的概念跟作用域很接近。当一个内部的函数试图访问外部函数在即时作用域中的变量，一个闭包就产生了。一个闭包包含两个自己的域链，父级的和全局域。

闭包既能访问外部函数的变量，又能访问外部函数的参数。

一个闭包即使在函数已经返回值的情况下依旧可以访问外部函数中的变量。这就允许返回的函数维持对外部函数的资源的权限。

当你调用一个函数时返回一个内函数，这个返回的函数在调用外部函数时不会被调用。你必须把调用函数的结果赋给一个变量，然后将该变量当作函数执行。看下例子：

function greet() { name = 'Hammad'; return function () { console.log('Hi ' + name); } } greet(); // nothing happens, no errors // the returned function from greet() gets saved in greetLetter greetLetter = greet(); // calling greetLetter calls the returned function from the greet() functiongreetLetter(); // logs 'Hi Hammad'

关键的信息是函数greetLetter能访问函数greet的变量，即使它已经返回了结果。执行返回函数greet的方法有定义的变量后面加括号（）,或者函数本身加双括号（）（）：

function greet() { name = 'Hammad'; return function () { console.log('Hi ' + name); } } greet()(); // logs 'Hi Hammad'

公共域和私有域

在许多其它编程语言中，你能通过设置public, private和protected属性给类的方法来标识哪种级别的域可以访问。如下面PHP的例子：

// Public Scope public $property; public function method() { // ...} // Private Sccpe private $property; private function method() { // ...} // Protected Scope protected $property; protected function method() { // ...}

在全局域上封装函数是易受攻击的。但在Javascript中没有public,private等关键字来标识域。然而，我们可以用闭包来仿造这种特性。把所有东西与全局域分开，我们必须用下面的方式来封装我们的函数：

(function () { // 私人领地 })();

后面的括号是函数告诉编译器，请立即执行我。我们可以添加函数和变量在里面，他们在外部是没法被访问的。万一我们想在外面访问怎么办？这就要标明它们哪些部分是私有的，哪些部分是公用的。闭包的一个类型，我们就用到了，叫做模块模式，它允许我们在一个对象中定义公有和私有域。

模块模式

看起来如下：

var Module = (function() { function privateMethod() { // do something } return { publicMethod: function() { // can call privateMethod(); } }; })();

返回的模块声明包含我们的公共函数。私有函数不会返回。没有返回的函数在模块命名空间外是访问不到的。不过我们的公共函数就能访问私有函数，这就很便捷了，对于帮助函数，Ajax调用和其它东西。

Module.publicMethod(); // works Module.privateMethod(); // Uncaught ReferenceError: privateMethod is not defined

共识的写法是私有函数名字前面都加上下划线，公用函数放在一个匿名对象中返回。这使得一个长的对象容易维护。像下面这样写：

var Module = (function () { function _privateMethod() { // do something } function publicMethod() { // do something } return { publicMethod: publicMethod, } })();

即执行函数表达式（IIFE）

闭包的另一种类型是即执行函数。这是个在window对象的上下文中自我调用的匿名函数，this值赋给window。这就暴露出一个单全局接口。如下：

(function(window) { // do anything })(this);

用.call(),.apply()和.bind()方法改变上下文

调用函数时，Call和Apply函数用来改变上下文。这特性赋予你难以置信的编程能力。用call和apply函数，你只需用该函数代替函数的括号，然后将上下文作为参数传进去。函数自身的参数可以放在context参数后面传过去。

function hello() { // do something... } hello(); // the way you usually call it hello.call(context); // here you can pass the context(value of this) as the first argument hello.apply(context); // here you can pass the context(value of this) as the first argument

.call()和.apply()的不同点在于前者传的参数是直接逗号隔开，后者允许传一个参数数组。

function introduce(name, interest) { console.log('Hi! I'm '+ name +' and I like '+ interest +'.'); console.log('The value of this is '+ this +'.') } introduce('Hammad', 'Coding'); // the way you usually call it introduce.call(window, 'Batman', 'to save Gotham'); // pass the arguments one by one after the contextt introduce.apply('Hi', ['Bruce Wayne', 'businesses']); // pass the arguments in an array after the context // Output:// Hi! I'm Hammad and I like Coding. // The value of this is [object Window]. // Hi! I'm Batman and I like to save Gotham. // The value of this is [object Window]. // Hi! I'm Bruce Wayne and I like businesses. // The value of this is Hi.

注意：Call比Apply轻，运行的快。

下面的是一个列表文档，然后在控制台一项一项的日志打出来：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Things to learn</title></head><body> <h1>Things to Learn to Rule the World</h1> <ul> <li>Learn PHP</li> <li>Learn Laravel</li> <li>Learn JavaScript</li> <li>Learn VueJS</li> <li>Learn CLI</li> <li>Learn Git</li> <li>Learn Astral Projection</li> </ul> <script> // Saves a NodeList of all list items on the page in listItems var listItems = document.querySelectorAll('ul li'); // Loops through each of the Node in the listItems NodeList and logs its content for (var i = 0; i < listItems.length; i++) { (function () { console.log(this.innerHTML); }).call(listItems[i]); } // Output logs: // Learn PHP // Learn Laravel // Learn JavaScript // Learn VueJS // Learn CLI // Learn Git // Learn Astral Projection </script> </body> </html>

HTML只包含一个列表项。Javascript选取出他们的dom并循环，在循环内部，我们把列表项里的内容在控制台打印出来。

日志打印的方法被包在一个括号中，然后调用call函数。把响应的列表项作为参数给call以保证打印日志的方法在dom的正确对象上执行。

对象可以有方法，同时函数作为对象的一种也可以有方法。实际上，一个Javascript函数创建时有三个内置方法：