javascript中this的四种用法

当我们使用JavaScript进行编程时，经常会使用到this关键字。this的含义在不同的情况下有不同的用法。下面将详细讲解Javascript中this的四种用法。

1. 默认绑定

默认绑定是指当我们调用一个函数时，如果该函数中使用了this，而且该函数没有使用任何上下文绑定的方法，那么this的值就是全局对象（在浏览器中就是window对象）。

以下是一个示例代码：

function sayHi() {
  console.log(this.name);
}

var name = "globalName";
var obj1 = {
  name: "object1Name",
  sayHi: sayHi
}

var obj2 = {
  name: "object2Name"
}

sayHi(); // "globalName"
obj1.sayHi(); // "object1Name"
obj1.sayHi.call(obj2); // "object2Name"

在上面的sayHi函数中，没有使用任何上下文绑定的方法，因此在执行函数时，this的值就是默认绑定的值，即全局对象（window）。在调用obj1.sayHi()时，this的值就是obj1，因为函数被一个对象所调用，对象就是上下文，函数的执行上下文被绑定到了该对象上。在调用obj1.sayHi.call(obj2)时，虽然调用了obj1中的sayHi方法，但是使用了call方法将上下文绑定到了obj2上，因此this的值就是obj2。

2. 隐式绑定

隐式绑定是指当一个函数被一个对象所调用时，函数中的this关键字将被绑定到该对象。下面是一个示例代码：

var person = {
  name: "Tom",
  sayHi: function() {
    console.log("Hi, my name is " + this.name);
  }
}
person.sayHi(); // "Hi, my name is Tom"

在上面的代码中，调用person.sayHi()时，this的值被绑定到了person对象，因为sayHi函数是由person对象来调用的。

3. 显示绑定

显示绑定是指我们使用call、apply或者bind方法来明确指定this关键字的值。下面是一个示例代码：

function sayHi() {
  console.log("Hi, my name is " + this.name);
}

var person1 = {
  name: "Tom",
}

var person2 = {
  name: "Jerry",
}

sayHi.call(person1); // "Hi, my name is Tom"
sayHi.apply(person2); // "Hi, my name is Jerry"
sayHi.bind(person1)(); // "Hi, my name is Tom"

在上面的代码中，我们使用了call、apply和bind方法将sayHi函数的上下文绑定到person1或person2对象上。使用call和apply方法，可以直接传递参数给函数，而使用bind方法则需要在后面加()来进行调用。

4. new绑定

当我们使用new关键字来创建一个对象的实例时，this关键字会被绑定到新创建的对象实例上。以下是一个示例代码：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log("Hi, my name is " + this.name + ", I'm " + this.age + " years old.");
  }
}

var person1 = new Person("Tom", 18);
var person2 = new Person("Jerry", 20);

person1.sayHi(); // "Hi, my name is Tom, I'm 18 years old."
person2.sayHi(); // "Hi, my name is Jerry, I'm 20 years old."

在代码中，我们使用new关键字来创建了两个Person对象的实例，this关键字被绑定到了这两个新创建的对象实例上。因此，在调用sayHi方法时，this的值就是这两个对象实例。