这里有一个例子 ｀

$(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();
                    }
                });
            }

        });
    });`

因此，您可以看到this的值是两个不同的值，这取决于您的目标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();
                    }
                });
            }

        });
    });`

…(美元). css(“背景颜色”,“# ffe700”);//这里的"that"的值是"。Our-work-group > p > a"因为var that = this的值;所以即使我们在"this"= '。we -work-single-page’，我们仍然可以使用“that”来操作前面的DOM元素。

这是一种让内部函数(在其他函数中定义的函数)工作得更正常的方法。在javascript中，当你在另一个函数中定义一个函数时，它会自动被设置为全局作用域。这可能会令人困惑，因为您希望这个函数的值与外部函数中的值相同。

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。然后在该方法中创建一个函数(如activatstartter)。在顶层方法中this指向对象，它是一个方法(在本例中为car)，但在内部函数中this现在指向全局作用域。这是一种痛苦。

在这两个作用域中创建一个按照约定使用的变量是javascript中这个非常普遍问题的解决方案(尽管它在jquery函数中也很有用)。这就是为什么使用听起来很普通的名称。这是一种很容易识别的习惯，用来克服语言中的缺点。

就像埃尔·罗诺科暗示的那样，道格拉斯·克罗克福德认为这是个好主意。

我将以一个例子开始回答这个问题:

var colours = ['red', 'green', 'blue'];
document.getElementById('element').addEventListener('click', function() {
    // this is a reference to the element clicked on

    var that = this;

    colours.forEach(function() {
        // this is undefined
        // that is a reference to the element clicked on
    });
});

我的答案最初用jQuery演示了这一点，这只是略有不同:

$('#element').click(function(){
    // this is a reference to the element clicked on

    var that = this;

    $('.elements').each(function(){
        // this is a reference to the current element in the loop
        // that is still a reference to the element clicked on
    });
});

因为当您通过调用新函数来更改作用域时，这个值经常会发生变化，因此您不能通过使用它来访问原始值。把它混叠成这样，你仍然可以访问这个的原始值。

就我个人而言，我不喜欢用那个作为别名。它指的是什么并不明显，特别是如果函数的长度超过几行。我总是用一个更有描述性的别名。在上面的例子中，我可能会使用clickedEl。

有时this可以引用另一个作用域并引用其他东西，例如，假设您想在DOM事件中调用构造函数方法，在这种情况下，this将引用DOM元素而不是创建的对象。

HTML

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

JS

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

Demo

上面的解决方案将把这个传递给那个，然后我们可以从sayHi方法中访问name属性，所以在DOM调用中可以没有问题地调用这个。

另一种解决方案是为该对象分配一个空对象，并向其添加属性和方法，然后返回该对象。但是使用这个解决方案，您失去了构造函数的原型。

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

如果你使用call()或apply()来解决这个问题，那么就没有必要使用它:

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);
};

这里有一个例子 ｀

$(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();
                    }
                });
            }

        });
    });`

因此，您可以看到this的值是两个不同的值，这取决于您的目标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();
                    }
                });
            }

        });
    });`

…(美元). css(“背景颜色”,“# ffe700”);//这里的"that"的值是"。Our-work-group > p > a"因为var that = this的值;所以即使我们在"this"= '。we -work-single-page’，我们仍然可以使用“that”来操作前面的DOM元素。