javascript - 如何将 myFunction(elem) 更改为 elem.myFunction()？

Question

我今天想知道 javascript 函数。我知道 jQuery 是一个 javascript 库，可以在带有点的元素上调用函数。 javascript 有时会做同样的事情(例如:.toFixed())

Example (in jQuery):
$("#elem").css("width", 100);

是否可以使用常规 javascript 函数执行相同的操作？所以我通常会做的是:

Example regular way:
var elem = document.getElementById('elem');
function doSomethingToElement(elem){
   ...do something to elem here...
}
doSomethingToElement(elem);

如果我想使用 elem.function() 表示法以不同方式调用该函数该怎么办？喜欢:

elem.doSomethingToElement();

• 有人可以向我展示如何执行此操作的示例吗？
• 旁注:关于使用此表示法的优点和缺点的一些考虑也很有趣。

Answer 1

您可以按照@jonas-w 的正确建议进行操作。我可能会补充:

答案的关键是您这里的elem:

var elem = document.getElementById('elem');

与 $("#elem")

不同

后者是一个 jQuery 对象，具有所有这些很酷的 jQuery 方法。前者是普通的 DOM 元素。如果您想创建对象并定义可以使用点符号在对象上调用的方法，您应该阅读一些内容，例如 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS ，他们提供了这个例子:

function Person(name) {
    this.name = name;
    this.greeting = function() {
        alert('Hi! I\'m ' + this.name + '.');
    };
}

并且解释得比我更好。本质上，Person 函数在 Javascript 中相当于一个类。您创建类定义(可以这么说)，然后实例化该类的实例(或对象)，并使用点符号调用它们的方法。因此，

person = new Person("Bob");
person.greeting();

还有一种单例方法，例如

myObject = {
    foo : function() { /* do something */ }
}

然后你可以说myObject.foo()

希望这有帮助。