弁言：当明白了对象和函数的基本观点，你能够会发明，在JavaScript中有很多原以为天经地义（或自觉接收）的事变最先变得更有意义了。

1.JavaScript对象

大多数面向对象（简称OO）言语都定义了某种基本的Object对象范例，别的一切的对象都源于这个对象范例。

JavaScript的基本对象也是作为别的对象的基本，然则从基本层面上来看，JavaScript的Object对象与别的大部分的OO言语所定义的基本对象很差别。

对象一旦被竖立后，它不保留任何数据而且险些没有什么语义。然则这些有限的语义确实又赋予了它很大的潜力。

新的对象由new操纵符和与其相配的Object组织器来发生。竖立一个对象异常简朴：

var shinyAndNew = new Object();    // 还能够更简朴

这个新对象能做什么？好像什么也没有——没有信息，没有庞杂的语义，什么也没有，一点也不吸引人，直到我们最先向其增加称为 属性 的东西。

JavaScript Object的实例（即：对象）就是一组属性集，每一个属性都由称号和值构成。属性的称号是字符串，属性值能够是任何JavaScript对象，能够是Number、String、Date、Array、基本的Object，也能够是任何别的的JavaScript对象范例（比方函数）。

这意味着Object实例的主要就是用作容器，包含别的对象的已定名鸠合。进一步，一个对象属性能够是另一个Object实例，这个实例又包含别的本身的属性集，而属性集也能够包含具有属性的对象，以此类推。只要对我们塑造的数据模型有意义，就能够嵌套至任何条理。

举个栗子：
假设给一辆车（car）增加一个新的属性以保留车辆的一切者(owner)信息。这个属性是另一个JavaScript对象，它包含了一些属性，如一切者姓名和职业：

var owner = new Object();
owner.name = 'Roger Shieh';
owner.occupation = 'Coder';
car.owner = owner;

为了接见嵌套的属性，我们能够编写以下代码：

var ownerName = car.owner.name;

提醒：出于诠释的目标而竖立的一切中心变量都是能够省略的（比方owner）。因而，我们能够应用这一点来运用越发高效和简约的体式格局来声明对象及其属性的代码。

我们运用点操纵符（英文的句号字符）来援用对象的属性。然则事实证明，有一个越发通用的操纵符来实行属性的援用。

通用的属性援用操纵符的花样：

object[propertyNameExpression]

个中propertyNameExpression是JavaScript表达式，其求值的效果作为要援用的属性称号的字符串。

比方，下面的3个援用都是等价的：

car.color    // 第1种
car['color']    // 第2种
car['c'+'o'+'l'+'o'+'r']    // 第3种
var p = 'color'; car[p]    // 第4种

关于其称号并不是有用的JavaScript标识符的属性来讲，运用通用的援用操纵符是援用这类属性的唯一要领，比方：

car["a property name that's rather odd!"]

我们经由过程new操纵符来竖立新的实例，而且应用自力的赋值语句来为每一个属性赋值从而竖立对象，这看起来是一件烦琐的事变。而且，如许做既索然无味，又冗杂易错，难以在疾速搜检代码的时刻把握对象的构造。

荣幸的是，我们能够运用更紧凑和更易于浏览的示意法。参考以下语句：

var car = {
    make:'Ford',
    year:2014,
    purchased:new Date(2014,12,3),
    owner:{
        name:'Roger Shieh',
        occupation:'Coder'
    }
};

这类示意法被称为 JSON（JavaScript Object Notaition，JavaScript对象示意法）。大多数页面开发者对JSON的偏幸有加，不喜欢经由过程多个赋值语句来竖立对象的体式格局。

至此，我们看到了两种保留JavaScript对象的体式格局：变量和属性。

这两种保留援用的体式格局运用差别的示意法，以下所示：

var aVariable = 'Before I teamed up with you, I led quite a normal life.';

someObject.aProperty = 'You move that line as you see fit for yourself.';

事实上，这个两个语句在实行雷同的操纵。

任安在顶层作用域中天生的援用都隐式地竖立在window实例中。

比以下面的语句，假如是在顶层中（也就是在函数的作用域以外）天生的，那末它们都是等价的：

var foo = bar;

window.foo = bar;

foo = bar;

不论运用的是哪一种示意法，都邑竖立一个名为foo的window属性（假如foo属性还没有存在），而且将bar赋值给foo。还要注重，由于bar黑白限制的，所以将其假定为window的一个属性。

把顶层作用域认为是window作用域，这能够不会让我们堕入观点上的懊恼，由于任何位于顶层的未限制的援用都被假定为window的属性。

主要观点总结以下：

• JavaScript对象是属性的无序鸠合；
• 属性由称号和值构成；
• 能够运用字面值来声明对象；
• 顶层变量是window的属性。

2.作为一等国民的函数

当我们谈到JavaScript函数是一等对象时，意味着什么？

在很多传统的OO言语中，对象能够包含数据，还能够具有要领。在这些言语中，数据和要领一般是差别的观点。

JavaScript可不是如许子。

JavaScript中的函数也被认为是对象，与定义在JavaScript中任何别的的对象范例一样，比方String、Number或Date。

和别的对象一样，函数也是经由过程JavaScript组织器来定义的（在这类情况下是Function），能够对函数举行以下操纵：

• 把函数赋值给变量；
• 将函数指定为一个对象的属性；
• 把函数作为参数通报；
• 把函数作为函数效果返回；
• 运用字面值来竖立函数。

由于在JavaScript言语中看待函数的体式格局与看待别的对象的体式格局雷同，所以我们说函数是一等对象。

与对象的别的实例（比方String、Date或Number）一样，只要在把函数赋值给变量、属性或参数的时刻，函数才被援用。

我们常常经由过程字面值示意法来示意Number实例，比方下面的语句：

213;

完整有用，但同时完整无用。Number实例用途不大，除非将其赋值给属性或对象，或许将其绑定到参数称号上。不然，我们没法援用散落在内存中的实例。

一样的划定规矩也适用于Function对象的实例。

思索下面的代码：

// 这不是竖立了名为doSomethingWonderful的函数吗？
function doSomethingWonderful(){
    alert('does something wonderful'); 
}

只管这类示意法能够看起来很熟悉，而且被普遍用来竖立顶层函数，但它与经由过程var来竖立window属性运用的是雷同的语法。

function关键字自动竖立一个Function实例并将其赋值给运用函数“称号”竖立的window属性，以下所示：

doSomethingWonderful = function(){
    alert('does something wonderful');
}

假如看起来以为新鲜，斟酌另一个运用完整雷同情势的语句，但这次运用Number的字面值：

aWonderfulNumber = 213;

这个语句屡见不鲜，它与把函数赋值给顶层变量（window属性）的语句千篇一律。

函数字面值示意法：由关键字function与紧接着的被圆括号所包含的参数列表，以及随后的函数主体所构成。

记着，在HTML页面中竖立了顶层变量时，会将变量竖立为window实例的属性。因而，下面的语句都是等价的：

function hello(){alert("wow!");}

hello = function(){alert("wow!");}

window.hello = function(){alert("wow!")}

明白这一点很主要：和别的对象范例的实例一样，Function实例能够赋值给变量、属性或参数的值。而且就像别的的那些对象范例，无称号无实体的实例毫无用途，只要将它们赋值给变量、属性或参数，如许才援用它们。

2.1 作为回调的函数。

function hello(){alert('Hey,guy!');}

setTimeout(hello, 5000);

当计时器逾期时，hello函数会被挪用。由于在代码中setTimeout()要领回调了一个函数，所以该函数被称为回调函数。

大部分高等JavaScript程序员能够会以为这段代码示例很稚子，由于没有必要竖立hello称号。除非要在页面的别的处所挪用此函数，不然没有必要竖立window的属性hello来临时存储Function实例，以便将hello作为回调参数来通报。

所以，编写这个片断更简约的体式格局是：

setTimeout(function(){alert('Hey,guy!')},5000);

目前为止，示例中所竖立额函数要么是顶层函数（也就是顶层的window属性），要么是在函数挪用中被赋值给参数。我们也能够将Function实例赋值给对象的属性，此时事变才真正变得风趣起来。

2.2 this究竟是什么

OO言语自动供应了从要领中援用对象当前实例的方法。在Java和C++如许的言语中，this参数指向当前实例。

JavaScript完成中的this和别的OO言语中的this的差别体如今几个主要的方面。

在JavaScript中函数是一等对象，它们不被声明为任何东西的一部分，而this所援用的对象（称为函数上下文）并不是由声明函数的体式格局决议的，而是由挪用函数的体式格局决议的。

在默许情况下，函数挪用的上下文（this）是对象，其属性包含用于挪用该函数的援用。

顶层函数是window的属性，因而当将其作为顶层函数来挪用时，其函数上下文就是window对象。

只管这多是罕见的隐式行动，然则JavaScript供应的方法能够显式地掌握函数上下文设置为任何想要的内容。经由过程Function的要领call()或apply()来挪用函数，就能够将函数上下文设置为任何想要的内容（是的，作为一等对象，函数以至具有Function组织器定义的那些要领）。

提醒：运用call()要领来挪用函数，指定第一个参数作为函数上下文的对象，而其他参数称为被挪用函数的参数；apply要领的工作体式格局与此相似，差别的是，它的第二个参数应当成为被挪用函数参数的对象数组。

下面的代码将申明函数上下文的值取决于挪用函数的体式格局：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>What's this</title>
    <script>
        var o1 = {handle:'o1'};
        var o2 = {handle:'o2'};
        var o3 = {handle:'o3'};
        window.handle = 'window';

        function whoAmI(){
            return this.handle;
        }
        o1.identifyMe = whoAmI;

        alert(whoAmI());    // 返回window
        alert(o1.identifyMe());    // 返回o1
        alert(whoAmI.call(o2));    // 返回o2
        alert(whoAmI.apply(o3));   // 返回o3
    </script>
</head>
<body>
</body>
</html>

从上面的示例页面表清楚明了：函数上下文是基于每一个挪用来决议的，能够运用任何对象作为函数上下文来挪用单个函数。因而，“函数是对象的要领”这个说法是相对不正确的。

更加正确的表述应当为：

当对象o充任函数f的挪用函数上下文时，函数f就充任了对象o的要领。

既然已明白了函数怎样充任对象的要领，下面就来把注重力转移到另一个高等的函数话题——闭包。

2.3 闭包

闭包就是Function实例，它连系了来自环境的（函数实行所必须的）局部变量。

在声明函数时，能够在声明函数时援用函数作用域内任何变量。关于任何有手艺背景的开发者来讲，这是天经地义的事变。然则运用闭包时，纵然在函数声明今后，已超越函数作用域（也就是封闭了函数声明）的情况下，该函数依然带有这些变量。

浏览下面的栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Closure Example</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            var local = 1;
            window.setInterval(function(){
                $('#display').append('<div>At '+new Date()+' laocal= '+local+'</div>');
                local++;
            }, 3000);
        });
    </script>
</head>
<body>
    <div id="display"></div>
</body>
</html>

在运转这个页面时，假如我们不熟悉闭包去检察这段代码，我们会以为有点题目，能够会猜想：由于回调会在页面加载后3秒触发（在停当处置惩罚器实行终了良久今后），所以local的值在回调函数的实行时期是未定义的。毕竟，local声明地点的块在停当处置惩罚器实行终了时超越了作用域，对吧？

但是，当我们运转时发明它能一般运转！

闭包许可回调接见环境中的值，纵然该环境已超越了作用域。

当停当处置惩罚器实行终了，local声明地点的块超越了作用域，然则函数声明所竖立的闭包（包含local变量）在函数的生命周期内都保持在作用域中。

注重：在JavaScript中的闭包，其竖立体式格局都是隐式的，而不像别的一些支撑闭包的言语那样须要显现的语法。这是一把双刃剑，一方面使得竖立闭包很轻易，但另一个方面这使得很难在代码中发明闭包。

无意竖立的闭包能够会带来意料以外的效果。比方，轮回援用能够致使内存泄漏。内存泄漏的典范示例就是竖立后援用闭包中变量的DOM元素，这会阻挠那些变量的接纳。

闭包的另一主要特性是：函数上下文毫不会被包含为闭包的一部分。

浏览下面这段代码：

this.id = `someID`;
$('*').each(function(){
    alert(this id);
});    // 这段代码不会根据我们希冀的体式格局实行

假如须要接见在外部函数中作为函数上下文的对象，能够采纳一般的习惯用法：在局部变量中竖立this援用的副本，这个副本将会被包含在闭包中。

因而，斟酌以下转变：

this.id = 'someID';
var outer = this;
$('*').each(function(){
    alert(this id);
});

局部变量outer被赋值为外部函数的函数上下文的援用，从而成为闭包的一部分，能够在回调函数中接见此变量。转变后的代码如今会弹出显现字符串someID,包装集（$('*')）中有多少个元素就弹出多少次。

当运用jQuery敕令（这些敕令应用异步的回调函数）来竖立文雅的代码时，我们将会发明闭包是必不可少的，尤其是在Ajax请乞降事宜处置惩罚范畴。

参考资料

• jQuery实战（第2版）