JavaScript关键字this的用法总结

1. 什么是this

在 JavaScript 中，this 关键字指的是当前作用域下的对象，通常是在函数内部使用的。

2. this的用法

在 JavaScript 中，this 的值是动态确定的，即它的值依赖于函数的调用方式。下面就 someFunction 函数来说明 this 的用法。

function someFunction(arg1, arg2) {
  console.log(this);
}

2.1 函数作为对象的方法调用

如果函数是作为对象的方法被调用的，那么 this 就会绑定到这个对象上。

const myObject = {
  name: 'John',
  age: 30,
  sayHello: function() {
    console.log(this.name);
  }
}

myObject.sayHello(); // 输出 John

2.2 函数作为构造函数调用

如果函数被用作构造函数，那么 this 就会绑定到新创建的对象上。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person('John', 30);
console.log(person1); // 输出 Person { name: "John", age: 30 }

2.3 函数作为普通函数调用

如果函数作为普通函数调用，那么 this 就会绑定到全局对象（浏览器中通常是 window，Node.js 中是 global）上。

function someFunction() {
  console.log(this);
}

someFunction(); // 在浏览器中输出 window，在 Node.js 中输出 global

3. 注意事项

• 使用箭头函数定义的函数没有自己的 this 值，继承的是其父作用域的 this 值。

• 使用 call()、apply() 或 bind() 可以更改 this 的上下文。

4. 总结

在 JavaScript 中，this 关键字的值是动态的，它的值由函数的执行环境决定。在函数内部，this 可以被用来引用对象，其中 this 的实际值在代码执行时才会得到确定。

5. 示例代码

下面给出了一个更多 this 的用法和示例代码

var name = 'global'

var obj = {
  name: 'obj',
  sayName: function() {
    console.log(this.name)
  }
}

function sayName() {
  console.log(this.name)
}

var bindObjFn = sayName.bind(obj)

obj.sayName()         // 输出 obj
sayName()             // 输出 global
bindObjFn()           // 输出 obj

在该示例代码中：

• obj.sayName() 为调用对象方法的形式，函数内部 this 的指向为调用该方法的对象 obj。

• sayName() 调用是通过全局对象调用的普通函数，所以函数内 this 的指向为全局对象。

• bindObjFn() 调用是通过 bind() 改变 this 指向，bind() 是函数的原型方法，利用闭包可以保存 obj，bindObjFn() 调用方法就会指向 obj。