重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本文实例形式详细分析了JavaScript this绑定过程。分享给大家供大家参考,具体如下:
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的零陵网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
在理解this 的绑定过程之前,首先要理解调用位置:调用位置就是函数在代码中被调用的位置(而不是声明的位置)。只有仔细分析调用位置才能回答这个问题:这个this 到底引用的是什么?通常来说,寻找调用位置就是寻找“函数被调用的位置”,但是做起来并没有这么简单,因为某些编程模式可能会隐藏真正的调用位置。最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数)。我们关心的调用位置就在当前正在执行的函数的前一个调用中。
下面我们来看看到底什么是调用栈和调用位置:
function baz() { // 当前调用栈是:baz // 因此,当前调用位置是全局作用域 console.log( "baz" ); bar(); // <-- bar 的调用位置 } function bar() { // 当前调用栈是baz -> bar // 因此,当前调用位置在baz 中 console.log( "bar" ); foo(); // <-- foo 的调用位置 } function foo() { // 当前调用栈是baz -> bar -> foo // 因此,当前调用位置在bar 中 console.log( "foo" ); } baz(); // <-- baz 的调用位置
注意我们是如何(从调用栈中)分析出真正的调用位置的,因为它决定了this
的绑定。
你可以把调用栈想象成一个函数调用链,就像我们在前面代码段的注释中所写的一样。但是这种方法非常麻烦并且容易出错。另一个查看调用栈的方法是使用浏览器的调试工具。绝大多数现代桌面浏览器都内置了开发者工具,其中包含JavaScript 调试器。就本例来说,你可以在工具中给foo() 函数的第一行代码设置一个断点,或者直接在第一行代码之前插入一条debugger;语句。运行代码时,调试器会在那个位置暂停,同时会展示当前位置的函数调用列表,这就是你的调用栈。因此,如果你想要分析this 的绑定,使用开发者工具得到调用栈,然后找到栈中第二个元素,这就是真正的调用位置。
绑定规则
我们来看看在函数的执行过程中调用位置如何决定this 的绑定对象。你必须找到调用位置,然后判断需要应用下面四条规则中的哪一条。
1.默认绑定
首先要介绍的是最常用的函数调用类型:独立函数调用。可以把这条规则看作是无法应用其他规则时的默认规则。
思考一下下面的代码:
function foo() { console.log( this.a ); } var a = 2; foo(); // 2
你应该注意到的第一件事是,声明在全局作用域中的变量(比如var a = 2)就是全局对象的一个同名属性。它们本质上就是同一个东西,并不是通过复制得到的,就像一个硬币的两面一样。
接下来我们可以看到当调用foo()
时,this.a
被解析成了全局变量a。为什么?因为在本例中,函数调用时应用了this 的默认绑定,因此this 指向全局对象。
那么我们怎么知道这里应用了默认绑定呢?可以通过分析调用位置来看看foo() 是如何调用的。在代码中,foo()
是直接使用不带任何修饰的函数引用进行调用的,因此只能使用默认绑定,无法应用其他规则。
如果使用严格模式(strict mode),那么全局对象将无法使用默认绑定,因此this 会绑定到undefined:
function foo() { "use strict"; console.log( this.a ); } var a = 2; foo(); // TypeError: this is undefined
这里有一个微妙但是非常重要的细节,虽然this 的绑定规则完全取决于调用位置,但是只有foo()
运行在非strict mode 下时,默认绑定才能绑定到全局对象;严格模式下与foo()
的调用位置无关:
function foo() { console.log( this.a ); } var a = 2; (function(){ "use strict"; foo(); // 2 })();
通常来说你不应该在代码中混合使用strict mode 和non-strict mode。整个程序要么严格要么非严格。然而,有时候你可能会用到第三方库,其严格程度和你的代码有所不同,因此一定要注意这类兼容性细节。
2.隐式绑定
另一条需要考虑的规则是调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含,不过这种说法可能会造成一些误导。
思考下面的代码:
function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; obj.foo(); // 2
首先需要注意的是foo()
的声明方式,及其之后是如何被当作引用属性添加到obj 中的。但是无论是直接在obj 中定义还是先定义再添加为引用属性,这个函数严格来说都不属于obj 对象。然而,调用位置会使用obj 上下文来引用函数,因此你可以说函数被调用时obj 对象“拥有”或者“包含”它。无论你如何称呼这个模式,当foo()
被调用时,它的落脚点确实指向obj 对象。当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this 绑定到这个上下文对象。因为调用foo()
时this 被绑定到obj,因此this.a
和obj.a
是一样的。
对象属性引用链中只有最顶层或者说最后一层会影响调用位置。举例来说:
function foo() { console.log( this.a ); } var obj2 = { a: 42, foo: foo }; var obj1 = { a: 2, obj2: obj2 }; obj1.obj2.foo(); // 42
隐式丢失
一个最常见的this 绑定问题就是被隐式绑定的函数会丢失绑定对象,也就是说它会应用默认绑定,从而把this 绑定到全局对象或者undefined 上,取决于是否是严格模式。
思考下面的代码:
function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; var bar = obj.foo; // 函数别名! var a = "oops, global"; // a 是全局对象的属性 bar(); // "oops, global"
虽然bar 是obj.foo
的一个引用,但是实际上,它引用的是foo 函数本身,因此此时的bar()
其实是一个不带任何修饰的函数调用,因此应用了默认绑定。
一种更微妙、更常见并且更出乎意料的情况发生在传入回调函数时:
function foo() { console.log( this.a ); } function doFoo(fn) { // fn 其实引用的是foo fn(); // <-- 调用位置! } var obj = { a: 2, foo: foo }; var a = "oops, global"; // a 是全局对象的属性 doFoo( obj.foo ); // "oops, global"
参数传递其实就是一种隐式赋值,因此我们传入函数时也会被隐式赋值,所以结果和上一个例子一样。
如果把函数传入语言内置的函数而不是传入你自己声明的函数,会发生什么呢?结果是一样的,没有区别:
function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; var a = "oops, global"; // a 是全局对象的属性 setTimeout( obj.foo, 100 ); // "oops, global" JavaScript 环境中内置的setTimeout() 函数实现和下面的伪代码类似: function setTimeout(fn,delay) { // 等待delay 毫秒 fn(); // <-- 调用位置! }
就像我们看到的那样,回调函数丢失this 绑定是非常常见的。除此之外,还有一种情况this 的行为会出乎我们意料:调用回调函数的函数可能会修改this。在一些流行的JavaScript 库中事件处理器常会把回调函数的this 强制绑定到触发事件的DOM 元素上。
这在一些情况下可能很有用,但是有时它可能会让你感到非常郁闷。遗憾的是,这些工具通常无法选择是否启用这个行为。
无论是哪种情况,this 的改变都是意想不到的,实际上你无法控制回调函数的执行方式,因此就没有办法控制会影响绑定的调用位置。之后我们会介绍如何通过固定this 来修复(这里是双关,“修复”和“固定”的英语单词都是fixing)这个问题。
3.显式绑定
就像我们刚才看到的那样,在分析隐式绑定时,我们必须在一个对象内部包含一个指向函数的属性,并通过这个属性间接引用函数,从而把this 间接(隐式)绑定到这个对象上。那么如果我们不想在对象内部包含函数引用,而想在某个对象上强制调用函数,该怎么做呢?JavaScript 中的“所有”函数都有一些有用的特性(这和它们的[[ 原型]] 有关——之后我们会详细介绍原型),可以用来解决这个问题。具体点说,可以使用函数的call(..) 和apply(..) 方法。严格来说,JavaScript 的宿主环境有时会提供一些非常特殊的函数,它们并没有这两个方法。但是这样的函数非常罕见,JavaScript 提供的绝大多数函数以及你自己创建的所有函数都可以使用call(..) 和apply(..) 方法。这两个方法是如何工作的呢?它们的第一个参数是一个对象,它们会把这个对象绑定到this,接着在调用函数时指定这个this。因为你可以直接指定this 的绑定对象,因此我们称之为显式绑定。
思考下面的代码:
function foo() { console.log( this.a ); } var obj = { a:2 }; foo.call( obj ); // 2
通过foo.call(..)
,我们可以在调用foo 时强制把它的this 绑定到obj 上。如果你传入了一个原始值(字符串类型、布尔类型或者数字类型)来当作this 的绑定对象,这个原始值会被转换成它的对象形式(也就是new String(..)
、new Boolean(..)
或者new Number(..)
)。这通常被称为“装箱”。从this 绑定的角度来说,call(..)
和apply(..)
是一样的,它们的区别体现在其他的参数上,但是现在我们不用考虑这些。可惜,显式绑定仍然无法解决我们之前提出的丢失绑定问题。
1. 硬绑定
但是显式绑定的一个变种可以解决这个问题。
思考下面的代码:
function foo() { console.log( this.a ); } var obj = { a:2 }; var bar = function() { foo.call( obj ); }; bar(); // 2 setTimeout( bar, 100 ); // 2 // 硬绑定的bar 不可能再修改它的this bar.call( window ); // 2
我们来看看这个变种到底是怎样工作的。我们创建了函数bar()
,并在它的内部手动调用了foo.call(obj)
,因此强制把foo 的this 绑定到了obj。无论之后如何调用函数bar,它总会手动在obj 上调用foo。这种绑定是一种显式的强制绑定,因此我们称之为硬绑定。
硬绑定的典型应用场景就是创建一个包裹函数,传入所有的参数并返回接收到的所有值:
function foo(something) { console.log( this.a, something ); return this.a + something; } var obj = { a:2 }; var bar = function() { return foo.apply( obj, arguments ); }; var b = bar( 3 ); // 2 3 console.log( b ); // 5
另一种使用方法是创建一个i 可以重复使用的辅助函数:
function foo(something) { console.log( this.a, something ); return this.a + something; } // 简单的辅助绑定函数 function bind(fn, obj) { return function() { return fn.apply( obj, arguments ); }; } var obj = { a:2 }; var bar = bind( foo, obj ); var b = bar( 3 ); // 2 3 console.log( b ); // 5
由于硬绑定是一种非常常用的模式,所以在ES5 中提供了内置的方法Function.prototype.bind
,它的用法如下:
function foo(something) { console.log( this.a, something ); return this.a + something; } var obj = { a:2 }; var bar = foo.bind( obj ); var b = bar( 3 ); // 2 3 console.log( b ); // 5
bind(..)
会返回一个硬编码的新函数,它会把参数设置为this 的上下文并调用原始函数。
2. API调用的“上下文”
第三方库的许多函数,以及JavaScript 语言和宿主环境中许多新的内置函数,都提供了一个可选的参数,通常被称为“上下文”(context),其作用和bind(..) 一样,确保你的回调函数使用指定的this。
举例来说:
function foo(el) { console.log( el, this.id ); } var obj = { id: "awesome" }; // 调用foo(..) 时把this 绑定到obj [1, 2, 3].forEach( foo, obj ); // 1 awesome 2 awesome 3 awesome
这些函数实际上就是通过call(..) 或者apply(..) 实现了显式绑定,这样你可以少些一些代码。
4.new绑定
这是第四条也是最后一条this 的绑定规则,在讲解它之前我们首先需要澄清一个非常常见的关于JavaScript 中函数和对象的误解。在传统的面向类的语言中,“构造函数”是类中的一些特殊方法,使用new 初始化类时会调用类中的构造函数。通常的形式是这样的:
something = new MyClass(..);
JavaScript 也有一个new 操作符,使用方法看起来也和那些面向类的语言一样,绝大多数开发者都认为JavaScript 中new
的机制也和那些语言一样。然而JavaScript 中new 的机制实际上和面向类的语言完全不同。
首先我们重新定义一下JavaScript 中的“构造函数”。在JavaScript 中,构造函数只是一些使用new 操作符时被调用的函数。它们并不会属于某个类,也不会实例化一个类。实际上,它们甚至都不能说是一种特殊的函数类型,它们只是被new 操作符调用的普通函数而已。
举例来说,思考一下Number(..)
作为构造函数时的行为,ES5.1 中这样描述它:
Number 构造函数
当Number 在new 表达式中被调用时,它是一个构造函数:它会初始化新创建的对象。
所以,包括内置对象函数(比如Number(..))在内的所有函数都可以用new 来调用,这种函数调用被称为构造函数调用。这里有一个重要但是非常细微的区别:实际上并不存在所谓的“构造函数”,只有对于函数的“构造调用”。使用new 来调用函数,或者说发生构造函数调用时,会自动执行下面的操作。
1. 创建(或者说构造)一个全新的对象。
2. 这个新对象会被执行[[ 原型]] 连接。
3. 这个新对象会绑定到函数调用的this。
4. 如果函数没有返回其他对象,那么new 表达式中的函数调用会自动返回这个新对象。
思考下面的代码:
function foo(a) { this.a = a; } var bar = new foo(2); console.log( bar.a ); // 2
使用new
来调用foo(..)
时,我们会构造一个新对象并把它绑定到foo(..)
调用中的this上。new 是最后一种可以影响函数调用时this 绑定行为的方法,我们称之为new 绑定。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。