JavaScript this 上下文深度探索：综合指南涵盖隐式与显式call、apply、bind、箭头函数、构造函数等用法于多样场景

2024-05-02 10:44
文章标签 java 综合 函数 深度 script 用法 场景 bind 探索 call apply 指南 构造函数 隐式 上下文 箭头 多样 涵盖 显式

本文主要是介绍JavaScript this 上下文深度探索：综合指南涵盖隐式与显式call、apply、bind、箭头函数、构造函数等用法于多样场景，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

JavaScript中的this关键字代表函数执行的上下文环境，核心在于确定函数内部访问的当前对象。它根据函数调用方式动态变化，对事件处理、对象方法调用等至关重要。通过.call(), .apply(), .bind()或箭头函数控制this，可确保代码逻辑正确绑定对象，避免意外行为，提升程序的稳定性和可维护性。

在JavaScript中，函数调用时this的值由调用的上下文决定，可以分为隐式上下文和显式上下文两种情况。本文详细介绍了隐式上下文对象方法调用、全局上下文、构造函数调用方法与场景，显式上下文call、apply、bind、箭头函数指定方法以及显式上下文指定事件处理、回调函数、定时器等主要场景应用。

一、隐式上下文（Implicit Context）

隐式上下文指的是在函数调用时，根据调用方式自动确定this的值，无须开发者显式指定。JavaScript中有几种常见的隐式上下文情况：

  1. 作为对象方法调用：
    当一个函数作为某个对象的属性被调用时，this会被绑定到该对象上。

    const obj = {name: 'Alice',sayHello: function() {console.log('Hello, ' + this.name);},
};
obj.sayHello(); // 输出: Hello, Alice

  2. 全局上下文：
    在非严格模式下，如果函数不作为对象的方法调用，this默认指向全局对象（在浏览器中是window，Node.js中是global）。在严格模式（使用use strict声明）下，this会是undefined。

    function globalContextExample() {console.log(this);
}
globalContextExample(); // 非严格模式下输出: Window (浏览器环境)

  3. 构造函数调用：
    使用new关键字调用函数时，this会被绑定到新创建的实例上。

    function Person(name) {this.name = name;
}
const bob = new Person('Bob');
console.log(bob.name); // 输出: Bob

二、显式上下文（Explicit Context）

显式上下文指的是开发者通过特定手段明确指定函数调用时this的指向，主要有以下几种方法：

1. 直接调用与上下文调整

  • .call(thisArg, arg1, arg2, ...): 直接调用函数，并传递参数列表。
  • .apply(thisArg, [argsArray]): 类似.call(), 但参数必须是数组（或类数组对象）。

1.1. 使用 call()

call() 方法可以让你设置函数执行时的this值，并直接调用该函数，同时可以传递参数列表。

示例:

function greet(greeting) {console.log(`${greeting}, ${this.name}!`);
}const person = { name: 'Alice' };greet.call(person, 'Hello'); // 输出: Hello, Alice!

1.2. 使用 apply()

apply() 类似于call(), 但它接收一个数组作为参数列表。

示例:

function sum(a, b) {return a + b;
}const numbers = [1, 2];console.log(sum.apply(null, numbers)); // 输出: 3

2.函数绑定与预设上下文

  • .bind(thisArg, arg1, arg2, ...): 创建一个新的函数，其this值被绑定到thisArg，并可以预设参数。新函数需要被手动调用。

bind() 方法创建一个新的函数，其this值会被永久绑定到传入的第一个参数，之后你可以随时调用这个新函数。

示例:

function greet(greeting) {console.log(`${greeting}, ${this.name}!`);
}const personGreet = greet.bind({ name: 'Bob' });personGreet('Hello'); // 输出: Hello, Bob!

3. 箭头函数：

箭头函数不绑定自己的this，它会捕获其所在上下文的this值，这也是显式控制的一种形式，尽管是在定义时固定下来。

const obj = {name: 'Alice',sayHello: () => {console.log('Hello, ' + this.name);},
};
const context = { name: 'Bob' };
obj.sayHello.call(context); // 输出: Hello, Alice (而非Bob)，因为箭头函数不改变this

理解隐式与显式上下文的区别，对于准确控制函数内部this的指向，特别是在复杂的项目和库的开发中，至关重要。

三、显式上下文this 应用场景

显式上下文中的this是指在JavaScript中通过诸如.bind(), .call(), .apply()方法或箭头函数等手段，明确指定函数执行时this的指向，确保函数内部的this符合预期，特别是在事件处理、回调函数、定时器等场景中，以避免默认上下文带来的意料之外的行为。

1. 事件处理器

在JavaScript事件处理中，this关键字的行为经常引起混淆，特别是当涉及到匿名函数或箭头函数作为事件监听器时。正确绑定this对于确保事件处理器能访问到预期的上下文对象是非常重要的。以下是几种在事件处理中绑定this的策略：

1.1. 使用.bind()

.bind()方法可以创建一个新的函数，其this值被永久绑定到传入的第一个参数。这对于确保事件处理器中的this指向正确的对象特别有用。

class MyComponent {constructor() {this.handleClick = this.handleClick.bind(this);document.getElementById('myButton').addEventListener('click', this.handleClick);}handleClick() {console.log(this); // 此处的this指向MyComponent实例}
}

1.2. 箭头函数

箭头函数不绑定自己的this，它会捕获其所在上下文的this值。这使得箭头函数成为事件处理器中避免this问题的简便方法。

class MyComponent {constructor() {document.getElementById('myButton').addEventListener('click', () => this.handleClick());}handleClick() {console.log(this); // 此处的this同样指向MyComponent实例}
}

1.3. 在事件监听器中直接绑定

在添加事件监听器时，部分库（如jQuery）提供了直接绑定this的选项。

document.getElementById('myButton').addEventListener('click', this.handleClick.bind(this));

或者使用ES2016的::运算符（箭头函数的语法糖）：

document.getElementById('myButton').addEventListener('click', this.handleClick);
// 注意：原生JavaScript不支持::运算符，此为伪代码，实际应用中应使用bind或箭头函数。

1.4. 使用闭包或变量保存上下文

在一些旧的或特定的场景中，可以通过闭包或者外部变量来保存this的引用。

class MyComponent {constructor() {const self = this;document.getElementById('myButton').addEventListener('click', function() {self.handleClick();});}handleClick() {console.log(this); // 使用self来引用MyComponent实例}
}

总结

选择哪种方式绑定this取决于具体的使用场景和个人偏好。箭头函数因其简洁性和对this的自动处理，成为了许多现代JavaScript开发者首选的解决方案。然而，在考虑兼容性、性能或特定框架的最佳实践时，.bind()和其他方法也有其适用场合。正确绑定事件处理器中的this对于维护代码的可读性和避免潜在的错误至关重要。

2. 类方法和对象方法

在面向对象编程中，当对象的方法需要访问或修改对象自身的属性时，使用.bind()、箭头函数或在构造函数中绑定this可以确保方法内部的this指向实例本身。

class User {constructor(name) {this.name = name;// 方法内使用箭头函数绑定thisthis.greet = () => console.log(`Hello, ${this.name}!`);// 或者在构造函数中使用bindthis.sayHello = function() {console.log(`Hello, ${this.name}!`);}.bind(this);}
}const user = new User('Alice');
user.greet(); // Hello, Alice!
user.sayHello(); // Hello, Alice!

3. 回调函数

在传递函数作为回调时，尤其是当回调函数在不同的上下文中执行时，显式绑定this可以确保函数内部的this保持一致。

class Network {constructor() {this.fetchData = this.fetchData.bind(this);someAsyncLibrary.getData(this.fetchData);}fetchData(data) {console.log('Fetched data:', data, 'Current this:', this);}
}const network = new Network();

4. 定时器（setTimeout, setInterval）

在使用setTimeout或setInterval时，如果没有显式绑定this，this通常会指向全局对象（在浏览器中是window），而不是预期的实例。显式绑定可以解决这个问题。

class Timer {constructor() {this.count = 0;this.timerId = setInterval(this.tick.bind(this), 1000);}tick() {console.log(++this.count);}stop() {clearInterval(this.timerId);}
}const myTimer = new Timer();

5. 第三方库集成

在与第三方库集成时，为了确保库中的回调函数或事件处理器能够访问到正确的上下文，经常需要显式绑定this。

通过这些应用场景可以看出，显式绑定this是JavaScript编程中一个重要的概念，它有助于编写清晰、易于维护的代码，尤其是在涉及复杂对象交互和事件驱动的编程模型中。

在这里插入图片描述

这篇关于JavaScript this 上下文深度探索：综合指南涵盖隐式与显式call、apply、bind、箭头函数、构造函数等用法于多样场景的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/954070。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
Spring Security--Architecture Overview

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
Java进阶13讲__第12讲_1/2

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
阅读更多...
深入探索协同过滤：从原理到推荐模块案例

深入探索协同过滤：从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤（UserCF）2. 基于物品的协同过滤（ItemCF）3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代，推荐系统成为连接用户与内容的桥梁。本文聚焦于
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2