博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS中this的绑定规则
阅读量:7197 次
发布时间:2019-06-29

本文共 2685 字,大约阅读时间需要 8 分钟。

前言

我们明白每个函数的 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 的调用位置复制代码

绑定规则 (注:皆不考虑严格模式)

1. 默认绑定

首先要介绍的是最常用的函数调用类型:独立函数调用。可以把这条规则看作是无法应用 其他规则时的默认规则。

思考一下下面的代码:

function foo() {console.log( this.a );}var a = 2;foo(); // 2复制代码

我们可以看到当调用 foo() 时,this.a 被解析成了全局变量 a。为什么?因为在本 例中,函数调用时应用了 this 的默认绑定,因此 this 指向全局对象

2. 隐式绑定

另一条需要考虑的规则是调用位置是否有上下文对象,或者说是否被某个对象拥有或者包 含,不过这种说法可能会造成一些误导。

思考下面的代码:

function foo() {console.log( this.a );}var obj = {a: 2,foo: foo};obj.foo(); // 2复制代码

当函数引 用(注:foo是引用函数,既指向function foo(){···}这个函数,而foo()才是调用函数)有上下文对象时,隐式绑定规则会把函数调用中的 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 绑定到全局对象。

思考下面的代码:

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 函数本身(注:var bar = obj.foo;相当于给这个函数又取了一个名字,所以bar();=foo();),因此此时的 bar() 其实是一个不带任何修饰的函数调用,因此应用了默认绑定。

3. 显式绑定

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 绑定的角度来说,call(..) 和 apply(..)还有bind(...) 是一样的,它们的区别体现 在其他的参数上,但是现在我们不用考虑这些。)

4. new绑定

在 JavaScript 中,构造函数只是一些 使用 new 操作符时被调用的函数。它们并不会属于某个类,也不会实例化一个类。实际上, 它们甚至都不能说是一种特殊的函数类型,它们只是被 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 绑定。

最后:优先级

现在我们已经了解了函数调用中 this 绑定的四条规则,你需要做的就是找到函数的调用位 置并判断应当应用哪条规则。但是,如果某个调用位置可以应用多条规则该怎么办?为了 解决这个问题就必须给这些规则设定优先级。

这里我就不做讨论了,直接给出结论:

new绑定 > 显示绑定 > 隐式绑定 > 默认绑定

有兴趣的同学可以自行去验证。

参考书籍:《你不知道的JavaScript(上卷)》

转载地址:http://wzakm.baihongyu.com/

你可能感兴趣的文章
Identifier:GUID (全局唯一标识符)
查看>>
WPF 与Surface 2.0 SDK 亲密接触–LibraryBar 篇
查看>>
SpringMVC之分析HandlerMethodReturnValueHandler(一)
查看>>
PHP eof的使用
查看>>
[Eclipse]GEF入门系列(三、应用实例)
查看>>
eval解析字符串问题
查看>>
Spring定时任务的几种实现
查看>>
[LintCode] 合并排序数组
查看>>
基于AngularJS的过滤与排序
查看>>
采用归并排序算法查找两个字符串数组中的不同数据
查看>>
爬虫入门
查看>>
《快学Scala》第三章 数组相关操作
查看>>
Android_Dialog cancle 和dismiss 区别
查看>>
【MVC版本】MVC3、MVC4之MODEL验证大比拼
查看>>
opencv的CMakeLists.txt与makefile写法
查看>>
计算机系统的层次存储结构详解
查看>>
frameset
查看>>
apache一个IP多个站点的配置方法
查看>>
VS 2013 中如何自定义快捷键(图解)
查看>>
RFID Hacking②:PM3入门指南
查看>>