JS递归筛选节点报this.getChildrem is not a function错误原因求解

错误原因 #

报错的核心是Array.filter()回调函数的this指向丢失问题：
你传入filter的是普通匿名函数，普通函数的this是执行时动态绑定的，在filter的回调执行环境中，this默认指向全局对象（浏览器环境为window，严格模式下为undefined），而非定义getitem、getChildrem的外层实例对象，自然无法读取到this.getChildrem方法。
同时你getChildrem内部的filter回调也存在完全相同的this指向问题。

常见修复方案 #

方案1：用箭头函数作为filter回调 #

箭头函数的this继承自定义时的外层作用域，不会被执行环境修改，是最简单的修复方案：

getitem: function(){
    $this.users = $data.data;
    // 回调替换为箭头函数
    $this.users = $this.users.filter( (item) => {
        if(item.status === true ) { 
            if( item.children.length > 0 ){
                item.children = this.getChildrem(item.children, true);
            }
            return item;
        }
    }); 
},
getChildrem: function(node, estatus){
    // 回调替换为箭头函数
    $children = node.filter( (item) => {
        if(item.status === estatus ) {              
            if( item.children.length > 0 ){
                item.children = this.getChildrem(item.children, estatus);
            }
            return item;
        }
    });       
    return $children;    
},

方案2：直接用提前缓存的外层this调用 #

你代码里已经出现了$this变量，大概率是你提前缓存的实例this，直接替换调用即可，不需要修改回调写法：

// 把所有this.getChildrem替换为$this.getChildrem
item.children = $this.getChildrem(item.children, true);

方案3：给filter传入this绑定参数 #

Array.filter支持传入第二个参数作为回调内部的this指向：

$this.users = $this.users.filter( function(item) {
    // 原有逻辑不变
}, this); // 第二个参数传入当前作用域的this，回调内部this就会指向实例

额外提示 #

注意你的方法名拼写为getChildrem，如果是手误打错了正确拼写getChildren，也需要同步修正所有调用处的拼写，避免后续引发其他问题。

内容的提问来源于stack exchange，提问作者Jonh wick