如何将 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

为了做到这一点，您需要封装或在 JavaScript 中调用它 - 一个范围。

您可以创建一个代理来保存元素，然后在其上创建一些函数：

function ElementHolder(elem){
   this.elem = elem;
}

ElementHolder.prototype.doSomethingToElement = function(){
    //your code on this.elem
}

并使用它：

var elemHolder = new ElementHodler(document.getElementById('elem'));
elemHolder.doSomethingToElement ()

Answer 2

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

答案的关键是您在这里拥有的elem ：

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

与$("#elem")

后者是一个 jQuery 对象，拥有所有那些很酷的 jQuery 方法。 前者是vanilla 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()

希望这可以帮助。

Answer 3

你可以这样做：

function myFunction() {
throw("syntaxError: myFunction is not a 
function")
 //give error when myFunction() is called.
 myFunction.something = 
  function(parameters) {
   //code is here
}
}

它的工作原理是定义myFunction但让它看起来不存在，然后在函数中添加.something 。 然后当您调用myFunction.something()时代码运行。

希望这对您（或其他人）有所帮助！

Answer 4

是的，只需扩展Element.prototype ：

Element.prototype.log = function(){
  console.log(this);
};

你可以像这样使用它：

document.body.log();