在学习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
关键字时,需要注意以下几点:
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
。
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
指向被点击的按钮。
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