语言►JavaScript

JavaScript中的this

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/03/12/JavaScript%E4%B8%AD%E7%9A%84this/

摘要

本文主要讲述了：

  1. 浏览器中的this
  2. nodejs 中的this

正文

浏览器中的this

全局上下文

在全局上下文中（即任何函数之外），无论是否是严格模式，this永远指向全局对象

示例：

1
2
// true
console.log(this === window);

示例：

1
2
3
4
'use strict';

// true
console.log(this === window);

函数上下文

在函数上下文中（即函数的内部），this的指向取决于函数的调用方式。

直接调用时：

  • 在非严格模式下，this指向全局对象
  • 在严格模式下，this指向undefined

示例：

1
2
3
4
5
function foo() {
  return this;
}
// true
console.log(foo() === window);

示例：

1
2
3
4
5
6
7
'use strict';

function foo() {
  return this;
}
// true
console.log(foo() === undefined);

作为对象的方法调用时：

  • this指向对象本身

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
var foo = {
  name: 'foo',
  sayHello: function () {
    console.log(this === foo);
  },
};
// 作为对象方法调用，this指向对象本身
// true
foo.sayHello();
var sayHello = foo.sayHello;
// 直接调用，非严格模式下this指向全局对象，严格模式下this指向undefined
// false
sayHello();

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
'use strict';
var foo = {
  name: 'foo',
  sayHello: function () {
    console.log(this === foo);
  },
};
// 作为对象方法调用，this指向对象本身
// true
foo.sayHello();
var sayHello = foo.sayHello;
// 直接调用，非严格模式下this指向全局对象，严格模式下this指向undefined
// false
sayHello();

示例：

1
2
3
4
5
6
function foo() {
  return this;
}
// 作为对象方法调用，this指向对象本身
// true
console.log(window.foo() === window);

示例：

1
2
3
4
5
6
7
8
'use strict';

function foo() {
  return this;
}
// 作为对象方法调用，this指向对象本身
// true
console.log(window.foo() === window);

示例：

1
2
3
4
5
6
7
8
9
function foo() {
  return this;
}
// true
console.log(foo.call(window) === window);
// true
console.log(foo.apply(window) === window);
// false
console.log(foo.bind({ age: 18 })() === window);

示例：

1
2
3
4
5
6
7
8
9
10
11
'use strict';

function foo() {
  return this;
}
// true
console.log(foo.call(window) === window);
// true
console.log(foo.apply(window) === window);
// false
console.log(foo.bind({ age: 18 })() === window);

类上下文

  • 原型方法（包括构造函数）中的this指向实例本身
  • 静态方法中的this指向类本身（类的构造函数）

继承

  • 原型方法（包括构造函数）中的this指向实例本身；指向调用它的那个实例本身
  • 静态方法中的this指向类本身（类的构造函数）；指向调用它的那个类本身（类的构造函数）

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class Animal {
  static isAnimal() {
    return this;
  }

  sayHello() {
    return this;
  }
}

class Human extends Animal {}

// 静态方法中的`this`指向类本身（类的构造函数）
// 指向调用它的那个类本身（类的构造函数）
// true
console.log(Human.isAnimal() === Human);
// true
console.log(Animal.isAnimal() === Animal);

// 原型方法（包括构造函数）中的`this`指向实例本身
// 指向调用它的那个实例本身
// true
console.log(Human.prototype.sayHello() === Human.prototype);
// true
console.log(Animal.prototype.sayHello() === Animal.prototype);

箭头函数

箭头函数中的this指向：箭头函数被定义时所在的对象

示例：

使用前：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const foo = {
  name: 'foo',
  sayHello: function () {
    // 作为对象方法调用，this指向对象本身
    console.log(this);

    setTimeout(function () {
      // 直接调用，非严格模式下this指向全局对象，严格模式下this指向undefined
      // 在nodejs中，`this`指向`Timeout`实例
      console.log(this);
    }, 1e3);
  },
};

foo.sayHello();

使用后：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const foo = {
  name: 'foo',
  sayHello: function () {
    // 作为对象方法调用，this指向对象本身
    console.log(this);

    setTimeout(() => {
      // 箭头函数在foo中被定义，this指向foo
      console.log(this);
    }, 1e3);
  },
};

foo.sayHello();

nodejs 中的this

注：nodejs 中的全局对象是global

模块上下文

模块中的this指向module.exports

示例：

1
2
// true
console.log(this === module.exports);

示例：

1
2
3
4
'use strict';

// true
console.log(this === module.exports);

因此，也可以通过this来进行赋值，以达到输出的目的

示例：

learn_node/index.js

1
2
3
4
const foo = require('./foo.js');

// { name: 'foo' }
console.log(foo);

learn_node/foo.js

1
this.name = 'foo';

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/03/12/JavaScript%E4%B8%AD%E7%9A%84this/

本文对你有帮助？请支持我

支付宝
微信