【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));