最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

世界新动态：秒杀面试题！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指向全局对象。例如：

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

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

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

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

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

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

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

2.2.4 通过new关键字调用函数

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

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

3. this的运用

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

3.1 构造函数中使用this

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

JavaScript
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的指向，例如：

JavaScript
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值被绑定到指定的对象，例如：

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

4. 总结

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

原文链接：http://lao-zhao.com/post/27.html

关键词：