【JavaScript】当DOM对象回调某对象的方法时该方法的 this 指向问题,如何取到该实例?

上代码

解释都在注释里

通过 tab 栏切换一个列表:

 class List {
     constructor(param) {
         this.prop = param;
     }
     listToggle() {
         // ... fun

         // 这个方法通过被回调来切换 tab 栏
         // 当该方法被回调时,我需要两个东西
         // 1.调用者 'div.tab-child1' 2.当前 List 实例,通过该实例取到需要的属性

         // 当前 this 指向的是调用者,此时我该如何取到当前 List 实例?
         console.log(this);
     }
 }
 var list = new List();
 // 对 tab 栏委派事件,子项触发时回调 list 的 listToggle 方法
 $('div.tab').on('click', '.child', list.listToggle);

思考了好久之后,我是这样写的:

class List {
    constructor(param) {
        this.prop = param;
    }
    listToggle(target) {
        // ... fun
        // 用闭包的方式传参
        return function() {
            console.log(target);
            console.log(this);
        }
    }
}
var list = new List();
$('.btn-1').on('click',function() {
    // 传参调用方法
    // 取到闭包
    // 调用闭包 bind 方法取到 [改变了 this 指向的函数拷贝]
    // 调用该函数拷贝
    list.listToggle(this).bind(test)();
});

这篇文章提到了几个函数的方法 bind call 和 apply

https://blog.csdn.net/qq_16181837/article/details/104965043

发现更简单的写法,我们通过事件对象获取调用者:

class List {
    constructor(param) {
        this.prop = param;
    }
    listToggle(jq_e) {
		// ... fun
        console.log(jq_e.target);
        console.log(this);
    }
}
var list = new List();
$('.btn-1').on('click', list.listToggle.bind(list));
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高厉害

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值