zoukankan      html  css  js  c++  java
  • 【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));
    
  • 相关阅读:
    topcoder srm 681 div1
    topcoder srm 683 div1
    topcoder srm 684 div1
    topcoder srm 715 div1
    topcoder srm 685 div1
    topcoder srm 687 div1
    topcoder srm 688 div1
    topcoder srm 689 div1
    topcoder srm 686 div1
    topcoder srm 690 div1 -3
  • 原文地址:https://www.cnblogs.com/gaolihai/p/13149755.html
Copyright © 2011-2022 走看看