对象更新不正确

我正在创建一个使用jQuery/JavaScript的网站，我得到的问题是：当我创建aMenu的几个实例时，我在单独的文件中创建了一个对象 - 它似乎更新每个选项每个对象的信息，尽管它们是自己的变量。对象更新不正确

的JavaScript，我创建AMENU对象：

// Drawer item, animates via CSS - no need to animate using jQuery 
var drawerOptions = { 
    animate: false, 
    toggle_element: '#parent', 
    toggle_attribute: 'data-opened', 
    default_toggled: false, 
    toggle_after_animation: false 
} 
var Drawer = new aMenu(drawerOptions); 

// LargeDrawer item 
var largeDrawerOptions = { 
    animate: false, 
    toggle_element: '#parent', 
    toggle_attribute: 'data-opened', 
    default_toggled: false, 
    toggle_after_animation: false 
} 
var LargeDrawer = new aMenu(largeDrawerOptions); 

// Search item 
var searchbarOptions = { 
    animate: true, 
    toggle_element: '.search_nav_drop', 
    toggle_attribute: 'data-opened', 
    default_toggled: false, 
    toggle_after_animation: true, 
    animation: 'slide' 
} 
var NSearchBar = new aMenu(searchbarOptions);

AMENU对象：

function aMenu(options){ 

    // Run our init if we have one. 
    this.options.onInit(this); 

    // Intertwine our current default options and whats being passed in. 
    // Same as $.extend 
    this.options = intertwine(this.options, options); 

    // Determine default toggling. 
    this.toggled = this.isToggled(); 
    } 

    // Default options 
    aMenu.prototype.options = { 
    animate: true, // If we are animating this menu 
    animation: 'slide', // Animation types: none|fade|slide|custom 
    speed: 500, // Animation speed 
    easing: 'linear', // Easing into the animation types: linear|swing|_default 
    stop_event: false, // If the stop event is used in this case 
    toggle_element: '', // This element keeps track of being toggled in HTML. Leave blank or 'none' for keeping track in JavaScript 
    toggle_attribute: '', // Attribute that get toggled (true/false). Leave blank if toggle_element is blank or 'none' 
    default_toggled: true, // The default selection if we are toggled or not (only used if no toggle_element) 
    throw_errors: true, // If you want errors to be thrown for problem code. 
    toggle_after_animation: true, // If you want the menu to toggled after the animation is completed. 
    onToggle: function() {return false;}, // Function gets trigger when toggled 
    onInit: function() {return false;}, // Function gets trigger at initialization 
    onHide: function() {return false;}, // Function gets triggered when inactivated 
    onShow: function() {return false;}, // Function gets triggered when activated 
    onShowAnimationCompleted: function() {return false;}, // Function gets triggered after animation completes on show 
    onHideAnimationCompleted: function() {return false;} // Function get trigger after animation completes on hide 
    }

只是指定的对象抽屉将不得不通过作为NSearchBar通过了相同的选项抽屉将被完全打破。

不确定这是原型问题，还是只是我完全缺少的东西。欣赏任何帮助是可能的，谢谢！

来源

2017-07-18 escapesequence

你在什么范围下运行？默认情况下'this'将是窗口，因此'aMenu'函数的'this.element'将始终是'window'，正如你在这里看到的：https://jsfiddle.net/p2ag6o8j/。从你的代码的外观来看，它似乎有点像你试图在走路之前跑步。你想在这里实现什么目标？ –

元素部分是完全没有意义的 - 删除/更新的代码。它将用于菜单对象的可能的窗口引用，我试图简单地实现菜单的标准类/对象来覆盖函数，并且像其他语言中的抽象类一样使用。 – escapesequence

的this.options最初referes到aMenu.prototype.options

的intertwine（如果它是一样$.extend）延伸，并返回目标：

记住目标对象（第一自变量）将是修改后，也将从$ .extend（）返回。

所以this.options对aMenu的所有实例都是一样的。

你需要写：

this.options = $.extend({}, this.options, options)

这个副本最初是指aMenu.prototype.options到一个新的opject中的this.options属性，然后拷贝options属性并返回新的对象，它是分配给this.options。

如果它的工作原理与intertwine一样，取决于你是如何实现它的。

来源

2017-07-18 14:56:05

Ermahgerd。非常感谢！ – escapesequence

@JamesJohnston你应该阅读关于原型是如何工作的。 –

对象更新不正确

回答

相关问题