JS中的this

本文从两方面讨论this：常规函数和箭头函数

 

首先明确：this指向JavaScript实例，因此只有在函数调用时才可以确定下来，而在函数声明时是无法确定的！

 

一、全局中的this

无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。

// 在浏览器中, window 对象同时也是全局对象：console.log(this === window); // true

二、常规函数中的this

1.纯粹的函数调用

//----------------------------example1-------------------------------
// 非严格模式下
function f1(){
    return this;
}
//在浏览器中：
f1() === window;   //在浏览器中，全局对象是window

//在Node中：
f1() === global; // true

//----------------------------example2-------------------------------
// 严格模式下
function f2(){
    "use strict"; // 这里是严格模式
    return this;
}

f2() === undefined; // true 此处的this为undefined是因为f2是直接被调用的，而不是作为某个对象的方法（如 window.f2()）被调用。

//----------------------------example3-------------------------------
// 将一个对象作为call和apply的第一个参数，this会被绑定到这个对象。
var obj = {a: 'Custom'};

// 这个属性是在global对象定义的。
var a = 'Global';

function whatsThis(arg) {
    return this.a;  // this的值取决于函数的调用方式
}

whatsThis();          // 写法1，严格模式为undefined，非严格模式为'Global'
whatsThis.call(undefined); // 写法2，严格模式为undefined，非严格模式为'Global'
whatsThis.call(obj);  // 可指定this，'Custom'
whatsThis.apply(obj); // 可指定this，'Custom'
whatsThis.bind(obj)(); // 可绑定this，'Custom'
whatsThis.bind(obj).bind({a: 'aHhha'})(); // this只可绑定一次，'Custom'

 

上面的写法1和写法2是等价的，写法1是写法2 的语法糖。

写法2中call方法接收的第一个参数就是this，这里传了一个undefined，此时有如下定义：

如果你传的 context 是 null 或者 undefined，那么非严格模式下， window 对象（浏览器）或global（Node）就是默认的 context，严格模式下默认 context是 undefined。

 

2.对象中的函数的this

当函数作为对象里的方法被调用时，它们的 this 是调用该函数的对象。最靠近的引用优先级最高。

var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // logs 37， 函数调用关系为从o的f成员调用

o.b = {g: independent, prop: 42};
console.log(o.b.g()); // 42 最靠近的引用优先级最高
console.log(o.f.call({prop: 53}));  // 使用call可改变this

 

3.构造函数中的this

当函数作为构造函数被new返回一个对象时，该对象即为this。

function C(){
  this.a = 37;
}

var o = new C();
console.log(o.a); // logs 37


function C2(){
  this.a = 37;
  return {a:38};
}

o = new C2();
console.log(o.a); // logs 38

 

4.作为DOM元素的监听处理函数的this

当函数被作为DOM元素的监听处理函数时，它的this指向监听器所在的DOM元素，但只有最外层代码中的this是这样的：

<button onclick="alert(this.tagName.toLowerCase());">  <!-- button -->
  Show this
</button>
<button onclick="alert((function(){return this})());">  <!-- 非严格模式下指向global/window -->
  Show inner this
</button>

 

5.window.setTimeout()和window.setInterval()的this

window.setTimeout()和window.setInterval()的函数中的this默认是window对象。

 

总结：常规函数中，有以下总结：

this只有在函数被调用时才能确定下来，this指向调用函数的对象；this最靠近的引用优先级最高；可以用call()或bind()指定this；构造函数的this指向new返回的对象；DOM元素的监听处理函数的this指向监听器所在的DOM元素；window.setTimeout()和window.setInterval()的函数中的this默认是window对象。

 

三、箭头函数的this

1.箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。

function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0;

  setInterval(function growUp() {
    // 在非严格模式, growUp()函数定义 `this`作为全局对象, 
    // 与在 Person()构造函数中定义的 `this`并不相同.
    this.age++;
    console.log(this.age) //NAN
  }, 1000);
}

var p = new Person();

 

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例，继承作用域链 箭头函数=>Person
  }, 1000);
}

var p = new Person();

 

2.箭头函数不能用call()指定this

const obj = {
    a: () => {
        console.log(this)
    }
}
obj.a.call('123')  //window，继承作用域链 箭头函数=>window

　　

3.箭头函数不能用bind()指定this

var globalObject = this;
var foo = (() => this);
var obj = {foo: foo};
foo = foo.bind(obj);
console.log(foo() === globalObject); // true

 

总结：箭头函数中，有以下总结：

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this；箭头函数不能用call()或bind()指定this。

 

欢迎留言交流。 

本文参考：

https://juejin.im/post/5aa1eb056fb9a028b77a66fd

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arrow_functions

 

2019.9.12

yangqianqian