JavaScript中‘this’关键词的优雅解释-守望者-AIR技术交流

破晓发表于 2016-8-18 16:49:00

JavaScript中‘this’关键词的优雅解释

来源：http://www.zcfy.cc/article/901<div>           http://www.w3cplus.com/javascript/gentle-explanation-of-this-in-javascript.html <div> </div><div><div class="headline" style="margin-bottom: 28px; padding-top: 15px; font-size: 18px; position: relative; color: rgb(51, 51, 51); font-family: "HanHei SC", "PingFang SC", "Lantinghei SC", arial, "Microsoft Yahei", georgia, verdana, helvetica, sans-serif;">原文链接：<a target="_blank" href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/" style="text-decoration: none; color: rgb(74, 197, 206);"> https://rainsoft.io/gentle-explanation-of-this-in-javascript/</a><button class="ui-btn-primary toggle-bilingual-reading normal-spacing" style="outline: 0px; vertical-align: middle; border-style: none none solid; border-bottom-color: rgb(66, 177, 185); cursor: pointer; padding-right: 20px; padding-left: 20px; border-radius: 3px; color: rgb(255, 255, 255); font-size: 14px; height: 30px; line-height: 30px; background: padding-box padding-box rgb(74, 197, 206);">打开双语对照阅读</button></div><div class="editormd-preview-container" id="text-area" data-userid="" data-articleid="901" style="line-height: 1.6; width: 640px; color: rgb(51, 51, 51); font-family: "HanHei SC", "PingFang SC", "Lantinghei SC", arial, "Microsoft Yahei", georgia, verdana, helvetica, sans-serif; overflow: inherit !important;"><div class="markdown-format" style="line-height: 28px;"><div class="translation" style="font-size: 16px;"><h3 id="1-this-" style="margin-bottom: 10px; font-size: 18px;">1. <code style="padding: 2px 5px; font-weight: 400; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>之谜</h3>许多时候，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>关键词对我以及许多刚起步的JavaScript程序员来说，都是一个谜。它是一种很强大的特性，但是理解它需要花不少功夫。对有Java, PHP 或者其他常见的编程语言背景的人来说，<a href="https://en.wikipedia.org/wiki/This_(computer_programming" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></a>)仅仅被看成是类方法中当前对象的一个实例：不会多也不会少。多数时候，它不能在方法外被使用。正是这样一种简单的使用方法，避免了混淆。在JavaScript中，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是当前执行函数的上下文。因为JavaScript有4种不同的函数调用方式：<ul style="margin-bottom: 26px; margin-left: 25px;"><li style="margin-bottom: 8px; margin-left: 0px;">函数调用: <code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">alert('Hello World!')</code></li><li style="margin-bottom: 8px; margin-left: 0px;">方法调用: <code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">console.log('Hello World!')</code></li><li style="margin-bottom: 8px; margin-left: 0px;">构造函数调用: <code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new RegExp('\\d')</code></li><li style="margin-bottom: 8px; margin-left: 0px;">隐式调用: <code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">alert.call(undefined, 'Hello World!')</code></li></ul>并且每种方法都定义了自己的上下文，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>会表现得跟程序员预期的不太一样。同时，<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Strict_mode" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">strict模式</a>也会影响函数执行时的上下文。理解<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>的关键点就是要对函数调用以及它如何影响上下文有个清晰的观点。这篇文章将会着重于对函数调用的解释、函数调用如何影响<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>以及展示确定上下文时常见的陷阱。在开始之前，让我们来熟悉一些术语：<ul style="margin-bottom: 26px; margin-left: 25px;"><li style="margin-bottom: 8px; margin-left: 0px;">函数调用 指执行构成一个函数的代码（简单说就是call一个函数）例如<code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">parseInt('15')</code>是<code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">parseInt</code>函数调用.</li><li style="margin-bottom: 8px; margin-left: 0px;">函数调用的上下文指<code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>在函数体中的值。</li><li style="margin-bottom: 8px; margin-left: 0px;">函数的作用域指的是在函数体内可以使用的变量、对象以及函数的集合。</li></ul>目录:<ol style="margin-bottom: 26px; margin-left: 25px;"><li style="margin-bottom: 8px; margin-left: 0px;"><a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#1themysteryofthis" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>之谜</a></li><li style="margin-bottom: 8px; margin-left: 0px;"><a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#2functioninvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">函数调用</a> 2.1. <a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#21thisinfunctioninvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">函数调用中的<code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></a> 2.2. <a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#22thisinfunctioninvocationstrictmode" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">函数调用中的<code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>，strict模式</a> 2.3. <a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#23pitfallthisinaninnerfunction" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">陷阱: 内部函数中的<code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></a></li><li style="margin-bottom: 8px; margin-left: 0px;"><a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#3methodinvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">方法调用</a> 3.1. <a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#31thisinmethodinvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">方法调用中的<code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></a> 3.2. <a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#32pitfallseparatingmethodfromitsobject" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">陷阱:从object中分离方法</a></li><li style="margin-bottom: 8px; margin-left: 0px;"><a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#4constructorinvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">构造函数调用</a> 4.1. <a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#41thisinconstructorinvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">构造函数中的<code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></a> 4.2. <a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#42pitfallforgettingaboutnew" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">陷阱:忘了<code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new</code></a></li><li style="margin-bottom: 8px; margin-left: 0px;"><a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#5indirectinvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">隐式调用</a> 5.1. <a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#51thisinindirectinvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">隐式调用中的<code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></a></li><li style="margin-bottom: 8px; margin-left: 0px;"><a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#6boundfunction" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">绑定函数</a> 6.1. <a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#61thisinboundfunction" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">绑定函数中的<code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></a></li><li style="margin-bottom: 8px; margin-left: 0px;"><a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#7arrowfunction" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">箭头函数</a> 7.1. <a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#71thisinarrowfunction" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">箭头函数中的<code style="padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></a> 7.2. <a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#72pitfalldefiningmethodwitharrowfunction" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">陷阱: 用箭头函数定义方法</a></li><li style="margin-bottom: 8px; margin-left: 0px;"><a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#8conclusion" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">结论</a></li></ol><h3 id="2-" style="margin-bottom: 10px; font-size: 18px;">2. 函数调用</h3>当一个表达式为函数接着一个<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">(</code>，一些用逗号分隔的参数以及一个<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">）</code>时，函数调用被执行。例如<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">parseInt('18')</code>。这个表达式不能是<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Property_accessors" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">属性访问</a>，如<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myObject.myFunction</code>，因为这会变成一个方法调用。举个例子，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.join(',')</code>不是一个函数调用，而是一个方法调用。一个简单的函数调用例子:<a href="http://jsbin.com/nurawo/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function hello(name) {
return 'Hello ' + name + '!';
}
// Function invocation
var message = hello('World');
console.log(message); // => 'Hello World!'</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">hello('World')</code>是函数调用: <code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">hello</code>表达式等价于一个函数，跟在它后面的是一对括号以及<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">'World'</code>参数。更加高级的例子是<a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">IIFE</a> (立即调用的函数表达式):<a href="http://jsbin.com/zerokov/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">var message = (function(name) {
return 'Hello ' + name + '!';
})('World');
console.log(message) // => 'Hello World!'</code></pre>IIFE也是一个函数调用: 第一对括号<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">(function(name) {...})</code> 是一个等价于函数的表达式, 紧接着一对括号以及<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">'World'</code>参数: <code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">('World')</code>。<h4 id="2-1-this-" style="margin-bottom: 10px;">2.1. 在函数调用中的<code style="padding: 2px 5px; font-weight: 400; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></h4><blockquote style="margin-bottom: 15px; padding-left: 15px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); color: rgb(102, 102, 102); font-size: 14px; font-style: italic;"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code> 在函数调用中是一个全局对象</blockquote>全局对象是由执行的环境决定的。在浏览器里它是<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">window</code></a>对象。在函数调用里，函数执行的上下文是全局对象。让我们一起看看下面函数里的上下文：<a href="http://jsbin.com/raragi/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function sum(a, b) {
console.log(this === window); // => true
this.myNumber = 20; // add 'myNumber' property to global object
return a + b;
}
// sum() is invoked as a function
// this in sum() is a global object (window)
sum(15, 16); // => 31
window.myNumber; // => 20</code></pre>在<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">sum(15, 16)</code>被调用的时候，JavaScript自动设置<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>指向全局对象，也就是浏览器里的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">window</code>。当<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>在所有函数作用域以外(最上层的作用域：全局执行的上下文)调用时，它也指向全局对象：<a href="http://jsbin.com/mijoko/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">console.log(this === window); // => true
this.myString = 'Hello World!';
console.log(window.myString); // => 'Hello World!'</code></pre><a href="http://jsbin.com/lukeda/1/edit?html,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">
<script type="text/javascript"> console.log(this === window); // => true </script></code></pre><h4 id="2-2-this-strict-" style="margin-bottom: 10px;">2.2. 函数调用中的<code style="padding: 2px 5px; font-weight: 400; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>, strict模式</h4><blockquote style="margin-bottom: 15px; padding-left: 15px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); color: rgb(102, 102, 102); font-size: 14px; font-style: italic;">strict模式下，函数调用中的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-weight: 400; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">undefined</code></blockquote>strict模式在<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-10.1.1" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">ECMAScript 5.1</a>中被引入，它是一个受限制的JavaScript变种，提供了更好的安全性以及错误检查。为了使用它，把<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">'use strict'</code>放在函数体的开始。这个模式会影响执行的上下文，把<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>变成<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">undefined</code>。函数执行的上下文跟上面的例子<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#21thisinfunctioninvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">2.1</a>相反，不再是全局对象在strict模式下执行函数的例子:<a href="http://jsbin.com/gubabo/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function multiply(a, b) {
'use strict'; // enable the strict mode
console.log(this === undefined); // => true
return a * b;
}
// multiply() function invocation with strict mode enabled
// this in multiply() is undefined
multiply(2, 5); // => 10</code></pre>当<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">multiply(2, 5)</code>作为函数被调用时，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">undefined</code>。strict模式不仅在当前作用域起作用，也会对内部的作用域起作用(对所有在内部定义的函数有效)：<a href="http://jsbin.com/fatuko/2/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function execute() {
'use strict'; // activate the strict mode
function concat(str1, str2) {
// the strict mode is enabled too
console.log(this === undefined); // => true
return str1 + str2;
}
// concat() is invoked as a function in strict mode
// this in concat() is undefined
concat('Hello', ' World!'); // => "Hello World!"
}
execute();</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">'use strict'</code> 插入在<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">execute</code>函数体的一开始, 使它在<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">execute</code>函数的作用域内起作用。因为<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">concat</code>定义在<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">execute</code>的作用域内, 它也会继承strict模式，这导致调用<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">concat('Hello', ' World!')</code>时， <code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">undefined</code>。单个的JavaScript文件可能既包含strict模式又包含非strict模式。所以，在单个的脚本内，同样的调用方法可能有不同的上下文行为：<a href="http://jsbin.com/gerada/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function nonStrictSum(a, b) {
// non-strict mode
console.log(this === window); // => true
return a + b;
}
function strictSum(a, b) {
'use strict';
// strict mode is enabled
console.log(this === undefined); // => true
return a + b;
}
// nonStrictSum() is invoked as a function in non-strict mode
// this in nonStrictSum() is the window object
nonStrictSum(5, 6); // => 11
// strictSum() is invoked as a function in strict mode
// this in strictSum() is undefined
strictSum(8, 12); // => 20</code></pre><h4 id="2-3-this-" style="margin-bottom: 10px;">2.3. 陷阱: 内部函数中的<code style="padding: 2px 5px; font-weight: 400; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></h4>一个函数调用中的常见错误就是以为<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>在内部函数中跟在外部函数中一样。正确来说，内部函数的上下文依赖于调用方法，而不是外部函数的上下文。为了能使<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>跟预期的一样，用隐式调用来修改内部函数的上下文(用<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.call()</code></a>或者<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.apply()</code></a>, 如<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#5indirectinvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">5.</a>所示)或者创建一个绑定函数(用<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.bind()</code></a>, 如<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#6boundfunction" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">6.</a>所示）。下面的例子计算了2个数字的和：<a href="http://jsbin.com/jakape/2/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">var numbers = {
numberA: 5,
numberB: 10,
sum: function() {
console.log(this === numbers); // => true
function calculate() {
 // this is window or undefined in strict mode
 console.log(this === numbers); // => false
 return this.numberA + this.numberB;
}
return calculate();
}
};
numbers.sum(); // => NaN or throws TypeError in strict mode</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">numbers.sum()</code>是一个对象上的方法调用 (见<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/3methodonanobjectinvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">3.</a>)，所以<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">sum</code>中的上下文是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">numbers</code>对象。<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">calculate</code>函数定义在<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">sum</code>内部，所以你会指望<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">calculate()</code>中的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>也是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">numbers</code>对象。然而，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">calculate()</code>是一个函数调用（而不是方法调用），它的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是全局对象<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">window</code>(例子<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#21thisinfunctioninvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">2.1.</a>)或者strict模式下的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">undefined</code>(例子<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#22thisinfunctioninvocationstrictmode" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">2.2.</a>)。即使外部函数<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">sum</code>的上下文是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">numbers</code>对象，它在这里也没有影响。<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">numbers.sum()</code>的调用结果是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">NaN</code>或者strict模式下的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">TypeError: Cannot read property 'numberA' of undefined</code>错误。因为<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">calculate</code>没有被正确调用，结果绝不是预期的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">5 + 10 = 15</code>。为了解决这个问题，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">calculate</code>应该跟<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">sum</code>有一样的上下文，以便于使用<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">numberA</code>和<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">numberB</code>。解决方法之一是使用<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.call()</code>方法(见章节<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#5indirectinvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">5.</a>):<a href="http://jsbin.com/xododi/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">var numbers = {
numberA: 5,
numberB: 10,
sum: function() {
console.log(this === numbers); // => true
function calculate() {
 console.log(this === numbers); // => true
 return this.numberA + this.numberB;
}
// use .call() method to modify the context
return calculate.call(this);
}
};
numbers.sum(); // => 15</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">calculate.call(this)</code>像往常一样执行<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">calculate</code>，但是上下文由第一个参数指定。现在<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this.numberA + this.numberB</code>相当于<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">numbers.numberA + numbers.numberB</code>，函数会返回预期的结果<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">5 + 10 = 15</code>。<h3 id="3-" style="margin-bottom: 10px; font-size: 18px;">3. 方法调用</h3>一个方法是作为一个对象的属性存储的函数。例如:<a href="http://jsbin.com/towugit/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">var myObject = {
// helloFunction is a method
helloFunction: function() {
return 'Hello World!';
}
};
var message = myObject.helloFunction();</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">helloFunction</code>是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myObject</code>的一个方法。为了使用这个方法, 使用属性访问：<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myObject.helloFunction</code>。当一个表达式以属性访问的形式执行时，执行的是方法调用，它相当于以个函数接着<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">(</code>，一组用逗号分隔的参数以及<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">)</code>。利用前面的例子，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myObject.helloFunction()</code>是对象<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myObject</code>上的一个<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">helloFunction</code>的方法调用。<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.join(',')</code>或<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">/\s/.test('beautiful world')</code>也被认为是方法调用。区分函数调用(见<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#2functioninvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">2.</a>)跟方法调用是很重要的，因为他们完全不同。他们最主要的区别在于方法调用要求函数以属性访问的形式调用(如<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);"><expression>.functionProperty()</code>或者<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);"><expression>['functionProperty']()</code>)，而函数调用并没有这样的要求(如<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);"><expression>()</code>)。<a href="http://jsbin.com/pimaku/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">['Hello', 'World'].join(', '); // method invocation
({ ten: function() { return 10; } }).ten(); // method invocation
var obj = {};
obj.myFunction = function() {
return new Date().toString();
};
obj.myFunction(); // method invocation

var otherFunction = obj.myFunction;
otherFunction(); // function invocation
parseFloat('16.60'); // function invocation
isNaN(0); // function invocation</code></pre><h4 id="3-1-this-" style="margin-bottom: 10px;">3.1. 方法调用中的<code style="padding: 2px 5px; font-weight: 400; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></h4><blockquote style="margin-bottom: 15px; padding-left: 15px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); color: rgb(102, 102, 102); font-size: 14px; font-style: italic;">在方法调用中，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是拥有这个方法的对象</blockquote>当调用一个对象上的方法时，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>变成这个对象自身。让我们一起来创建一个对象，它带有一个可以增大数字的方法：<a href="http://jsbin.com/jicilu/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">var calc = {
num: 0,
increment: function() {
console.log(this === calc); // => true
this.num += 1;
return this.num;
}
};
// method invocation. this is calc
calc.increment(); // => 1
calc.increment(); // => 2</code></pre>调用<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">calc.increment()</code>会把<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">increment</code>函数的上下文变成<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">calc</code>对象。所以，用<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this.num</code>来增加num这个属性跟预期一样工作。javaScript对象会从它的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">prototype</code>继承方法。当这个继承的方法在新的对象上被调用时，上下文仍然是该对象本身：<a href="http://jsbin.com/jalawe/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">var myDog = Object.create({
sayName: function() {
console.log(this === myDog); // => true
return this.name;
}
});
myDog.name = 'Milo';
// method invocation. this is myDog
myDog.sayName(); // => 'Milo'</code></pre><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Object.create()</code></a>创建了一个新的对象<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myDog</code>，并且设置了它的prototype。<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myDog</code>继承了<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">sayName</code>方法。当执行<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myDog.sayName()</code>时，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myDog</code>是调用的上下文。在ECMAScript 6的<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">class</code></a>语法中，方法调用的上下文也是这个实例本身：<a href="http://jsbin.com/zaxecos/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">class Planet {
constructor(name) {
this.name = name;
}
getName() {
console.log(this === earth); // => true
return this.name;
}
}
var earth = new Planet('Earth');
// method invocation. the context is earth
earth.getName(); // => 'Earth'</code></pre><h4 id="3-2-object-" style="margin-bottom: 10px;">3.2. 陷阱:从object中分离方法</h4>一个对象中的方法可以赋值给另一个变量。当用这个变量调用方法时，你可能以为<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>指向定义这个方法的对象。正确来说如果这个方法在没有对象的时候被调用，它会变成函数调用：<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>变成全局对象<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">window</code>或者strict模式下的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">undefined</code>(见<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#21thisinfunctioninvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">2.1</a>和<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#22thisinfunctioninvocationstrictmode" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">2.2</a>)。用绑定函数(用<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.bind()</code></a>, 见<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#6boundfunction" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">6.</a>)可以修正上下文，使它变成拥有这个方法的对象。下面的例子创建了<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Animal</code>构造函数并创造了它的一个实例 - <code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myCat</code>。 <code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">setTimout()</code>会在1秒钟之后输出<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myCat</code>对象的信息：<a href="http://jsbin.com/supaze/3/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function Animal(type, legs) {
this.type = type;
this.legs = legs;
this.logInfo = function() {
console.log(this === myCat); // => false
console.log('The ' + this.type + ' has ' + this.legs + ' legs');
}
}
var myCat = new Animal('Cat', 4);
// logs "The undefined has undefined legs"
// or throws a TypeError in strict mode
setTimeout(myCat.logInfo, 1000);</code></pre>你可能会以为<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">setTimout</code>会调用<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myCat.logInfo()</code>，输出关于<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myCat</code>对象的信息。实际上，这个方法在作为参数传递给<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">setTimout(myCat.logInfo)</code>时已经从原对象上分离了，1秒钟之后发生的是一个函数调用。当<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">logInfo</code>作为函数被调用时，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是全局对象，或者strict模式下的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">undefined</code>（反正不是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myCat</code>对象），所以不会正确地输出信息。函数可以通过<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.bind()</code></a>方法跟一个对象绑定(见<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#6boundfunction" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">6.</a>)。如果这个分离的方法与<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myCat</code>绑定，那么上下文的问题就解决了：<a href="http://jsbin.com/naxevu/2/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function Animal(type, legs) {
this.type = type;
this.legs = legs;
this.logInfo = function() {
console.log(this === myCat); // => true
console.log('The ' + this.type + ' has ' + this.legs + ' legs');
};
}
var myCat = new Animal('Cat', 4);
// logs "The Cat has 4 legs"
setTimeout(myCat.logInfo.bind(myCat), 1000);</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myCat.logInfo.bind(myCat)</code>返回一个跟<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">logInfo</code>执行效果一样的函数，但是它的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>即使在函数调用情况下也是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myCat</code>。<h3 id="4-" style="margin-bottom: 10px; font-size: 18px;">4. 构造函数调用</h3>当<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/new" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new</code></a>关键词紧接着函数对象,<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">(</code>,一组逗号分隔的参数以及<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">)</code>时被调用，执行的是构造函数调用如<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new RegExp('\\d')</code>。这个例子声明了一个<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Country</code>函数，并且将它作为一个构造函数调用：<a href="http://jsbin.com/banude/4/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function Country(name, traveled) {
this.name = name ? name : 'United Kingdom';
this.traveled = Boolean(traveled); // transform to a boolean
}
Country.prototype.travel = function() {
this.traveled = true;
};
// Constructor invocation
var france = new Country('France', false);
// Constructor invocation
var unitedKingdom = new Country;

france.travel(); // Travel to France</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new Country('France', false)</code>是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Country</code>函数的构造函数调用。它的执行结果是一个<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">name</code>属性为<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">'France'</code>的新的对象。如果这个构造函数调用时不需要参数，那么括号可以省略：<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new Country</code>。从ECMAScript 6开始，JavaScript允许用<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">class</code></a>关键词来定义构造函数：<a href="http://jsbin.com/dacufiq/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">class City {
constructor(name, traveled) {
this.name = name;
this.traveled = false;
}
travel() {
this.traveled = true;
}
}
// Constructor invocation
var paris = new City('Paris', false);
paris.travel();</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new City('Paris')</code>是构造函数调用。这个对象的初始化由这个类中一个特殊的方法<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">constructor</code></a>来处理。其中，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>指向新创建的对象。构造函数创建了一个新的空的对象，它从构造函数的原型继承了属性。构造函数的作用就是去初始化这个对象。可能你已经知道了，在这种类型的调用中，上下文指向新创建的实例。这是我们下一章的主题。当属性访问<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myObject.myFunction</code>前面有一个<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new</code>关键词时，JavaScript会执行构造函数调用而不是原来的方法调用。例如<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new myObject.myFunction()</code>：它相当于先用属性访问把方法提取出来<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">extractedFunction = myObject.myFunction</code>，然后利用把它作为构造函数创建一个新的对象： <code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new extractedFunction()</code>。<h4 id="4-1-this-" style="margin-bottom: 10px;">4.1. 构造函数中的<code style="padding: 2px 5px; font-weight: 400; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></h4><blockquote style="margin-bottom: 15px; padding-left: 15px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); color: rgb(102, 102, 102); font-size: 14px; font-style: italic;">在构造函数调用中<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>指向新创建的对象</blockquote>构造函数调用的上下文是新创建的对象。它利用构造函数的参数初始化新的对象，设定属性的初始值，添加时间处理函数等等。让我们来看看下面例子里的上下文：<a href="http://jsbin.com/zuduke/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function Foo () {
console.log(this instanceof Foo); // => true
this.property = 'Default Value';
}
// Constructor invocation
var fooInstance = new Foo();
fooInstance.property; // => 'Default Value'</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new Foo()</code>正在调用一个构造函数，它的上下文是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">fooInstance</code>。其中，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Foo</code>被初始化了：<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this.property</code>被赋予了一个默认值。同样的情况在用<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">class</code></a>语法（从ES6起）时也会发生，唯一的区别是初始化在<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">constructor</code>方法中进行：<a href="http://jsbin.com/ropifo/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">class Bar {
constructor() {
console.log(this instanceof Bar); // => true
this.property = 'Default Value';
}
}
// Constructor invocation
var barInstance = new Bar();
barInstance.property; // => 'Default Value'</code></pre>当<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new Bar()</code>执行时，JavaScript创建了一个空的对象，把它作为<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">constructor</code>方法的上下文。现在，你可以用<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>关键词给它添加属性：<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this.property = 'Default Value'</code>。<h4 id="4-2-new-" style="margin-bottom: 10px;">4.2. 陷阱: 忘了<code style="padding: 2px 5px; font-weight: 400; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new</code></h4>有些JavaScirpt函数不是只在作为构造函数调用的时候才创建新的对象，作为函数调用时也会，例如<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">RegExp</code>：<a href="http://jsbin.com/yanila/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">var reg1 = new RegExp('\\w+');
var reg2 = RegExp('\\w+');

reg1 instanceof RegExp; // => true
reg2 instanceof RegExp; // => true
reg1.source === reg2.source; // => true</code></pre>当执行<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new RegExp('\\w+')</code>和<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">RegExp('\\w+')</code>时，JavaScrit会创建相同的正则表达式对象。因为有些构造函数在<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new</code>关键词缺失的情况下，可能跳过对象初始化，用函数调用创建对象会存在问题（不包括<a href="http://javascript.info/tutorial/factory-constructor-pattern" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">工厂模式</a>）。下面的例子就说明了这个问题：<a href="http://jsbin.com/viyigid/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function Vehicle(type, wheelsCount) {
this.type = type;
this.wheelsCount = wheelsCount;
return this;
}
// Function invocation
var car = Vehicle('Car', 4);
car.type; // => 'Car'
car.wheelsCount // => 4
car === window// => true</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Vehicle</code>是一个在上下文上设置了<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">type</code>跟<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">wheelsCount</code>属性的函数。当执行<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Vehicle('Car', 4)</code>时，返回了一个<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">car</code>对象，它的属性是正确的：<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">car.type</code>是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">'Car'</code>， <code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">car.wheelsCount</code>是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">4</code>。你可能以为它正确地创建并初始化了对象。然而，在函数调用中，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">window</code>对象(见<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#21thisinfunctioninvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">2.1.</a>)，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Vehicle('Car', 4)</code>实际上是在给<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">window</code>对象设置属性--这是错的。它并没有创建一个新的对象。当你希望调用构造函数时，确保你使用了<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new</code>操作符：<a href="http://jsbin.com/qufafo/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function Vehicle(type, wheelsCount) {
if (!(this instanceof Vehicle)) {
throw Error('Error: Incorrect invocation');
}
this.type = type;
this.wheelsCount = wheelsCount;
return this;
}
// Constructor invocation
var car = new Vehicle('Car', 4);
car.type // => 'Car'
car.wheelsCount // => 4
car instanceof Vehicle // => true

