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));
    
  • 相关阅读:
    一只小小麻雀——基于语法分析工具Gold开发的加减法解释器
    儿子和女儿——解释器和编译器的区别与联系
    商用密码企业调研(必做)
    create dict in python
    sequence in python
    Cpp pointers
    sorted: list sort in python
    the array.length() of C++
    string of Cpp
    srandom and random
  • 原文地址:https://www.cnblogs.com/gaolihai/p/13149755.html
Copyright © 2011-2022 走看看