当前位置:  首页>> 技术小册>> JavaScript面试指南

JavaScript中的this关键字是一个非常常用的概念。this是一个指向当前执行上下文的对象,它的值取决于当前代码的执行环境。在不同的上下文中,this的指向也会不同。

下面是一些常见的情况:

全局上下文:在全局上下文中,this指向全局对象window(在浏览器环境下)或global对象(在Node.js环境下)。

  1. console.log(this === window); // true (在浏览器环境下)
  2. console.log(this === global); // true (在Node.js环境下)

函数上下文:在函数中,this指向调用该函数的对象。如果函数是作为全局函数调用的,那么this指向全局对象;如果函数是作为某个对象的方法调用的,那么this指向该对象。

  1. var obj = {
  2. prop: "Hello",
  3. greet: function() {
  4. console.log(this.prop);
  5. }
  6. };
  7. obj.greet(); // "Hello"
  8. var func = obj.greet;
  9. func(); // undefined,因为此时的this指向全局对象,没有prop属性

构造函数上下文:在使用new关键字创建对象时,this指向新创建的对象。

  1. function Person(name, age) {
  2. this.name = name;
  3. this.age = age;
  4. }
  5. var person = new Person("Alice", 25);
  6. console.log(person.name); // "Alice"

call()和apply()方法:call()和apply()方法可以显式地指定函数执行时的this指向。

  1. var obj1 = { prop: "Hello" };
  2. var obj2 = { prop: "World" };
  3. function greet() {
  4. console.log(this.prop);
  5. }
  6. greet.call(obj1); // "Hello"
  7. greet.call(obj2); // "World"

箭头函数:箭头函数没有自己的this,它的this指向外层的词法作用域。

  1. var obj = {
  2. prop: "Hello",
  3. greet: function() {
  4. setTimeout(() => console.log(this.prop), 1000);
  5. }
  6. };
  7. obj.greet(); // "Hello",因为箭头函数的this指向obj对象的this

this的指向取决于当前执行上下文,而不是定义时的上下文。理解this是JavaScript中很重要的一个概念,需要多写代码实践来加深理解。


该分类下的相关小册推荐: