关键词

Javascript this关键字使用分析

Javascript this关键字使用分析

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

this是什么

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

this的使用规则

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

  1. 在函数内部,this代表函数的调用者。如果函数作为对象的方法被调用,this代表这个对象。
const obj = {
  name: 'Jack',
  sayName: function() {
    console.log(this.name);
  }
};

obj.sayName(); // 输出 Jack
  1. 在单独调用函数时,this代表全局对象。在浏览器中,全局对象是window对象。
function sayHi() {
  console.log(this);
}

sayHi(); // 输出 window(浏览器环境下)
  1. 使用callapply方法显式指定this的值。
const obj = {
  name: 'Jack',
  sayName: function() {
    console.log(this.name);
  }
};

const obj2 = {
  name: 'Tom'
};

obj.sayName.call(obj2); // 输出 Tom,使用call方法把this指向了obj2
  1. 使用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关键字时,需要注意以下几点:

  1. 在ES6的箭头函数中,this指向它所在的上下文,而不是所创建的对象。
const obj = {
  name: 'Jack',
  sayName: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 100);  
  }
};

obj.sayName(); // 输出 Jack
  1. 如果在一个函数中引用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方法改变上下文,输出了不同的结果。

结论

本文通过对Javascript中this关键字的解释和使用规则进行了分析,并提供了两个示例来说明this的具体应用。在使用this时,需要注意函数内部函数的上下文问题,以及箭头函数中this的取值规则。

本文链接:http://task.lmcjl.com/news/8177.html

展开阅读全文