JavaScript中 this 指向问题深度解析(2)

这里需要注意的是,后三种方式都是预定定义函数,再将其附加给 obj 对象作为其方法。再次强调,函数内部的 this 指向与定义无关,受调用方式的影响。

方法中 this 指向全局对象的情况

注意这里说的是 方法 中而不是 方法调用 中。方法中的 this 指向全局对象,如果不是因为 bind() ,那就一定是因为不是用的方法调用方式,比如

const obj = { test() { console.log(this === obj); } }; const t = obj.test; t(); // false

t 就是 obj 的 test 方法,但是 t() 调用时,其中的 this 指向了全局。

之所以要特别提出这种情况,主要是因为常常将一个对象方法作为回调传递给某个函数之后,却发现运行结果与预期不符——因为忽略了调用方式对 this 的影响。比如下面的例子是在页面中对某些事情进行封装之后特别容易遇到的问题:

class Handlers { // 这里 $button 假设是一个指向某个按钮的 jQuery 对象 constructor(data, $button) { this.data = data; $button.on("click", this.onButtonClick); } onButtonClick(e) { console.log(this.data); } } const handlers = new Handlers("string data", $("#someButton")); // 对 #someButton 进行点击操作之后 // 输出 undefined // 但预期是输出 string data 很显然 this.onButtonClick 作为一个参数传入 on() 之后,事件触发时,是对这个函数进行的直接调用,而不是方法调用,所以其中的 this 会指向全局对象。要解决这个问题有很多种方法 // 这是在 es5 中的解决办法之一 var _this = this; $button.on("click", function() { _this.onButtonClick(); }); // 也可以通过 bind() 来解决 $button.on("click", this.onButtonClick.bind(this)); // es6 中可以通过箭头函数来处理,在 jQuery 中慎用 $button.on("click", e => this.onButtonClick(e));

不过请注意,将箭头函数用作 jQuery 的回调时造成要小心函数内对 this 的使用。jQuery 大多数回调函数(非箭头函数)中的 this 都是表示调用目标,所以可以写 $(this).text() 这样的语句,但 jQuery 无法改变箭头函数的 this 指向,同样的语句语义完全不同。

new 调用

在 es6 之前,每一个函数都可以当作是构造函数,通过 new 调用来产生新的对象(函数内无特定返回值的情况下)。而 es6 改变了这种状态,虽然 class 定义的类用 typeof 运算符得到的仍然是 "function" ,但它不能像普通函数一样直接调用;同时, class 中定义的方法函数,也不能当作构造函数用 new 来调用。

而在 es5 中,用 new 调用一个构造函数,会创建一个新对象,而其中的 this 就指向这个新对象。这没有什么悬念,因为 new 本身就是设计来创建新对象的。

var data = "Hi"; // 全局变量 function AClass(data) { this.data = data; } var a = new AClass("Hello World"); console.log(a.data); // Hello World console.log(data); // Hi var b = new AClass("Hello World"); console.log(a === b); // false

箭头函数中的 this

先来看看 MDN 上对箭头函数的说明

An arrow function expression has a shorter syntax than a function expression and does not bind its own this , arguments , super , or new.target . Arrow functions are always anonymous. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

这里已经清楚了说明了,箭头函数没有自己的 this 绑定。箭头函数中使用的 this ,其实是直接包含它的那个函数或函数表达式中的 this 。比如

const obj = { test() { const arrow = () => { // 这里的 this 是 test() 中的 this, // 由 test() 的调用方式决定 console.log(this === obj); }; arrow(); }, getArrow() { return () => { // 这里的 this 是 getArrow() 中的 this, // 由 getArrow() 的调用方式决定 console.log(this === obj); }; } }; obj.test(); // true const arrow = obj.getArrow(); arrow(); // true

示例中的两个 this 都是由箭头函数的直接外层函数(方法)决定的,而方法函数中的 this 是由其调用方式决定的。上例的调用方式都是方法调用,所以 this 都指向方法调用的对象,即 obj 。

箭头函数让大家在使用闭包的时候不需要太纠结 this ,不需要通过像 _this 这样的局部变量来临时引用 this 给闭包函数使用。来看一段 Babel 对箭头函数的转译可能能加深理解:

// ES6 const obj = { getArrow() { return () => { console.log(this === obj); }; } } // ES5,由 Babel 转译 var obj = { getArrow: function getArrow() { var _this = this; return function () { console.log(_this === obj); }; } };

另外需要注意的是,箭头函数不能用 new 调用,不能 bind() 到某个对象(虽然 bind() 方法调用没问题,但是不会产生预期效果)。不管在什么情况下使用箭头函数,它本身是没有绑定 this 的,它用的是直接外层函数(即包含它的最近的一层函数或函数表达式)绑定的 this 。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwzxsw.html