无法读取未定义的属性“下拉列表”答案

【问题标题】：Cannot read property 'dropdown' of undefined无法读取未定义的属性“下拉列表”
【发布时间】：2017-05-13 18:33:17
【问题描述】：

我正在尝试将我的代码转换为更多插件类型的代码，因此所有内容都将分开，以防我将来更改类名。

出于某种原因，在我的代码中，我得到了Cannot read property 'dropdown' of undefined。

我的猜测是，函数Navigation.bindEvents()在我设置配置之前运行，所以它找不到它......但我不知道如何解决它。

这是我的 Navigation.js 文件：

let Navigation = {
    config: {},

    init(config) {
        this.config = config;
        this.bindEvents();
    },
    bindEvents() {
        $(this.config.trigger).on('click', this.toggleNavigation);
        $(document).on('click', this.hideAllDropdowns);
    },

    toggleNavigation(event) {
        // Store the current visible state
        var visible = $(this).siblings(this.config.trigger).hasClass('visible');


        // Hide all the drop downs
        this.hideAllDropdowns();

        // If the stored state is visible, hide it... Vice-versa.
        $(this).siblings(this.config.content).toggleClass('visible', !visible);

        event.preventDefault();
        event.stopPropagation();
    },

    hideAllDropdowns() {
        $(this.config.dropdown + ' ' + this.config.content).removeClass('visible');    
    }
}

export default Navigation;

这是我运行所有 init 函数的 app.js 文件。

window.$ = window.jQuery = require('jquery');

import Navigation from './layout/navigation.js';


Navigation.init({
    dropdown: '.dropdown',
    trigger: '.dropdown-trigger',
    content: '.dropdown-content'
});

【问题讨论】：

标签： javascript jquery ecmascript-6

【解决方案1】：

我猜你的作用域有问题 $(document).on('click', this.hideAllDropdowns);

我们试试

    bindEvents() {
        $(this.config.trigger).on('click', this.toggleNavigation);
        $(document).on('click', this.hideAllDropdowns.bind(this));
    },

更新：

    bindEvents() {
        $(this.config.trigger).bind('click', {self:this}, this.toggleNavigation);
        $(document).on('click', this.hideAllDropdowns.bind(this));
    },

并在 toggleNavigation 函数内将所有 this.config 替换为 event.data.self

【讨论】：

我为他们两个都添加了它，当我点击下拉菜单时，它什么也没做，与以前的情况相比，我点击它说Cannot read propery dropdown of undefined。
错误还在吗？如果不是，我认为您的点击处理程序中还有另一个问题。也许你应该使用 $(this.config.content) 而不是 $(this.config.dropdown + ' ' + this.config.content)
我修复了，这是与this的使用有关的问题，当在点击处理程序中this不再引用对象，在这种情况下Navigation所以我改变了所有this 对Navigation 的声明，不确定这是否是一件好事，但它确实有效。我会赞成这个答案，因为它给了我一个提示。谢谢。
酷！所以我更新了适合你的问题的答案

【解决方案2】：

this 在toggleNavigation 的上下文中指的是被点击的元素。

这就是为什么你可以使用$(this).siblings(...) 来获取兄弟元素。

您需要对 Navigation 对象有一个引用。也许您可以使用on 语法，它允许您传递额外的数据$(this.config.trigger).on('click', this, this.toggleNavigation);

然后重写处理程序

toggleNavigation(event) {
    //get the navigation reference
    var nav = event.data;
    // Store the current visible state
    var visible = $(this).siblings(nav.config.trigger).hasClass('visible');


    // Hide all the drop downs
    nav.hideAllDropdowns();

    // If the stored state is visible, hide it... Vice-versa.
    $(this).siblings(nav.config.content).toggleClass('visible', !visible);

    event.preventDefault();
    event.stopPropagation();
},

【讨论】：

【解决方案3】：

this 的行为是 JavaScript 中最难理解的事情之一。这里this 显然是动态的，这意味着它的值取决于你的方法在哪里被调用...

let module = {
  config() {
    console.log(`config(): 'this' is 'module' ---> ${Object.is(this, module)}`);
    console.log(`config(): 'this' is 'document' ---> ${Object.is(this, document)}`);
  },
  init() {
    console.log(`init(): 'this' is 'module' ---> ${Object.is(this, module)}`);
    console.log(`init(): 'this' is 'document' ---> ${Object.is(this, document)}`);
    
    module.config();
  }
};

$(document).ready(module.init);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：