'var that = this;'是什么？在JavaScript中意味着什么？

在一个JavaScript文件中，我看到了：

function Somefunction(){
   var that = this; 
   ... 
}

什么是声明的目的that和分配this本呢？

#1楼

这是使内部功能（在其他功能内定义的功能）更按需工作的一种技巧。在JavaScript中，当你定义里面另外一个功能， this将自动被设置为全局范围。这可能会造成混淆，因为您希望this具有与外部函数相同的值。

var car = {};
car.starter = {};

car.start = function(){
    var that = this;

    // you can access car.starter inside this method with 'this'
    this.starter.active = false;

    var activateStarter = function(){
        // 'this' now points to the global scope
        // 'this.starter' is undefined, so we use 'that' instead.
        that.starter.active = true;

        // you could also use car.starter, but using 'that' gives
        // us more consistency and flexibility
    };

    activateStarter();

};

当您将函数创建为对象的方法（例如car.start中的car.start ），然后在该方法内部创建函数（例如activateStarter ）时，这尤其是一个问题。在顶层方法中， this指向对象，它是的方法（在本例中为car ），但是在内部函数中， this现在指向全局范围。真痛苦

创建一个变量以按惯例在两个范围内使用都是解决javascript这个非常普遍的问题的方法（尽管它在jquery函数中也很有用）。这就是为什么很一般名曰that被使用。这是克服语言缺陷的一种容易识别的约定。

就像El Ronnoco在道格拉斯 ·克罗克福德（ Douglas Crockford）暗示的那样，这是一个好主意。

#2楼

有时， this可以参考另一个范围，是指别的东西，例如，假设你要调用一个DOM事件中构造函数方法，在这种情况下， this将涉及到的DOM元素而不是创建的对象。

的HTML

<button id="button">Alert Name</button>

var Person = function(name) {
  this.name = name;
  var that = this;
  this.sayHi = function() {
    alert(that.name);
  };
};

var ahmad = new Person('Ahmad');
var element = document.getElementById('button');
element.addEventListener('click', ahmad.sayHi); // => Ahmad

演示版

assing以上将解决this要that ，然后我们就可以和访问里面的name属性sayHi来自法that ，所以这可以被称为无DOM调用中的问题。

另一个解决方案是分配一个空that对象并添加属性和方法，然后返回它。但是使用此解决方案，您失去了构造函数的prototype 。

var Person = function(name) {
  var that = {};
  that.name = name;
  that.sayHi = function() {
    alert(that.name);
  };
  return that;
};

#3楼

如果您通过使用call()或apply()进行变通that则实际上不需要使用它：

var car = {};
car.starter = {};

car.start = function(){
    this.starter.active = false;

    var activateStarter = function(){
        // 'this' now points to our main object
        this.starter.active = true;
    };

    activateStarter.apply(this);
};

#4楼

这是一个例子

$(document).ready(function() {
        var lastItem = null;
        $(".our-work-group > p > a").click(function(e) {
            e.preventDefault();

            var item = $(this).html(); //Here value of "this" is ".our-work-group > p > a"
            if (item == lastItem) {
                lastItem = null;
                $('.our-work-single-page').show();
            } else {
                lastItem = item;
                $('.our-work-single-page').each(function() {
                    var imgAlt = $(this).find('img').attr('alt'); //Here value of "this" is '.our-work-single-page'. 
                    if (imgAlt != item) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
            }

        });
    });`

因此，您可以看到此值是两个不同的值，具体取决于您定位的DOM元素，但是当您在上面的代码中添加“ that”时，您将更改定位的“ this”的值。

`$(document).ready(function() {
        var lastItem = null;
        $(".our-work-group > p > a").click(function(e) {
            e.preventDefault();
            var item = $(this).html(); //Here value of "this" is ".our-work-group > p > a"
            if (item == lastItem) {
                lastItem = null;
                var that = this;
                $('.our-work-single-page').show();
            } else {
                lastItem = item;
                $('.our-work-single-page').each(function() {
                   ***$(that).css("background-color", "#ffe700");*** //Here value of "that" is ".our-work-group > p > a"....
                    var imgAlt = $(this).find('img').attr('alt'); 
                    if (imgAlt != item) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
            }

        });
    });`

..... $（that）.css（“ background-color”，“＃ffe700”）; //这里“ that”的值是“ .our-work-group> p> a”，因为var that = this; 因此，即使我们位于“ this” ='.our-work-single-page'，我们仍然可以使用“ that”来操纵先前的DOM元素。

#5楼

从克罗福德

按照惯例，我们做一个私有变量。这用于使对象可用于私有方法。这是为在ECMAScript的语言规范的错误这将导致此不正确地对内部函数来设置一种解决方法。

JS小提琴

function usesThis(name) {
    this.myName = name;

    function returnMe() {
        return this;        //scope is lost because of the inner function
    }

    return {
        returnMe : returnMe
    }
}

function usesThat(name) {
    var that = this;
    this.myName = name;

    function returnMe() {
        return that;            //scope is baked in with 'that' to the "class"
    }

    return {
        returnMe : returnMe
    }
}

var usesthat = new usesThat('Dave');
var usesthis = new usesThis('John');
alert("UsesThat thinks it's called " + usesthat.returnMe().myName + '\r\n' +
      "UsesThis thinks it's called " + usesthis.returnMe().myName);

这会提醒...

认为那叫戴夫（Dave）

用途这被认为是未定义的

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3179532

标签

var

work

'var that = this;'是什么？ 在JavaScript中意味着什么？

#1楼

#2楼

#3楼

#4楼

#5楼

'var that = this;'是什么？在JavaScript中意味着什么？