Question

假设我有以下代码：

const MyObject = {
    a($els) {
        // What is the best practice here ?
        $els.each(function() {
            MyObject.b($(this));
        });
        // Or
        const self = this;
        $els.each(function() {
            self.b($(this));
        });
    },
    b($el) {
        $el.addClass('test');
    }
};

在对象中调用另一个方法的“最佳实践”是什么？调用变量“ MyObject”有什么缺点吗？还是使用this更好，为什么？

Answer 1

这没什么问题

this.method(params)

但是，如果您有嵌套的作用域，this可能意味着不同的事情，并且很快就会变得混乱。为避免这种情况，请使用var self = this创建另一个指向右侧this的变量。

示例：

const MyObject = {
    a(x) {
        var self = this;
        return x.map(function (a) 
        {
           // cannot use this here to access parent scope
           return self.b(a);
        })


    },
    b(y) {
      return y % 2;
    }

};

Answer 2

您不需要jQuery。没有它，this这样的问题就可以避免（双关语；）。如果您确实需要jQuery，请参阅摘要的第二部分。

const MyObject = {
    getAll: selector => Array.from(document.querySelectorAll(selector)),
    addClass:  (elements, className) => 
      elements.forEach(element => element.classList.add(className)),
};

MyObject.addClass(MyObject.getAll("[data-test]"), "test");
setTimeout(() => 
  MyObject.addClass(MyObject.getAll("[data-test2]"), "test2"), 1000);
  
// using jQuery I'd use
const MyObjectJQ = {
  setClass4Elements($els) {
    const setClass = this.setClass2Foo;
    $els.each( (i, elem) => setClass($(elem)) );
  },
  setClass2Foo($el) {
    $el.addClass('foo');
  }
};

setTimeout(() => 
  MyObjectJQ.setClass4Elements($("[data-test2]")), 2000);

// still I'd avoid  the use of [this]
const MyObjectJQNoThis = {
  setClass4Elements($els, className) {
    const setClass = $el => $el.addClass(className);
    $els.each( (i, elem) => setClass($(elem)) );
  }
};

setTimeout(() => 
  MyObjectJQNoThis.setClass4Elements($("[data-test]"), "bar"), 3000);

.test {
  color: red;
}
.test2 {
  color: green;
}
.foo {
  color: orange;
}
.bar {
  color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-test>div1</div>
<div data-test2>div2</div>
<div data-test>div3</div>
<div data-test2>div4</div>

Answer 3

我认为您对类和对象之间的区别感到困惑。 MyObject是指MyObject的类。此关键字引用对象的实例。我猜您想稍后再做，因为此密钥是您要使用的密钥。

调用自对象方法的最佳实践

3 个答案: