当前位置: 首页 > news >正文

JS中this指向问题

首先,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.lryc.cn/news/432247.html

相关文章:

  • 大厂面试:小米嵌入式面试题大全及参考答案(130+道 12万长文)
  • React 更新界面
  • JavaSE-易错题集-001
  • 【人工智能学习笔记】1_人工智能基础
  • 【前端】animation动画以及利用vue制作简单的透明度改变动画,包含vue生命周期实现
  • mysql优化案例分享
  • C语言中结构体struct和联合体union的区别
  • Verilog:【8】基于FPGA实现SD NAND FLASH的SPI协议读写
  • 目标检测-RT-DETR
  • 业务资源管理模式语言09
  • Spring Boot + Vue 多级目录的构建详解
  • Android的Launch
  • Deep Ocr
  • 图片验证码
  • 004: VTK读入数据---vtkImageData详细说明
  • 分割千万级,将大文件分割为小件 csv
  • SQL COUNT() 函数深入解析
  • vue3和vue2的双向绑定原理
  • [C++]刷题
  • 职称评审中,论文发表要求?
  • 连续信号的matlab表示
  • centos7.9搭建mysql5.6主从
  • C#通过ACE OLEDB驱动程序访问 Access和 Excel
  • 智能新纪元:GPT-Next引领的AI革命及其跨领域应用
  • Nexus配置npm私服
  • 《OpenCV计算机视觉》—— 图像轮廓检测与绘制
  • Spark-Yarn模式如何配置历史服务器
  • Maven的安装
  • iOS——APP启动流程
  • LLM模型:代码讲解Transformer运行原理