Question

尝试在Javascript中了解对象，方法，闭包等...

看不出为什么这不起作用，我想我的想法中有一些根本性的缺陷。我期望将val变量传递给addNote（）函数，但事实并非如此。我认为在函数外部声明的任何变量都可用于该函数，只要它们不在另一个函数中。这不正确吗？

if(typeof(Storage) !== "undefined") {
      console.log(localStorage);

      var $input = $('#input'),
          $submit = $('#submit'),
          $list = $('#list'),
          val = $input.val();

      var noteApp = {

        addNote : function(val) {
          var item = val.wrap('<li />');
          item.appendTo($list);

          clearField();
        },

        clearField : function() {
          $input.val = '';
        },

        delNote : function(note) {

        }

      };

      $submit.on('click', function(){
        noteApp.addNote();
      });

    } else {

    }

我正在努力学习专业人员如何使他们的代码变得如此干净，简洁和模块化。我认为一个笔记应用程序将是一个完美的开始，耻辱我遇到了第一个障碍......

干杯。

Answer 1

问题中的代码有几个问题

定义名为val的参数，而不是将参数传递给函数
在对象文字中调用clearField()时this.clearField()
您只获得一次价值，而不是每次点击
val是一个字符串，它没有wrap方法
$input.val = '';无效jQuery

我会像这样清理它

var noteApp = {
    init: function() {
        if (this.hasStorage) {
            this.elements().events();
        }
    },
    elements: function() {
        this.input  = $('#input');
        this.submit = $('#submit');
        this.list   = $('#list');
        return this;
    },
    events: function() {
        var self = this;

        this.submit.on('click', function(){
            self.addNote();
        });
    },
    hasStorage: (function() {
        return typeof(Storage) !== "undefined";
    })(),
    addNote: function() {
        this.list.append('<li>' + this.input.val() + '</li>');
        this.clearField();
        return this;
    },
    clearField: function() {
        this.input.val('');
    },
    delNote : function(note) {

    }
}

FIDDLE

请记住调用init方法

$(function() { noteApp.init(); });

Answer 2

在致电addNote()时，您没有为val传递任何论据，因此它将是undefined：

noteApp.addNote();
//             ^^ nothing

传递输入（由于您的val.wrap调用，您似乎希望jQuery对象不是字符串值）：

noteApp.addNote($input);

当您在函数中声明val时，它将作用于该函数，并且仅在函数调用传递该参数的值时才会填充。即使您在上部作用域中有另一个具有相同名称val的变量，它们仍然是有区别的。函数中对val的任何引用都将引用本地val而不是上部范围。

将变量传递给对象方法javascript

2 个答案: