Question

我正在学习编写Javascript OOP样式，我有几个问题，主要是关于声明变量而不使用全局变量。

问题1 - 我正在进行以下编码吗？

这里我声明了“Fields”类：

/**
 * Display Fields
 */
var Fields = function(){

    this.display = function(fields){

        var test = '1st method of declaring test';
        this.test = '2nd method of declaring test';

        for (var i = 0, len = fields.length; i < len; i++) {

            jQuery('[name=' + fields[i] + ']').closest('.row').css('display', 'block');

        }
    };
}

现在我实例化字段类，创建对象字段

// Fields Object
var fields = new Fields();

fields.display(requiredFields.concat(normalFields));

问题2 - 这是声明类变量的正确方法 - 在这种情况下：“test”：

this.test = 'value'

或只是：

var test = 'value'

你能解释为什么1种方法优先于另一种方法吗？

问题3 - 正确声明的for循环中的“i”是什么？这是正确的做法吗？或者我需要使用类似的东西：

this.i = 0

强烈赞赏任何有关良好做法的建议。

我在网上阅读了分配，但我完全是OOP的新手，我想确保我的路径正确。

泰！

Answer 1

This would be worth a read. It's all about Javascript scope.

this (pun intended) is also worth a read. It's about 'this' in Javascript.

A quick read on OOP in Javascript.

阅读完所有这些和理解后，您可能需要研究Javascript设计模式。

Answer 2

没关系。
如果您使用this.test = 'value'和var test2 = 'value'，那么您可以执行fields.test，但无法执行fields.test2。
这是对的。在这种情况下，你的i应该是局部变量。

Answer 3

只有在你想在类的范围内创建一个变量时才应该使用

var，据我所知，该范围内的变量不能从外部读取，除非从内部函数中读取它们相同的类构造函数。这也可以用来创建私有变量。

this指的是使用new Classname()时将创建的对象，您可以为其添加可供使用的属性。你这样做是正确的。您还可以使用括号表示法，如下所示：this['i have spaces'] = 'Me too!'，也可以使用class['i have spaces']稍后读出，这允许添加内部包含运算符或其他JS语法字符的属性。

要回答第二个问题，您需要决定是否希望用户访问此变量。如果您希望他们拥有访问权限，请使用this.test，否则使用var test。

至于第三个，是的。

Answer 4

Javascript没有“类”。 Javascript使用基于对象的原型继承。有很多OOP模式是好的。如果我是你，因为这个想法是“面向对象”，我会从一个对象开始，而你有一个函数（技术上它本身就是一个对象，但是请耐心等待）。看看这个：

  var fields = { //this can be the only global variable we ever use.
    options: {
      //default properties object.
    },
    init: function() {
      //do some things that need setup
      this.$elem = $('.myElem'); //for example
    },
    run: function(options) { //describe a general flow here, then write the functions to execute that, again, this is just an example of what might make sense. There are many approaches.
      this.init(); //maybe this is all you need to kick off your app and you could call it at document.ready. Don't let me example make you think too strictly. These are just ideas.
      var data = this.getData();
      this.useData(data);
    }
    getData: function() {
       var data;
       var example = 'blah'; //no need for everything to be a property of the object (this)
       //whatever here, probaby async request, so use promises
       return data;
    }
    //etc
  }

fields.run(); //you could pass some options, by the way. Whatever you do here, it should kick off the app and make everything do what it does. Calling this `init()` often makes more sense, btw.

你的问题并不是特别关于继承，but here is a nice read on that. Object.create(myObj)很好：）

Here is a recent answer of mine (click)显示了一个真实（简单）的应用程序编写的OOP样式，a live demo (click)你可以随意使用。

如果您对此有任何具体问题，请跟进评论，我将很乐意帮助您！你想要遵循更好的做法是件好事！

关于编码javascript OOP风格的几个问题

4 个答案: