[JavaScript] DOMオブジェクトがオブジェクトのメソッドをコールバックするとき、このメソッドは問題を示しています。インスタンスを取得するにはどうすればよいですか?

コードをアップロード

説明はコメントにあります

タブバーを介してリストを切り替えます。

 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)();
});

この記事では、いくつかの関数メソッドが呼び出しと適用をバインドすることに言及しました

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

おすすめ

転載: blog.csdn.net/qq_16181837/article/details/104985379