this,caller和react中的this丢失
this和caller的区别
this代表的,是函数的调用者,函数被谁调用,this就是谁
caller代表的,是函数的执行环境,函数在哪个作用域中执行,caller就是谁
注意区分:调用者和执行环境,不是一回事
const obj = {
a: function(){
console.log(this);
console.log(obj.a.caller)
}
}
function b(){
obj.a()
}b()
文章图片
方法a是在 函数B 中执行的,所以caller返回的就是函数B
但方法a,是通过obj去调用的,所以this返回obj
换成回调的方式调用方法a:
const obj = {
a: function(){
console.log(this);
console.log(obj.a.caller)
}
}
function b(cb){
cb()
}b(obj.a)
文章图片
方法a,仍然是在 函数B 中执行的,所以caller仍然返回函数B
但此时方法a,不是通过obj直接调用,而是通过obj.a找到a函数,将a函数赋值给函数b的参数cb,然后执行cb(),也就是所说的回调函数。
此时的方法a作为回调直接执行,没有被调用者,js中就会将顶层对象作为它的调用者,所以this指向window
所以,函数只要固定在某个作用域中执行,那么它的执行环境就永不会变,但不同的调用方式,它的调用者却会随时变化。
this丢失 前面说了,不同的调用方式,函数的调用者,也就是this会随时变化,这是造成js中this会丢失的原因
const obj = {
name: 'hh',
a: function(){
console.log(this)
}
}
obj.a()
文章图片
通过obj对象调用了a方法,a方法的调用者是obj对象,所以a方法内的this就是obj对象
const obj = {
name: 'hh',
a: function(){
console.log(this)
}
}
const b = obj.a
b()
文章图片
const b = obj.a
是把obj中的a函数,赋值给了变量b此时变量b的值就是obj.a中的函数,此时直接执行了b(),没有任何调用者,函数内的this按照JS的规则,就会指向顶层对象window
按照JS的规则,如果使用【严格模式】的话,this就不再指向window,而是undefined
"use strict";
const obj = {
name: 'hh',
a: function(){
console.log(this)
}
}
const b = obj.a
b()
文章图片
react中的this丢失
class App extends Component{
handle = function(){
console.log(this);
}
render(){
return(
<>
>
)
}
}
react中的事件绑定,并不是像原生JS中那样简单的把事件处理函数绑定给onclick事件。
【this,caller和react中的this丢失】
onClick={this.handle}
实际上是一个赋值操作,把App类中的handle函数,赋值给了onClick变量,当点击事件触发时,实际执行的是onClick()。react中的onClick(),也不是JS中的原生点击事件,因为原生的事件函数中的this,应该是指向事件源dom对象的;而react中的onClick,是一个合成事件,在全局作用域中执行,没有调用者,所以内部的this是指向window的
又因为使用了class语法,默认采用了严格模式,所以this指向了undefined
参考:
版权声明:本文为CSDN博主「知迷鸟」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_...
为什么React中事件绑定的函数内部this默认指向undefined? - 胖脸猫的回答 - 知乎
https://www.zhihu.com/questio...
推荐阅读
- 直播预告 | 7 月 22 日《开源安全治理模型和工具》线上研讨会
- 文件夹和文件对比神器(Beyond Compare 4中文版)
- H7-TOOL|H7-TOOL发布固件V2.17, 脱机烧录增加泰为,华大和复旦微新系列以及串口和CANFD接口脱机烧录,LUA小程序实现JSCope HSS模式波形
- 和痘痘,说再见
- 数据分析基础知识|数据分析和Excel(有关数据分析和Excel的简单介绍)
- HTTPS域名/网址 ssl证书 加了CDN后,域名一定解析@和www
- tp5.1 打开网址 输出的是网页代码输出 没有转变过 没有渲染(模板 return $this-;fetch() return view();)
- 我和007的故事-----个人品牌打造初期
- 常用的函数式接口_Predicate接口_默认方法and和Predicate接口练习_集合接口筛选
- 人工智能|python 和 scikit-learn 实现垃圾邮件过滤