秒杀面试题!JS中this指向的理解和运用

前端老赵前端老赵 前端开发培训 1496 0

秒杀面试题!JS中this指向的理解和运用


1.引言

本文旨在讲解JavaScript中的this指向的概念和运用,帮助前端开发者更好地理解和应用this关键字。


2.this的概念

在JavaScript中,this是一个关键字,用于指向当前执行代码的对象。它的值在函数执行时确定,具体取决于函数的调用方式。


2.1 全局上下文中的this

在全局上下文中,this指向的是全局对象(例如浏览器中的window对象),即使没有显式指定this。可以通过以下代码验证:

console.log(this === window); // 输出true


2.2 函数上下文中的this

在函数内部,this的值取决于函数的调用方式。可以通过以下四种方式调用函数:


2.2.1 直接调用函数

当函数以独立函数的形式调用时,this指向全局对象。例如:


function test() {
  console.log(this === window);
}
test(); // 输出true


2.2.2 作为对象的方法调用函数

当函数作为对象的方法调用时,this指向该对象。例如:


var obj = {
  test: function() {
    console.log(this === obj);
  }
};
obj.test(); // 输出true



2.2.3 通过call()和apply()方法调用函数

通过call()和apply()方法可以改变函数内部this的指向。例如:


function test() {
  console.log(this);
}
test.call("hello"); // 输出字符串"hello"
test.apply("world"); // 输出字符串"world"


2.2.4 通过new关键字调用函数

当使用new关键字调用函数时,this指向新创建的对象。例如:


function Person(name) {
this.name = name;
}
var person = new Person("Tom");
console.log(person.name); // 输出"Tom"



3. this的运用

this在JavaScript中有很多运用场景,以下列举几个常用的场景。


3.1 构造函数中使用this

在构造函数中,this通常用于指向新创建的对象,例如:



function Person(name, age) {
this.name = name;
this.age = age;
}
var person = new Person("Tom", 18);
console.log(person.name); // 输出"Tom"
console.log(person.age); // 输出18



3.2 使用call()和apply()方法调用函数

call()和apply()方法可以改变函数内部this的指向,例如:


var obj1 = {
name: "Tom",
getName: function() {
return this.name;
}
};
var obj2 = {
name: "Jerry"
};
console.log(obj1.getName.call(obj2)); // 输出"Jerry"
console.log(obj1.getName.apply(obj2)); // 输出"Jerry"



3.3 使用bind()方法绑定this

bind()方法可以创建一个新函数,其this值被绑定到指定的对象,例如:


var obj = {
name: "Tom",
getName: function() {
return this.name;
}
};
var getName = obj.getName.bind(obj);
console.log(getName()); // 输出"Tom"


4. 总结

this是JavaScript中一个重要的关键字,它用于指向当前执行代码的对象。学好this指向对于前端开发十分重要,请大家一定要掌握!




本文系前端老赵独家发表,未经许可,不得转载。

喜欢0发布评论

评论列表

  • 小小甜心 发表于 2年前

    实用性强,讲解得非常清晰,让我受益匪浅,再次感谢老师的分享!

发表评论

  • 昵称(必填)
  • 邮箱
  • 网址