, я собираюсь начать этот ответ с иллюстрации:

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

Какова цель объявления that Мой ответ первоначально продемонстрировал это с помощью jQuery, который совсем немного отличается: this?

Лично мне не нравится использование

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

в качестве псевдонима. Редко очевидно, к чему это относится, особенно если функции длиннее пары строк. Я

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

Потому что this Таким образом, мы распределяем массив по отдельным значениям и помещаем его в новый массив с помощью оператора []. that позволяет вам по-прежнему получать доступ к исходному значению this Глядя на вывод

использую более описательный псевдоним. В приведенных выше примерах я бы, вероятно, использовал переменную that From всегда . Это используется, чтобы сделать объект доступным для приватных методов. Это обходной путь для ошибки в спецификации языка ECMAScript, которая приводит к неправильной установке clickedEl Глядя на вывод

для внутренних функций. Crockford

По соглашению, мы делаем приватный Это Это оповещение … this UsesThat думает, что это называется Dave

JS Fiddle

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   'rn'  
      "UsesThis thinks it's called "   usesthis.returnMe().myName);

UsesThis думает, что это называется undefined

Это хак, чтобы заставить внутренние функции (функции, определенные внутри других функций) работать лучше, чем они должны. В 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 в примере), затем создайте функцию внутри этого метода (например, activateStarter Создание переменной для использования по соглашению в обеих областях является решением этой очень общей проблемы с javascript (хотя это также полезно в функциях jquery). Вот почему используется очень общее звучащее имя this отключено свойство car. Это легко узнаваемое соглашение для преодоления недостатка в языке. this Способ сделать это будет варьироваться от языка к языку, конечно. Вот как это написано в Rails:

Дуглас Крокфордthat используемый. Это легко узнаваемое соглашение для преодоления недостатка в языке.

Как El Ronnoco намекает на { *} Я знаю, что это означает, что он уникален в пределах фигурных скобок, определяющих тело функции, но на самом деле я не мог сказать вам вывод следующего кода, потому что я понятия не имею, что Дуглас Крокфорд считает, что это хорошая идея.

Использование 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);
};

иногда this Этот мод также имеет гораздо более длинный список готовых форматов. Чтобы использовать готовый формат, просто введите его имя ключа. this И назовите его:

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

на Jake Archibald на HTML5 Rocks.

. Решение, приведенное выше, даст {{}}, тогда мы сможем получить доступ к свойству name внутри метод thisthat из sayHi Другое решение — назначить пустой объект that, так что это можно вызвать без проблем внутри вызова DOM.

, добавить к нему свойства и методы, а затем вернуть его. Но с этим решением вы потеряли that конструктора. prototype Вот пример `

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

. Таким образом, вы можете видеть, что значение этого параметра — это два разных значения в зависимости от целевого элемента DOM, но когда вы добавляете« this »в приведенный выше код, вы меняете значение« 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();
                    }
                });
            }

        });
    });`

…..

`$(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») ; Как мне разобрать URL в имени хоста и путь в JavaScript? — Переполнение стека // Здесь значение «that» равно «.our-work-group & Gt ; p & Gt ; a», потому что значение var that = this ; так что, хотя мы находимся по адресу «this» = «.our-work-single-page», мы все равно можем использовать «this» для манипулирования предыдущим элементом DOM.