js中this绑定机制的全面解析，帮你攻破面试难点

this绑定机制的解析

在JavaScript中，this是一个特殊的，它代表当前执行的函数或方法所作用的对象。this的绑定机制决定了this在不同情况下指向不同的对象。

1. 默认绑定

当一个函数作为普通函数调用时，this绑定到全局对象window。这意味着，函数中的this可以访问window对象的属性和方法。例如：

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

sayHello(); // 输出：undefined

在这个例子中，sayHello()函数被作为普通函数调用，this绑定到全局对象window，但是window对象没有name属性，因此console.log(this.name)输出undefined。

2. 显式绑定

可以通过使用call()、apply()或bind()方法来显式绑定this。这三个方法都可以接受两个参数：第一个参数是this要绑定的对象，第二个参数是函数的参数列表。例如：

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

var person = {
  name: 'John Doe'
};

sayHello.call(person); // 输出：John Doe

在这个例子中，sayHello()函数被显式绑定到person对象，因此this指向person对象，console.log(this.name)输出John Doe。

3. 隐式绑定

this还可以通过隐式绑定来确定。隐式绑定发生在以下两种情况下：

• 当一个函数作为对象的方法调用时，this绑定到该对象。例如：

var person = {
  name: 'John Doe',
  sayHello: function() {
    console.log(this.name);
  }
};

person.sayHello(); // 输出：John Doe

在这个例子中，sayHello()函数作为person对象的方法调用，因此this绑定到person对象，console.log(this.name)输出John Doe。

• 当一个函数作为构造函数调用时，this绑定到新创建的对象。例如：

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

var person = new Person('John Doe');

console.log(person.name); // 输出：John Doe

在这个例子中，Person()函数作为构造函数调用，this绑定到新创建的person对象，person对象具有name属性，因此console.log(person.name)输出John Doe。

4. this的箭头函数绑定

在箭头函数中，this的绑定是固定的，它取决于箭头函数所在的作用域。箭头函数中的this永远指向箭头函数被定义时所在的作用域中的this。例如：

var person = {
  name: 'John Doe',
  sayHello: () => {
    console.log(this.name);
  }
};

person.sayHello(); // 输出：undefined

在这个例子中，sayHello()函数是一个箭头函数，它被定义在person对象中，因此this指向person对象，但是箭头函数中的this是固定的，它永远指向sayHello()函数被定义时所在的作用域中的this，而sayHello()函数被定义时，this指向的是window对象，因此console.log(this.name)输出undefined。

this绑定机制的常见面试题

• 什么是this绑定机制？
• this的默认绑定是什么？
• 如何显式绑定this？
• 如何隐式绑定this？
• this的箭头函数绑定是如何工作的？
• 给出以下代码，输出结果是什么？

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

var person = {
  name: 'John Doe'
};

sayHello(); // 输出：undefined
person.sayHello(); // 输出：John Doe
var sayHelloPerson = person.sayHello;
sayHelloPerson(); // 输出：undefined

• 给出以下代码，输出结果是什么？

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

var person = new Person('John Doe');

console.log(person.name); // 输出：John Doe

总结

this绑定机制是JavaScript中一个重要的概念，理解this的绑定机制对于编写出高质量的JavaScript代码非常重要。通过阅读本文，您应该已经对this绑定机制有了深入的理解。如果您还有任何问题，欢迎在评论区留言。