var $this = this 的原因是什么

发布于 2024-12-01 17:45:12 字数 332 浏览 2 评论 0原文

我不是最擅长 jquery，而且我遇到了 var 初始化，我不知道为什么编写代码的人这样做。

在插件的 init 中，我们有

this.init = function(settings) {
    var $this = this;
    this.s = {
        initialSlide: 0,
        firstSlide: true,
    };
   ... more code, some uses $this, some uses "this"
}

那么“$this”和“this”之间有什么区别，为什么不一直使用其中之一呢？

原文

I'm not the best at jquery and I came across a var initialization that I don't know why the person who wrote the code did it this way.

In the init for a plugin, we have

this.init = function(settings) {
    var $this = this;
    this.s = {
        initialSlide: 0,
        firstSlide: true,
    };
   ... more code, some uses $this, some uses "this"
}

So what is the difference here between "$this" and "this" and why not use one or the other all the time?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

静谧 2024-12-08 17:45:12

一般来说，这意味着 this 的副本。 this 的特点是它在每个函数中都会发生变化。然而，以这种方式存储它可以防止 $this 发生变化，而 this 确实会发生变化。

jQuery 大量使用了神奇的 this 值。

考虑这段代码，您可能需要像您所看到的那样：

$.fn.doSomethingWithElements = function() {
    var $this = this;

    this.each(function() {
        // `this` refers to each element and differs each time this function
        //    is called
        //
        // `$this` refers to old `this`, i.e. the set of elements, and will be
        //    the same each time this function is called
    });
};

Generally, this means a copy of this. The thing about this is that it changes within each function. Storing it this way, however, keeps $this from changing whereas this does change.

jQuery heavily uses the magic this value.

Consider this code, where you might need something like you are seeing:

$.fn.doSomethingWithElements = function() {
    var $this = this;

    this.each(function() {
        // `this` refers to each element and differs each time this function
        //    is called
        //
        // `$this` refers to old `this`, i.e. the set of elements, and will be
        //    the same each time this function is called
    });
};

回复收藏 0 原文

↙厌世 2024-12-08 17:45:12

在这种情况下，什么也没有。 $this 只是另一个分配有 this 的变量声明。

通常，我见过使用 JavaScript 库的人在包装 this 时使用此快捷方式。例如，jQuery 中的典型用法是：

// rather than writing $(this) everywhere
var $this = $(this);

$this.each(function(){
    // Do Something
});

In this case, nothing. $this is just another variable declaration which has this assigned to it.

Typically, I've seen this shortcut used by people using JavaScript libraries when wrapping this. For example, typical usage in jQuery would be:

// rather than writing $(this) everywhere
var $this = $(this);

$this.each(function(){
    // Do Something
});

回复收藏 0 原文

狂之美人 2024-12-08 17:45:12

实际上，jQuery 是 JavaScript DOM 的包装器，既增强又简化了它。
非常简单地说，JQuery 选择器返回 JQuery 对象，即，

var jQueryResults = $("article"); //Contains all article elements in the DOM as JQuery objects

但是，使用 Javascript 选择元素会返回 HTML DOM 元素，即，

var normalResults = document.getElementsByTagName("article");//Contains all article elements in the DOM as HTML objects

出现的问题是 DOM 对象不提供与 JQuery 对象提供的功能相同的功能。

下面是一个事件示例，说明了其中的区别：

$('.changeColorHover').hover(function() {
    this.attr("style", "color:red");
}); //Will not work as we are trying to call a JQuery method on a DOM object

考虑到上述情况，“this”关键字是一个 DOM 对象，因此您需要将其转换为 jQuery 对象才能使用 jQuery 方法。

 $('.changeColorHover').hover(function() {
        $(this).attr("style", "color:red");
 }); //Will work since we have first converted the DOM object to a JQuery object

总而言之，this 关键字允许您访问调用事件的对象，因为这将提供对引发事件的对象的引用。但是，这是一个 DOM 对象，而不是 jQuery 对象。因此，您想要使用的任何 jQuery 方法都不可用，除非您将其转换为 jQuery 对象。

In actuality jQuery is a wrapper around the JavaScript DOM, both enhancing and simplifying it.
Very briefly JQuery selectors return JQuery Object/s i.e.

var jQueryResults = $("article"); //Contains all article elements in the DOM as JQuery objects

However, selecting elements with Javascript returns HTML DOM elements i.e.

var normalResults = document.getElementsByTagName("article");//Contains all article elements in the DOM as HTML objects

The issues arise in that DOM objects do not provide the same functionality that JQuery objects provide.

Here is an event example which illustrates the difference:

$('.changeColorHover').hover(function() {
    this.attr("style", "color:red");
}); //Will not work as we are trying to call a JQuery method on a DOM object

With the above mentioned in mind the 'this' keyword is a DOM object and thus you are required to convert it to a jQuery object in order to utilise jQuery methods.

 $('.changeColorHover').hover(function() {
        $(this).attr("style", "color:red");
 }); //Will work since we have first converted the DOM object to a JQuery object

To sum up, the this keyword, allows you to access the object that called the event as this will give a reference to the object that raised the event. But, this is a DOM object, not a jQuery object. As a result, any of the jQuery methods you'd like to use aren't available, unless you convert it to a jQuery object.

回复收藏 0 原文