this指向

简介: 在 JavaScript 中,`this` 的指向有多种情况:全局作用域中指向全局对象(如浏览器中的 `window`),函数中默认也指向全局对象,但作为对象方法调用时则指向该对象。箭头函数中的 `this` 继承自定义时的作用域,不会改变。可通过 `call`、`apply` 或 `bind` 方法显式改变 `this` 指向。

在 JavaScript 中,this 关键字的指向可能有以下几种情况:

  1. 在全局作用域中,this 指向全局对象。在浏览器中,全局对象是 window,在 Node.js 中,全局对象是 global
  2. 在函数中,默认情况下,this 指向全局对象。但是,如果将函数作为对象的方法调用,则 this 指向调用方法的对象。
  3. 在箭头函数中,this 的指向是定义时所在的作用域的 this。箭头函数没有自己的 this,因此它永远不会改变指向。
  4. 可以使用 callapplybind 方法显式地指定 this 的指向。

例如:

const obj = {
  name: 'John',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};
obj.greet();  // Hello, John! 因为是obj调用的greet方法,所以greet方法内部的this指向的是obj
const greet = obj.greet;
greet();  // Hello, undefined!,因为greet()是通过window调用的,所以this指向window
const arrowGreet = () => {
  console.log(`Hello, ${this.name}!`);
};
arrowGreet();  // Hello, undefined! this指向window
const boundGreet = obj.greet.bind(obj);
boundGreet();  // Hello, John!  // this被bind修改为了obj,所以this指向了obj


怎么改变this指向

改变this指向的三种方法:call、apply、bind

相关文章
|
7月前
|
网络协议 安全
跨域怎么处理 ?
跨域怎么处理 ?
151 0
|
7月前
|
设计模式 前端开发 JavaScript
MVVM的理解:
MVVM的理解:
464 0
|
7月前
|
JavaScript 前端开发
for of和 for in的区别
JavaScript中,for...of遍历可迭代对象的值,适合数组;for...in遍历对象属性,注意其遍历顺序不确定且包括继承属性,可用hasOwnProperty判断自身属性。同步指任务依次执行,异步则通过回调或事件实现非阻塞执行,适用于耗时任务如网络请求。常见异步方式包括定时器、接口调用、事件监听。
259 0
|
7月前
|
JavaScript 前端开发
forEach与map的区别
forEach与map的区别
341 0
|
7月前
|
存储 NoSQL 关系型数据库
1-MongoDB相关概念
MongoDB 是一种高性能、无模式的文档型数据库,适合需要灵活数据模型、高扩展性和大规模数据存储的应用场景。适用于新项目快速开发、高并发读写、海量数据存储及地理文本查询等需求,且支持类似 JSON 的 BSON 数据格式,灵活易扩展。
131 0
|
7月前
|
存储 JavaScript 前端开发
JS的数据类型,储存上的差距
JavaScript 中的数据类型分为基本类型和引用类型,存储方式和占用空间不同。基本类型包括布尔值、数字、字符串、null 和 undefined,占用空间小;引用类型如对象、数组和函数则占用更多空间。合理选择数据类型可优化程序性能。
141 0
JS的数据类型,储存上的差距
|
7月前
|
存储 机器学习/深度学习 缓存
Google DeepMind发布MoR架构:50%参数超越传统Transformer,推理速度提升2倍
递归混合架构(MoR)通过自适应令牌级计算机制,在降低参数与计算开销的同时超越传统Transformer性能,显著提升推理效率与内存管理,为大模型发展提供新方向。
438 0
Google DeepMind发布MoR架构:50%参数超越传统Transformer,推理速度提升2倍
|
7月前
|
前端开发 JavaScript
promise的理解
promise的理解
105 0
|
7月前
|
JavaScript 前端开发
es6新增特性
ECMAScript 6(ES6)是JavaScript的重要升级版本,引入了如`let`和`const`声明变量、箭头函数、块级作用域、类、模板字符串、解构赋值等新特性,提升了代码的简洁性与可维护性。
165 0
|
7月前
|
传感器 人工智能 缓存
《WebGL与Three.js打造会"讲故事"的虚拟博物馆》
本文围绕WebGL与Three.js构建虚拟博物馆展开,探讨如何通过数字技术实现文物的生动呈现与文化的深度传播。文中阐述了文物数字分身的构建,包括利用PBR材质还原质感、LOD系统实现模型适配,以及依据文化考据打造展厅空间;讲解了交互设计的巧思,从自然的漫游体验到多感官叙事,再到兼顾自由探索与深度解读的导览系统;还介绍了性能优化策略,以适配不同设备并保障体验流畅。最终展现虚拟博物馆如何打破时空限制,让文物成为能与观众对话的生命体,重构文化传承方式。
167 0