JavaScript中,this的绑定规则

开发 前端
对于 JavaScript 新手来说,this 是非常基础同时也难以理解的知识点。

[[315489]]

对于 JavaScript 新手来说,this 是非常基础同时也难以理解的知识点。

比如下面的代码,this 指向就有三种方式。 

  1. function foo() {  
  2.   console.log(this.a);  
  3.  
  4. var a = 1 
  5. var obj = { a: 2, foo: foo };  
  6. foo(); // 1  
  7. obj.foo(); // 2  
  8. foo.call({ a: 3 }); // 3 

在《你不知道的 JavaScript》一书中,我总算比较清晰理解了 this。

this 就是函数运行时所在的环境对象,它指向运行时所在的位置,而不是定义时的位置。

根据 this 绑定规则,分为下面四种:

  1.  默认绑定
  2.  隐式绑定
  3.  显式绑定
  4.  new 绑定

1. 默认绑定

默认情况下,this 指向全局对象。例如下面的代码。 

  1. var a = 2 
  2. console.log(this.a); // 2  
  3. // 在函数中  
  4. function foo() {  
  5.   console.log(this.a);  
  6.  
  7. foo(); // 2  
  8. // 在回调函数中  
  9. function doFoo() {  
  10.   return function() {  
  11.     console.log(this.a);  
  12.   };  
  13.  
  14. doFoo()(); // 2 

不过,函数在严格模式下,this 无法指向全局对象,因此this会绑定到undefined。 

  1. function foo() {  
  2.   "use strict";  
  3.   console.log(this);  
  4.  
  5. foo(); // undefined 

2. 隐式绑定

当函数作为方法被调用,需考虑运行时上下文环境。 

  1. function foo() {  
  2.   console.log(this.a);  
  3.  
  4. var obj = { a: 2, foo: foo };  
  5. obj.foo(); // 2 

代码中,foo()前面添加了obj对象的修饰,因此,obj对象就是函数的上下文。

this 会绑定到这个对象上。

另外,需要注意下面三种情况,它们会出现绑定对象丢失,从而把this绑定到全局对象或undefined上。

情况一

这段代码中,虽然obj.foo()和bar()都指向同一函数,但执行结果并不一样。

可以理解为,bar()是一个不带任何修饰的函数调用,等价于直接调用foo(),因此应用了默认绑定。 

  1. function foo() {  
  2.   console.log(this.a);  
  3.  
  4. var a = 3 
  5. var obj = { a: 2, foo: foo };  
  6. var bar = obj.foo;  
  7. obj.foo(); // 2  
  8. bar(); // 3 

情况二

另一种情况,发生在回调函数中。原理和上面的情况一样。

修改上面的代码,obj.foo作为参数传入doFoo()函数中,实际上,引用的是foo()函数本身,因此应用了默认绑定。 

  1. function foo() {  
  2.   console.log(this.a);  
  3.  
  4. var a = 3 
  5. var obj = { a: 2, foo: foo };  
  6. function doFoo(fn) {  
  7.   return fn();  
  8.  
  9. doFoo(obj.foo);  // 3 

情况三

在一些流行的 JavaScript 库,进行事件处理操作时,回调函数的 this 可能会强制绑定到 DOM 元素上。

这种情况也值得注意。

3. 显式绑定

JavaScript 提供了call()、apply()和bind()方法,可以强制绑定函数的this对象。 

  1. function fn() {  
  2.   console.log(this.a);  
  3.  
  4. fn.call({ a: 3 }); // 3 

通过fn.call(obj),我们将函数运行时,this强制绑定到obj上。

call apply和bind的区别

call 和 apply 改变了函数的 this 上下文后,便执行该函数,而 bind 则是将该函数返回。 

  1. function fn() {  
  2.     console.log(this.a);  
  3.  
  4. fn.call({ a: 3 }); // 3  
  5. fn.bind({ a: 4 })(); // 4 

call和apply的区别

call 和 apply 的区别在于传入参数不同。

call 方法接收若干个参数列表。

apply 第一个参数和 call 一样,第二个参数接收一个包含多个参数的数组。 

  1. let arr = [2, 5, 9]  
  2. console.log(Math.max.call(3, 2, 5, 9))  // 9  
  3. console.log(Math.max.call(3, arr))  // NaN  
  4. console.log(Math.max.apply(3, arr))  // 9 

4. new 绑定

如果使用 new 构造函数,在函数内部,this 指向新创建的对象。 

  1. function foo() {  
  2.   console.log(this);  
  3.  
  4. new foo(); // foo {}  
  5. foo(); // Window {...} 

其他情况

需要忽略的this

若第三方库的某个函数使用了 this,默认绑定会把this指向全局对象,从而导致不可预测的后果。

一个安全的做法,就是使用显式绑定,将函数的this指向空对象。 

  1. function foo() {  
  2.   console.log(this);  
  3.  
  4. // 创建空对象  
  5. var ø = Object.create(null);  
  6. // 使用bind()进行柯里化(Curry)  
  7. var bar = foo.bind(ø);  
  8. bar(); // {} 

这方法通常也用于对象初始化,以获得一个干净且高度可定制的对象。

箭头函数

箭头函数常用于回调函数中。

它会继承父级作用域 this 绑定的对象,等价于ES6之前self = this的书写方式。 

  1. const people = {  
  2.     name: "Merry",  
  3.     sayHi() {  
  4.         console.log(this.name)  
  5.     },  
  6.     wait() {  
  7.         setTimeout(() => {  
  8.             console.log(this.name)  
  9.         })  
  10.     }  
  11.  
  12. people.sayHi() // Merry  
  13. people.wait()  // Merry 

此外还有软绑定(softBind),用的不多,了解一下即可。 

 

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2020-08-04 10:31:53

JavaScriptthis开发

2016-10-11 20:33:17

JavaScriptThisWeb

2022-08-24 15:57:17

图片轮廓

2012-10-10 17:45:49

JavaScriptJavaScript规JavaScript控

2015-10-08 15:36:24

JavaScript规则

2009-03-13 09:39:34

JavaScript函数调用规则

2011-09-09 17:31:45

Android WebJavascript

2017-10-27 22:03:35

javascrip

2009-03-17 15:36:29

JavaScript循环事件

2010-04-23 13:23:42

Silverlight

2022-07-07 09:19:24

JavaScript代码样式规则

2010-09-01 13:03:12

CSS规则

2023-12-29 12:02:44

Python​LEGBLocal

2010-07-30 10:45:08

Flex数据绑定

2023-10-07 11:04:58

WPF数据UI

2014-01-03 09:13:39

JavaScriptthis

2013-05-08 10:36:07

JavaScriptJS详解JavaScrip

2012-06-17 12:49:03

并发并发编程

2014-12-29 10:19:01

Java

2010-04-20 15:58:15

Oracle 语句
点赞
收藏

51CTO技术栈公众号