Javascript 原型函数调用返回未定义的

我目前正在研究javascript标准编码模式。为什么

console.dir（dropdownAC.appendImages（））

返回undefined，someone

在这段代码中，我使用dev bridge autocomplete.js创建了一个自动完成小部件，比如有图片框的地方。如果我做错了，请随意建议我需要使用的正确的模块化格式。目前，这些图像将存储在本地存储器上

(function ($) {
  "use strict";

  var DropdownAC = function() {
    return this
  }

  DropdownAC.DEFAULTS = {
    products : [
      { value : 'Ash Bucket', data: 'AB', imagePath : 'img/ash_bucket/' },
      { value : 'Drill', data: 'DR', imagePath : 'img/drill/' },
      { value : 'Lights', data: 'LT', imagePath : 'img/light/' },
      { value : 'Shelve', data: 'SV', imagePath : 'img/shelve/' },
      { value : 'Maple Wood', data: 'MW', imagePath : 'img/maple' }
    ]
  }

  DropdownAC.prototype.loadImages = function(key_text){
    return key_text
  }

  DropdownAC.prototype.appendImages = function () {
    var top_result = $('.autocomplete-suggestion:first').text()
    var ac_images = dropdownAC.loadImages(top_result) 
    console.log(ac_images)
  }   

  DropdownAC.prototype.showPictureBox = function(){
    //===============================
    // Create pictureBox
    //===============================

    //--------------HERE------------------//
    console.dir( dropdownAC.appendImages() ) 
  }

  //==================================
  //   VENDOR:autocomplete.js       
  //==================================       
  $('#autocomplete').autocomplete({
    lookup  : DropdownAC.DEFAULTS.products,
    onSelect : function (suggestion){
      alert('What will i do with this?' + suggestion.value + ', ' + suggestion.data);
    }
  })    

  //==================================
  //   Extension-autocomplte tweak    
  //==================================
  $('#autocomplete').keyup(function(){
    var suggestions_visible = $('.autocomplete-suggestions').is(":visible")
    var suggestions_childLength = $('.autocomplete-suggestions').children().length

    if ( suggestions_visible && suggestions_childLength > 0 ){
      dropdownAC.showPictureBox()
    }

    else {
      $('.suggestions_wrapper').remove()
    }
  })

  window.dropdownAC = new DropdownAC();

  $(document)
    .on('load', dropdownAC);

})(window.jQuery);

---

因为

DropdownAC.prototype.appendImages=function（）{

不返回任何内容

尝试将appendImages函数更改为：

DropdownAC.prototype.appendImages = function () {
    return 'hello, i'm here!';
}

为什么console.dir（dropdownAC.appendImages（））返回undefined，someone

在连接到prototype的函数中，使用

this

代替

dropdownAC

，并返回类似于

...
var ac_images = this.loadImages(top_result)
return ac_images;
...

您使用的是模块化模式，这很好，只需定义所有依赖项即可

(function($, window, document) {
    ...
})(window.jQuery, window, window.document);

---

更清楚的是，代码需要什么，它有助于缩小规模。

“定义所有依赖项”：如果需要窗口，请从全局上下文中传递此项，以避免以前重新分配的窗口。如果首先传递正确的全局/窗口对象并在IIFE中立即赋值，则传递window.jQuery和window.document似乎毫无意义：

（函数（窗口）{var document=window.document，$=window.jQuery；…（此）}

我可能会将此作为窗口使用，但它更可能在更改此窗口而不是重新定义的窗口的上下文中被误用。我个人更喜欢声明依赖项。更改此项？在全局执行上下文中，此项必须是全局对象，因此传入此项显然是globl/window对象。