JavaScript 中 this 和 self 的区别

Java

JavaScript中的this和self是两个常用的关键字，它们在代码中有着不同的用法和含义。本文将介绍this和self的区别，并通过案例代码进行说明。

1. this关键字

在JavaScript中，this关键字用于指向当前执行代码的对象。具体来说，this指向调用当前函数的对象。在全局作用域中，this指向全局对象（通常是window对象），而在函数内部，this指向调用该函数的对象。

案例代码：

Javascript
var person = {
  name: 'John',
  age: 30,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};
person.sayHello(); // 输出：Hello, my name is John

在上述代码中，person对象中的sayHello方法使用了this关键字来引用person对象的name属性。当调用person.sayHello()时，this指向person对象，因此打印出了正确的结果。

2. self关键字

与this关键字类似，self也可以用于引用当前执行代码的对象。然而，self并不是JavaScript的内置关键字，它是一种常见的编程习惯，用于解决this关键字在嵌套函数中指向错误对象的问题。

案例代码：

Javascript
var person = {
  name: 'John',
  age: 30,
  sayHello: function() {
    var self = this;
    setTimeout(function() {
      console.log('Hello, my name is ' + self.name);
    }, 1000);
  }
};
person.sayHello(); // 1秒后输出：Hello, my name is John

在上述代码中，使用self关键字来引用person对象，然后在setTimeout函数内部使用self.name来获取正确的name属性。如果直接使用this.name，则会报错或输出undefined，因为setTimeout函数的执行环境是全局作用域，this指向全局对象而不是person对象。

3. this和self的区别

在前面的例子中，我们可以看到this关键字和self关键字的使用方式有一些差异。this关键字是JavaScript的内置关键字，它指向调用当前函数的对象；而self关键字是一种编程习惯，用于解决this关键字在嵌套函数中指向错误对象的问题。

使用this关键字的优势：

- this关键字更直观，符合JavaScript的语法规范；

- 可以在不同的作用域中动态地指向不同的对象。

使用self关键字的优势：

- 在嵌套函数中，使用self关键字可以避免this指向错误对象的问题；

- self关键字在一些旧版浏览器中也能正常工作，而this关键字可能会出现兼容性问题。

this关键字和self关键字在JavaScript中都用于引用当前执行代码的对象，但它们的使用方式和含义有所不同。this关键字是JavaScript的内置关键字，它指向调用当前函数的对象；而self关键字是一种编程习惯，用于解决this关键字在嵌套函数中指向错误对象的问题。根据具体的需求和浏览器兼容性要求，我们可以选择合适的关键字来引用对象。

参考代码：

Javascript
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
Car.prototype.getMake = function() {
  return this.make;
};
var myCar = new Car('Toyota', 'Camry', 2020);
console.log(myCar.getMake()); // 输出：Toyota

在上述代码中，我们定义了一个Car构造函数，并通过原型链为其添加了getMake方法。当我们使用new关键字创建一个Car对象时，this关键字指向新创建的对象。因此，myCar.getMake()返回了正确的make属性值"Toyota"。