Question

我正在开发一个类似javascript库的jQuery。语法如下：

tex(selector).function();

在我的javascript库中，我有这个：

(function(){
  var tex = function(selector){
    //selection code here
  },
  tex.prototype = {
    // prototype functions here
  }
})();

我遇到的问题是如何将this设置为等于元素。我已经尝试this = document.getElement...但它没有用。我知道jQuery以某种方式做到这一点，但我不知道如何。

有谁知道我怎么做到这一点？非常感谢你。

Answer 1

您只能在调用函数时执行此操作，通常使用Function#call或Function#apply：

function foo() {
    console.log("name = " + this.name);
}
var obj = {name: "Fred"};
foo.call(obj); // Outputs "Fred"

在那里，我们使用foo调用call函数，在调用期间传递obj作为this使用的值。

将其应用于DOM元素：

function foo() {
    console.log("My id is " + this.id);
}
var elm = document.getElementById("whatever");
foo.call(elm); // "My id is whatever"

在通话期间用作this的值是call和apply的第一个参数。两者之间的唯一区别是如何将参数传递给函数（foo，在上面的示例中）：使用call，将它们作为后续离散参数传递：

theFunction.call(thisArg, firstArg, secondArg, thirdArg);

使用apply，你可以给它一个数组的args：

var args = [firstArg, secondArg, thirdArg];
theFunction.apply(thisArg, args);

// or (of course)
theFunction.apply(thisArg, [firstArg, secondArg, thirdArg]);
// Note -------------------^-----------------------------^

这是一个更完整的例子：

function foo(firstArg, secondArg, thirdArg) {
    console.log("name = " + this.name);
    console.log("firstArg = " + firstArg);
    console.log("secondArg = " + secondArg);
    console.log("thirdArg = " + thirdArg);
}
var obj = {name: "Fred"};

// These two calls do exactly the same thing:
foo.call(obj, "one", "two", "three");
foo.apply(obj, ["one", "two", "three"]); // Note the [ and ]

Answer 2

jQuery通过将所选元素作为context传递给回调函数来实现此目的。

例如......

tex.prototype = {
    // prototype functions here
    someMethod: function(callback) {
        callback.apply(this, arguments);
    }
}

您可以为上下文传递任何javascript对象，因此上例中的this可能是您选择的元素。

编辑：

为清楚起见。您可以在tex函数中执行此操作。

var element;
var tex = function(selector){
    element = document.getElementById(selector);
}

然后在第一个示例中，使用element代替this。

作为旁注，您的tex变量当前不能在自动执行的匿名函数之外访问。

JavaScript库将其设置为元素

2 个答案: