JS中this指向问题

news2024/9/20 20:18:33

首先,this的绑定和定义的位置无关,它的指向只和调用方式有关,this只有在运行时才知道指向谁。

一,默认绑定

默认绑定,也可以说是独立函数调用,这时this指向window。

function foo() {
  console.log(this)
}
foo()

二,隐式绑定

隐式绑定,可以认为是函数被绑定到某个对象,通过对象来调用,此时this指向该对象。

let obj = {
  test: function () {
    console.log(this)
  }
}

obj.test()//隐式绑定

this的指向只有在最后才能确定,即使是对象的方法赋给变量,该变量的this在该函数调用前是未知的。

let obj = {
  test: function () {
    console.log(this)
  }
}
let func = obj.test
func()

//-----------------------------------

function superfunc(func) {
  func()
}

superfunc(obj.test)

func的调用形式为独立调用,那么即使它是由对象方法赋值而来,this的指向也是window,符合默认绑定。 或者使用高阶函数来调用,只要形式不变,那么this仍旧指向window。

三,显式绑定

显式绑定涉及三个方法,apply,call,bind。在之前使用this时,如果我们想要让this指向一个对象就只能在对象中添加方法来实现,但这样会污染对象,我们是可以借用函数来对某个对象作用的,当然,你也可以理解为我们将函数的this指向改变为某个对象,而这个过程就是显式绑定。

function foo() {
  console.log(this)

}

let obj = {
  name: "Mike"
}
//apply的参数传递使用数组形式
foo.apply(obj, ["a", "b", "c"])
//call的参数传递使用列表形式
foo.call(obj, "a", "b", "c")
foo.call("hello")
foo.call(1234)

//调用foo时总是绑定到obj上,但不希望对象中有函数
let test = foo.bind(obj)
test()//这里的函数是独立调用,但是指向的对象却是obj,这涉及到优先级的问题

使用的方法很简单,第一个参数为this指向的对象,其余的参数为函数传参,apply和call的区别在于函数传参的方式不同,前者为数组形式,后者为列表形式。对于bind,这个属于一劳永逸的方法,只要绑定对象后,后续独立调用this仍然指向先前绑定的对象,相当于this被持续的改变为绑定对象。而apply和call是一次性的。bind实际开发中用的不多,在一些特殊情况下会被使用。

 

四,new绑定

new在执行时会返回一个空对象,函数的this指向也会相应的改变为该空对象,如果函数没有对象返回,那么就默认返回该空对象。如下图,constructor构造函数的函数体内创建了this.name = "Mike",但此时是无法确认this指向的(因为不明确函数调用方式,如果为独立调用this指向window),我们创建一个实例对象来接收这个空对象,因为函数调用方式为new,所以this指向空对象,所以结果也显而易见了。

function constructor() {
  this.name = "Mike"//this指向现在还不能确定
}
const instance = new constructor()//this指向new产生的空对象,然后返回这个对象
console.log(instance)

绑定的优先级

这个可以自己测试一下,优先级为:

new > bind > apply = call > 隐式绑定 > 默认绑定 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2114232.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DataGrip数据迁移

第一步 第二步 第三步 第四步 选择你刚刚到处的文件即可

海信发布以旧换新举措,补贴力度、补贴链路、服务体验全面升级

9月7日,由中国家用电器商业协会主办的“海信全国十城联动以旧换新”发布会在北京举行。 据「TMT星球」了解,活动以“品质换新就选海信”为主题,旨在贯彻政府加大消费品以旧换新的战略部署,为我国家电行业绿色化、智能化、高端化高…

知名AIGC人工智能专家培训讲师唐兴通谈AI大模型数字化转型数字新媒体营销与数字化销售

在过去的二十年里,中国企业在数字营销领域经历了一场惊心动魄的变革。从最初的懵懂无知到如今的游刃有余,这一路走来,既有模仿学习的艰辛,也有创新突破的喜悦。然而,站在人工智能时代的门槛上,我们不禁要问…

最厉害顶尖新媒体营销专家培训讲师唐兴通谈数字营销社群营销私域运营大客户销售AIGC大模型创新思维数字化转型商业模式短视频内容社私域数字经济人工智能

​数字人工智能时代的营销进化:从临摹到自我革新 引言:从模仿到变革的时代拐点 中国企业在过去的几十年里,经历了从电子商务的初兴到搜索引擎营销,再到微博、微信以及短视频等多种数字营销形式的迅速发展。在这个过程中&#xf…

力扣最热一百题——最大子数组和

目录 题目链接:53. 最大子数组和 - 力扣(LeetCode) 题目描述 示例 提示: 解法一:动态规划 举例分析 时间复杂度 Java写法: C写法: 优化 总结 题目链接:53. 最大子数组和 …

「数学::质数」试除法 / Luogu P5736(C++)

概述 在质数的第一节我们来讲解试除法。 质数是指在大于1的自然数中只能被1和它自己整除的数。 我们可以利用这一除法性质对质数进行判定。 Luogu P5736: 输入 n 个不大于 10^5 的正整数。要求全部储存在数组中,去除掉不是质数的数字,依…

012.Oracle-索引

我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈 入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈 虚 拟 环 境 搭 建 :👉&…

828华为云征文|华为云Flexus X实例docker部署rancher并构建k8s集群

828华为云征文|华为云Flexus X实例docker部署rancher并构建k8s集群 华为云最近正在举办828 B2B企业节,Flexus X实例的促销力度非常大,特别适合那些对算力性能有高要求的小伙伴。如果你有自建MySQL、Redis、Nginx等服务的需求,一定…

Differential Diffusion,赋予每个像素它应有的力量,以及在comfyui中的测试效果

🥽原论文要点 首先是原论文地址:https://differential-diffusion.github.io/paper.pdf 其次是git介绍地址:GitHub - exx8/differential-diffusion 感兴趣的朋友们可以自行阅读。 首先,论文开篇就给了一个例子: 我们的方…

SpringBoot2:请求处理原理分析-RESTFUL风格接口

一、RESTFUL简介 Rest风格支持(使用HTTP请求方式,动词来表示对资源的操作) 以前:/getUser 获取用户 /deleteUser 删除用户 /editUser 修改用户 /saveUser 保存用户 现在: /user GET-获取用户 DELETE-删除用户 PUT-修改…

自定义TextView实现结尾加载动画

最近做项目,仿豆包和机器人对话的时候,机器人返回数据是流式返回的,需要在文本结尾添加加载动画,于是自己实现了自定义TextView控件。 源码如下: import android.content.Context import android.graphics.Canvas imp…

Java小程序案例:电子日历记事本

要点 菜单栏中提供编辑(剪切、复制、粘贴)、保存、打开等功能。使用类组件实现图形界面设计。基于图形界面的日历,用户可编辑或查看指定日期的日志内容。提供按钮实现月份的前后翻动。事件持久化到文件,可再次编辑保存 效果 程序…

【工具】使用 Jackson 实现优雅的 JSON 格式化输出

说明 在 Java 开发中,我们经常需要处理 JSON 数据。无论是从服务器端返回的数据,还是本地存储的数据,JSON 格式都因其轻量级和易于解析的特点而被广泛使用。当我们需要查看或调试 JSON 数据时,优雅、格式化的输出将大大提高我们的…

风控系统之指标回溯,历史数据重跑

个人博客:无奈何杨(wnhyang) 个人语雀:wnhyang 共享语雀:在线知识共享 Github:wnhyang - Overview 回顾 默认你已经看过之前那篇风控系统指标计算/特征提取分析与实现01,Redis、Zset、模版方…

C++万字解读类和对象(上)

1.类的定义 class为定义类的关键字,Stack为类的名字,{}中为类的主体,注意类定义结束时后面分号不能省略。类体中内容称为类的成员:类中的变量称为类的属性或成员变量; 类中的函数称为类的方法或者成员函数。 为了区分成员变量&…

SprinBoot+Vue应急信息管理系统的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍:CSDN认证博客专家,CSDN平台Java领域优质…

远心镜头选型公式

在当今的机器视觉领域,远心镜头凭借其独特的远心光路设计以及超低畸变、高远心度和高景深等特点,成为尺寸测量和视觉对位中的得力工具。然而,如何进行快速而准确的选型呢?答案就在于选型公式:倍率 焦距 N.A.Sensor 尺…

移动端视频编辑SDK解决方案,AI语音识别添加字幕

对于众多Vlog创作者而言,繁琐的字幕添加过程往往成为提升内容质量的绊脚石。为了彻底改变这一现状,美摄科技凭借其深厚的AI技术积累与创新的移动端视频编辑SDK解决方案,推出了革命性的AI语音识别添加字幕功能,让视频创作更加高效、…

再论大模型做内容消费

前言 今天咱们再体验几个有关大模型聚集内容创作的工作。 之前也专门介绍过一些大模型在该方面的工作,感兴趣的小伙伴可以穿梭:《提升大模型内容创作能力》:https://zhuanlan.zhihu.com/p/716240950 废话不多说,一起来看看吧&a…

【技术调研】三维(0)-webGL、三维基础知识、前置知识、数学知识以及简单示例

前言 ​ 因业务需要了解网页端三维相关技术,故对webGL相关技术学习并记录。旨在了解网页端三维的基本原理。 什么是webGL? ​ WebGL全称叫做Web Graphics Library,它是JavaScript API。用于在任何兼容的Web浏览器中渲染交互式的3D图形,并且无需使用插件。它基于 OpenGL …