Javascript对象这是窗口

Question

我过去曾问过这个问题，但仍然不明白为什么我的这一直是窗口，而不是调用对象。

页面上有

按钮控件：

<input type="button" value="Press Me" id="buttonPressMe" @click="pressMeClicked" />

这是组件，在方法下我有功能：

pressMeClicked（）是被调用的函数：

pressMeClicked: () => {
    console.log(this.el)
    var dd = this;
    console.log('pressMeClicked');
}   

问题是此不是pressMeClicked（）函数中的组件对象。它始终是窗口对象。下面的代码显示了如何向元素添加事件侦听器。我使用的两个选项中的任何一个都调用了pressMeClicked函数。唯一的问题是这不是组件obj而是窗口：

const funcBind = function(obj, method, args = []){
    return function(){
        return method.apply(obj, args);
    }
}

const funcProcess = (component, elements) => {

    const fn = component.methods['pressMeClicked'];
    const methodCall = funcBind(component, fn);
    const elem = component.selector('#buttonPressMe');

    elem.addEventListener('click', () => {
        // Tried this
        fn.bind(component)()
        // Tried this also
        methodCall();
    }       
}

当我进入函数methodCall（）时，obj就是组件。

非常感谢任何帮助

Answer 1

pressMeClicked是arrow function，是一个非约束函数。因此，this将始终引用其包含函数的词法范围中的this值。要修复此更改，请将箭头函数定义更改为常规函数（方法）：

// Instead of:
pressMeClicked: () => {
    // ...
}

// Do this:
pressMeClicked() {
    // ...
}

// or:
pressMeClicked: function() {
    // ...
}

Answer 2

这是获取调用该函数的对象的值，并且由于该函数由“window”对象调用（所有由“window”调用的事件），因此它具有其值。 要获取触发事件并调用该函数的元素，您必须在事件函数中声明一个参数this，该参数将具有该元素的值。 例： HTML：

<div id="el" onclick="func(this)"></div>

脚本：

const  func = (elm) => console.log (elm)

现在“elm”将持有html元素