Javascript this关键字使用分析

在学习Javascript时，this是一个让初学者容易混淆的关键字。在本文中，我们将深入分析Javascript中this的使用规则和技巧，并提供两个示例说明。

`this`是什么

this关键字在Javascript中代表当前对象的上下文。具体来说，当一个函数被调用时，this就代表调用这个函数的对象。

`this`的使用规则

由于Javascript在函数调用时的上下文是动态的，this的值在不同情况下会有不同的取值。下面是this的一些使用规则：

在函数内部，this代表函数的调用者。如果函数作为对象的方法被调用，this代表这个对象。

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

obj.sayName(); // 输出 Jack

在单独调用函数时，this代表全局对象。在浏览器中，全局对象是window对象。

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

sayHi(); // 输出 window（浏览器环境下）

使用call或apply方法显式指定this的值。

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

const obj2 = {
  name: 'Tom'
};

obj.sayName.call(obj2); // 输出 Tom，使用call方法把this指向了obj2

使用bind方法创建一个新的函数，并永久地设置this的值。

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

const obj2 = {
  name: 'Tom'
};

const bindSayName = obj.sayName.bind(obj2);
bindSayName(); // 输出 Tom

`this`的注意点

当使用this关键字时，需要注意以下几点：

在ES6的箭头函数中，this指向它所在的上下文，而不是所创建的对象。

const obj = {
  name: 'Jack',
  sayName: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 100);  
  }
};

obj.sayName(); // 输出 Jack

如果在一个函数中引用this，需要注意函数内部函数的上下文问题。

const obj = {
  name: 'Jack',
  sayName: function() {
    setTimeout(function() {
      console.log(this.name);
    }, 100);  
  }
};

obj.sayName(); // 输出 undefined

上例中，内部函数中的this指向的是全局上下文，因此输出的是undefined。

示例1：使用`this`获取宽高并设置背景色

下面的示例使用this关键字来获取一个DOM元素的宽度和高度，并根据宽高设置背景色：

<button id="btn">点我获取宽高</button>

const btn = document.querySelector('#btn');

btn.onclick = function() {
  const width = this.offsetWidth;
  const height = this.offsetHeight;
  const color = `rgb(${width % 255}, ${height % 255}, 100)`;
  this.style.backgroundColor = color;
};

在这个例子中，点击按钮后，获取按钮的宽和高值，然后计算颜色值并设置背景色。在函数中，this指向被点击的按钮。

示例2：使用`call`方法改变函数上下文

下面的示例使用call方法改变函数上下文：

function sayHi() {
  console.log(`Hi, ${this.name}`);
}

const obj1 = {
  name: 'Jack'
};

const obj2 = {
  name: 'Tom'
};

sayHi.call(obj1); // 输出 Hi, Jack
sayHi.call(obj2); // 输出 Hi, Tom

在这个例子中，定义了一个函数sayHi，使用call方法改变上下文，输出了不同的结果。