// Function invocation. Generates an error.
var brokenCat = Vehicle('Broken Car', 3);</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new Vehicle('Car', 4)</code>工作正常：因为<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new</code>关键词出现在构造函数调用前，一个新的对象被创建并初始化。在构造函数里我们添加了一个验证<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this instanceof Vehicle</code>来确保执行的上下文是正确的对象类型。如果<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>不是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Vehicle</code>，那么就会报错。这样，如果执行<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Vehicle('Broken Car', 3)</code>(没有<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new</code>)，我们会得到一个异常：<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Error: Incorrect invocation</code>。<h3 id="5-" style="margin-bottom: 10px; font-size: 18px;">5. 隐式调用</h3>当函数被<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.call()</code>或者<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.apply()</code>调用时，执行的是隐式调用。函数在JavaScript中是第一类对象，这意味着函数也是对象。它的类型是<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Function</code></a>。根据这个函数对象所拥有的<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function#Methods" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">方法列表</a>，<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.call()</code></a>和<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.apply()</code></a>可以跟一个可变的上下文一起调用函数。方法<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.call(thisArg[, arg1[, arg2[, ...]]])</code>将接受的第一个参数<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">thisArg</code>作为调用时的上下文，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">arg1, arg2, ...</code>这些则作为参数传入被调用的函数。方法<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.apply(thisArg, )</code>将接受的第一个参数<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">thisArg</code>作为调用时的上下文，并且接受另一个<a href="http://www.2ality.com/2013/05/quirk-array-like-objects.html" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">类似数组的对象</a><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);"></code>作为被调用函数的参数传入。下面是一个隐式调用的例子：<a href="http://jsbin.com/ceremu/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function increment(number) {
return ++number;
}
increment.call(undefined, 10); // => 11
increment.apply(undefined, [10]); // => 11</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">increment.call()</code>和<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">increment.apply()</code>都用参数<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">10</code>调用了这个自增函数。这两者的主要区别是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.call()</code>接受一组参数，例如<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myFunction.call(thisValue, 'value1', 'value2')</code>。然而<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.apply()</code>接受的一组参数必须是一个类似数组的对象，例如<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myFunction.apply(thisValue, ['value1', 'value2'])</code>。<h4 id="5-1-this-" style="margin-bottom: 10px;">5.1. 隐式调用中的<code style="padding: 2px 5px; font-weight: 400; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></h4><blockquote style="margin-bottom: 15px; padding-left: 15px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); color: rgb(102, 102, 102); font-size: 14px; font-style: italic;">在隐式调用<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.call()</code>或<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.apply()</code>中，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是第一个参数</blockquote>很明显，在隐式调用中，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是传入<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.call()</code>或<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.apply()</code>中的第一个参数。下面的这个例子就说明了这一点：<a href="http://jsbin.com/bowagij/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">var rabbit = { name: 'White Rabbit' };
function concatName(string) {
console.log(this === rabbit); // => true
return string + this.name;
}
// Indirect invocations
concatName.call(rabbit, 'Hello ');// => 'Hello White Rabbit'
concatName.apply(rabbit, ['Bye ']); // => 'Bye White Rabbit'</code></pre>当一个函数应该在特定的上下文中执行时，隐式调用就非常有用。例如为了解决方法调用时，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>总是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">window</code>或strict模式下的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">undefined</code>的上下文问题(见<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#23pitfallthisinaninnerfunction" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">2.3.</a>)。隐式调用可以用于模拟在一个对象上调用某个方法（见之前的代码样例）。另一个实际的例子是在ES5中，在创建的类的结构层次中中，调用父类的构造函数：<a href="http://jsbin.com/fujasa/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function Runner(name) {
console.log(this instanceof Rabbit); // => true
this.name = name;
}
function Rabbit(name, countLegs) {
console.log(this instanceof Rabbit); // => true
// Indirect invocation. Call parent constructor.
Runner.call(this, name);
this.countLegs = countLegs;
}
var myRabbit = new Rabbit('White Rabbit', 4);
myRabbit; // { name: 'White Rabbit', countLegs: 4 }</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Rabbit</code>中的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Runner.call(this, name)</code>隐式调用了父类的函数来初始化这个对象。<h3 id="6-" style="margin-bottom: 10px; font-size: 18px;">6. 绑定函数</h3>绑定函数是一个与对象绑定的函数。通常它是通过在原函数上使用 <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.bind()</code></a>来创建的。原函数和绑定的函数共享代码跟作用域，但是在执行时有不同的上下文。方法<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.bind(thisArg[, arg1[, arg2[, ...]]])</code>接受第一个参数<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">thisArg</code>作为绑定函数执行时的上下文，并且它接受一组可选的参数 <code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">arg1, arg2, ...</code>作为被调用函数的参数。它返回一个绑定了<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">thisArg</code>的新函数。下面的代码创建了一个绑定函数并在之后调用它：<a href="http://jsbin.com/mocisa/2/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function multiply(number) {
'use strict';
return this * number;
}
// create a bound function with context
var double = multiply.bind(2);
// invoke the bound function
double(3);// => 6
double(10); // => 20</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">multiply.bind(2)</code>返回了一个新的函数对象<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">double</code>，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">double</code>绑定了数字<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">2</code>。<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">multiply</code>跟<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">double</code>有相同的代码跟作用域。跟<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.apply()</code>以及<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.call()</code>方法(见<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#5indirectinvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">5.</a>)马上调用函数不同，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.bind()</code>函数返回一个新的方法，它应该在之后被调用，只是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>已经被提前设置好了。<h4 id="6-1-this-" style="margin-bottom: 10px;">6.1. 绑定函数中的<code style="padding: 2px 5px; font-weight: 400; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></h4><blockquote style="margin-bottom: 15px; padding-left: 15px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); color: rgb(102, 102, 102); font-size: 14px; font-style: italic;">在调用绑定函数时，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.bind()</code>的第一个参数。</blockquote><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.bind()</code>的作用是创建一个新的函数，它在被调用时的上下文是传入<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.bind()</code>的第一个参数。它是一种非常强大的技巧，使你可以创建一个定义了<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>值的函数。让我们来看看如何在一个绑定函数中设置<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>：<a href="http://jsbin.com/zucozi/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">var numbers = {
array: [3, 5, 10],
getNumbers: function() {
return this.array;
}
};
// Create a bound function
var boundGetNumbers = numbers.getNumbers.bind(numbers);
boundGetNumbers(); // => 
// Extract method from object
var simpleGetNumbers = numbers.getNumbers;
simpleGetNumbers(); // => undefined or throws an error in strict mode</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">numbers.getNumbers.bind(numbers)</code>返回了一个绑定了<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">number</code>对象的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">boundGetNumbers</code>函数。<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">boundGetNumbers()</code>调用时的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">number</code>对象，并能够返回正确的数组对象。<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">numbers.getNumbers</code>函数能在不绑定的情况下赋值给变量<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">simpleGetNumbers</code>。在之后的函数调用中，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">simpleGetNumbers()</code>的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">window</code>或者strict模式下的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">undefined</code>，不是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">number</code>对象(见<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#32pitfallseparatingmethodfromitsobject" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">3.2. 陷阱</a>)。在这个情况下，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">simpleGetNumbers()</code>不会正确返回数组。<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.bind()</code>永久性地建立了一个上下文的链接，并且会一直保持它。一个绑定函数不能通过<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.call()</code>或者<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.apply()</code>来改变它的上下文，甚至是再次绑定也不会有什么作用。只有用绑定函数的构造函数调用方法能够改变上下文，但并不推荐这个方法（因为构造函数调用用的是常规函数而不是绑定函数）。下面的例子声明了一个绑定函数，接着试图改变它预先定义好的上下文：<a href="http://jsbin.com/maroci/2/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function getThis() {
'use strict';
return this;
}
var one = getThis.bind(1);
// Bound function invocation
one(); // => 1
// Use bound function with .apply() and .call()
one.call(2);// => 1
one.apply(2); // => 1
// Bind again
one.bind(2)(); // => 1
// Call the bound function as a constructor
new one(); // => Object</code></pre>只有<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new one()</code>改变了绑定函数的上下文，其他方式的调用中<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>总是等于<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">1</code>。<h3 id="7-" style="margin-bottom: 10px; font-size: 18px;">7. 箭头函数</h3>箭头函数被设计来以更简短的形式定义函数。并且能从<a href="https://en.wikipedia.org/wiki/Scope_(computer_science" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">词法</a>#Lexical_scoping)上绑定上下文。它能以下面的方式被使用：<a href="http://jsbin.com/rosuwu/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">var hello = (name) => {
return 'Hello ' + name;
};
hello('World'); // => 'Hello World'
// Keep only even numbers
[1, 2, 5, 6].filter(item => item % 2 === 0); // => </code></pre>箭头函数带来了更轻量的语法，避免了冗长的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">function</code>关键词。你甚至可以在函数只有一个语句的时候省略<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">return</code>。因为箭头函数是<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">匿名的</a>，这意味着它的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">name</code>属性是个空字符串<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">''</code>。这样一来，它就没有一个词法上的函数名（函数名在递归跟事件解绑时会比较有用）。同时，跟常规函数相反，它也不提供<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">arguments</code></a>对象。但是，这在ES6中通过<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/rest_parameters" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">rest parameters</a>修复了：<a href="http://jsbin.com/gicubex/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">var sumArguments = (...args) => {
console.log(typeof arguments); // => 'undefined'
return args.reduce((result, item) => result + item);
};
sumArguments.name // => ''
sumArguments(5, 5, 6); // => 16</code></pre><h4 id="7-1-this-" style="margin-bottom: 10px;">7.1. 箭头函数中的<code style="padding: 2px 5px; font-weight: 400; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code></h4><blockquote style="margin-bottom: 15px; padding-left: 15px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); color: rgb(102, 102, 102); font-size: 14px; font-style: italic;"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是箭头函数定义时封装好的上下文</blockquote>箭头函数并不会创建它自己的上下文，它从它定义处的外部函数获得<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>上下文。下面的例子说明了这个上下文透明的特性：<a href="http://jsbin.com/fijosu/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
log() {
console.log(this === myPoint); // => true
setTimeout(()=> {
 console.log(this === myPoint); // => true
 console.log(this.x + ':' + this.y); // => '95:165'
}, 1000);
}
}
var myPoint = new Point(95, 165);
myPoint.log();</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">setTimeout</code>在调用箭头函数时跟<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">log()</code>使用了相同的上下文(<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">myPoint</code>对象)。正如所见，箭头函数从它定义处“继承”了函数的上下文。如果在这个例子里尝试用常规函数，它会建立自己的上下文(<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">window</code>或strict模式下的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">undefined</code>)。所以，为了让同样的代码能在函数表达式中正确运行，需要手动绑定上下文：<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">setTimeout(function() {...}.bind(this))</code>。这样一来就显得很啰嗦，不如用箭头函数来得简短。如果箭头函数定义在最上层的作用域（在所有函数之外），那么上下文就总是全局对象（浏览器中的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">window</code>对象）：<a href="http://jsbin.com/siqide/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">var getContext = () => {
console.log(this === window); // => true
return this;
};
console.log(getContext() === window); // => true</code></pre>箭头函数会一劳永逸地绑定词法作用域。即使使用修改上下文的方法，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>也不能被改变：<a href="http://jsbin.com/kajorag/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">var numbers = [1, 2];
(function() {
var get = () => {
console.log(this === numbers); // => true
return this;
};
console.log(this === numbers); // => true
get(); // => 
// Use arrow function with .apply() and .call()
get.call([0]);// => 
get.apply([0]); // => 
// Bind
get.bind([0])(); // => 
}).call(numbers);</code></pre>一个函数表达式通过<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.call(numbers)</code>被隐式调用了，这使得这个调用的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>变成了<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">numbers</code>。这样一来，箭头函数<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">get</code>的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>也变成了<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">numbers</code>，因为它是从词法上获得的上下文。无论<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">get</code>是怎么被调用的，它一直保持了一开始的上下文<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">numbers</code>。用其他上下文的隐式调用(通过<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.call()</code>或<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.apply()</code>)或者重新绑定(通过<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">.bind()</code>)都不会起作用箭头函数不能用作构造函数。如果像构造函数一样调用<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">new get()</code>， JavaScript会抛出异常：<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">TypeError: get is not a constructor</code>。<h4 id="7-2-" style="margin-bottom: 10px;">7.2. 陷阱: 用箭头函数定义方法</h4>你可能想用箭头函数在一个对象上定义方法。这很合情合理：箭头函数的定义相比于<a href="https://developer.mozilla.org/en/docs/web/JavaScript/Reference/Operators/function" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">函数表达式</a>短得多：例如<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">(param) => {...}</code>而不是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">function(param) {..}</code>。这个例子用箭头函数在<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">Period</code>类上定义了<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">format()</code>方法：<a href="http://jsbin.com/jubacu/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function Period (hours, minutes) {
this.hours = hours;
this.minutes = minutes;
}
Period.prototype.format = () => {
console.log(this === window); // => true
return this.hours + ' hours and ' + this.minutes + ' minutes';
};
var walkPeriod = new Period(2, 30);
walkPeriod.format(); // => 'undefined hours and undefined minutes'</code></pre>由于<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">format</code>是一个箭头函数，并且它定义在全局上下文（最顶层的作用域）中，它的<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>指向<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">window</code>对象。即使<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">format</code>作为方法在一个对象上被调用如<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">walkPeriod.format()</code>，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">window</code>仍然是这次调用的上下文。之所以会这样是因为箭头函数有静态的上下文，并不会随着调用方式的改变而改变。函数表达式可以解决这个问题，因为一个常规的函数会随着调用方法而改变其上下文:<a href="http://jsbin.com/rilegen/1/edit?js,console" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">在JS Bin上试试</a><pre class="prettyprint prettyprinted" style="margin-bottom: 15px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; font-size: 12px; white-space: pre-wrap; overflow: auto; background: padding-box padding-box rgb(248, 248, 248);"><code style="border: none; border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; white-space: pre; background-image: initial; background-attachment: initial; background-size: initial; background-origin: padding-box; background-clip: padding-box; background-position: initial; background-repeat: initial;">function Period (hours, minutes) {
this.hours = hours;
this.minutes = minutes;
}
Period.prototype.format = function() {
console.log(this === walkPeriod); // => true
return this.hours + ' hours and ' + this.minutes + ' minutes';
};
var walkPeriod = new Period(2, 30);
walkPeriod.format(); // => '2 hours and 30 minutes'</code></pre><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">walkPeriod.format()</code>是一个对象上的方法调用(见<a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/#31thisinmethodinvocation" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">3.1.</a>)，它的上下文是<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">walkPeriod</code>对象。<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this.hours</code>等于<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">2</code>，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this.minutes</code>等于<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">30</code>，所以这个方法返回了正确的结果：<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">'2 hours and 30 minutes'</code>。<h3 id="8-" style="margin-bottom: 10px; font-size: 18px;">8. 结论</h3>因为函数调用对<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>有最大的影响，从现在起，不要再问你自己：<blockquote style="margin-bottom: 15px; padding-left: 15px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); color: rgb(102, 102, 102); font-size: 14px; font-style: italic;"><code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是从哪里来的？</blockquote>而要问自己：<blockquote style="margin-bottom: 15px; padding-left: 15px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); color: rgb(102, 102, 102); font-size: 14px; font-style: italic;">函数是怎么<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">被调用</code>的？</blockquote>对于箭头函数，问问你自己：<blockquote style="margin-bottom: 15px; padding-left: 15px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); color: rgb(102, 102, 102); font-size: 14px; font-style: italic;">在这个箭头函数被<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">定义</code>的地方，<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; font-style: normal; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>是什么？</blockquote>这是处理<code style="margin-right: 4px; margin-left: 5px; padding: 2px 5px; border: 1px solid rgb(234, 234, 234); border-radius: 3px; font-size: 14px; font-family: "YaHei Consolas Hybrid", Menlo, Monaco, Consolas, "Courier New", monospace; line-height: 18px; background: padding-box padding-box rgb(248, 248, 248);">this</code>时的正确想法，它们可以让你免于头痛。如果你有有趣的关于上下文的陷阱或者仅仅是在某个例子中遇到了困难，在下面留言，我们一起来讨论！传播关于JavaScript的知识并且<a href="https://twitter.com/share?text=Gentle%20explanation%20of%20%27this%27%20keyword%20in%20JavaScript&url=http://rainsoft.io/gentle-explanation-of-this-in-javascript/" style="text-decoration: none; color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">分享</a>这篇文章，你的同事会感激它的。不忘初心 ;)</div><div id="copyright" style="padding: 1em; background: rgb(239, 239, 239);"><h2 class="title" style="margin-bottom: 10px; font-weight: 400; line-height: 40px;">版权声明</h2><div class="content">本译文仅用于学习、研究和交流目的，欢迎非商业转载。转载请注明出处、译者和众成翻译的完整链接。要获取包含以上信息的本文Markdown源文本，请<a class="get-markdown" href="http://www.zcfy.cc/api/getarticlemarkdown?id=901" target="_blank" style="color: rgb(74, 197, 206); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(229, 229, 229);">点击这里</a>。</div></div></div></div></div></div>

我是一个兵 发表于 2016-8-18 17:19:15

好文章啊。。。。。

水玲珑 发表于 2016-8-18 17:33:38

学习学习

页: [1]

守望者--AIR技术交流's Archiver

JavaScript中‘this’关键词的优雅解释