Question

有时，当我查看其他人的代码时，他们会转到var self = this;或jquery，例如，去var $self = $(this);

有这样做的特殊原因吗？

Answer 1

它保留this的值，用于在当前函数中定义的函数中。

// Contrived example
var myObject = {
    func: function () {
        var self = this;
        setTimeout(bar, 1000);

        function bar () {
            alert(this); // `window`
            alert(self); // `myObject`
        }
    }
};
myObject.func();

Answer 2

通过在某些上下文中保留对this的引用，您可以在其他上下文中访问它，例如在成员函数或forEach循环中。

考虑以下示例：

function ViewModel() {
   var self = this;

   self.linksArray = ["link1", "link2", "link3"];

   self.linksArray.forEach(function(link) {
       // this refers to the DOM window
       // and self refers to the parent context (ViewModel)
   });
};

Answer 3

特定示例（不使用JQuery）是函数闭包。在函数闭包中引用它是指函数对象，而不是定义闭包的上下文。您的示例是处理闭包问题的一种方法：

var that = this;
function(){
   that.something = 1;
}();

处理此问题的另一种方法是使用函数上的apply方法：

function(arg){
   this.something = 1;
}.apply(this, argumentArray);

apply中的第一个参数是“this参数”，“this”也将参考。

Answer 4

正如其他人所提到的，如果您希望在另一个函数中使用它，可以将变量设置为$（this）。

在实际示例中，当执行与页面上的事件绑定的ajax调用时。使用JQuery：

<script>

        $(document).on("click", ".mySelector", function () {
            // Where we are in the click event, $(this) refers to whatever
            // element has a class of mySelector that was clicked
            var self = $(this);
            theDiv.html('');
            $.ajax({
                cache: false,
                type: "GET",
                url: "/SomeAjaxMethod",
                data: { },
                success: function (data) {
                    // Trying to access $(this) here will return undefined, as
                    // we are technically in the callback method
                    // Where our event is based on a class, there is likely more
                    // than one element on the page with the class, so it would be
                    // difficult to get the exact element again without some other code
                    self.html(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Ajax failed.")
                }
            }); // end ajax call
        }); // end on mySelector class click
</script>

或：

<script>
    $(document).ready(function () {
        $('.foo').click(function () {
            var self = $(this);           // Whatever element that was clicked with foo class
            $('.bar').each(function () {
                var bar = $(this);        // Current iteration of bar element in the loop
                var baz = self;           // self is still the initial value, but $(this) is not
            }); // end bar loop
        }); // end foo click
    }); // end doc ready
</script>

Answer 5

这样做的一个目的是使this可以访问内部函数。例如：

function clickHandler(){
  console.log(this); // this is body
  var $self = this;
  function inner(){
    console.log(this); // this is window
    console.log($self); // this is body
  }
  inner();
}
$("body").click(clickHandler);

在控制台中运行它以获得理解。

是否有功能目的将变量设置为＆＃39;这个＆＃39;？

5 个答案: