Javascript: Объяснение ключевого слова этого пользователя

Question

Может ли кто-нибудь объяснить ключевое слово this в Javascript? Предпочтительно на простом английском языке без цитирования онлайн-источников или учебников. Я почти уверен, что прочитал их уже. Я до сих пор не совсем понял концепцию.

Я понимаю, что this может иметь несколько разных значений, в зависимости от того, как и когда он используется.

Например, я прочитал, что в некоторых случаях он может ссылаться на глобальный объект. Можете ли вы объяснить разные ситуации, когда значение this изменится и как оно будет использоваться?

Answer 1

Чтобы понять this, вам нужно понять объектно-ориентированное программирование.

В объектно-ориентированном программировании большинство методов (функций) относятся к objects. В Javascript большинство objects являются элементами окна; кнопка, список, div. Почти что на вашей веб-странице, которую вы можете описать как существительное, вероятно, является object, в некотором роде; и несколько вещей, которые не являются, являются членами objects.

Итак, в объектно-ориентированном программировании у вас есть проблема, что у вас может быть метод, скажем, onclick. Внутри onclick у вас есть код, который выполняется; скажем, вы меняете фон <div> от синего до зеленого и обратно, когда на него нажимают. Построим это, на английском/псевдокоде.

myDiv.onClick { 
    if the div that was clicked on has a background of blue then set that div's background to green 
    else if the div that was clicked on has a background of green then set it to blue 
} 

Итак, довольно легко, правда? Если это не было объектно-ориентированное программирование, ваша функция примет аргумент, div_id. Таким образом,

onClick(div_id theDiv) { 
    if theDiv.background=blue then theDiv.background=green 
    else if theDiv.background=green then theDiv.backgrond=blue 
} 

Однако это объектно-ориентированное программирование. onClick - это метод div, и часть преимущества объектно-ориентированного программирования заключается в том, что вам не нужно передавать аргументы, подобные тому, что вы имеете в виду, - вы имеете в виду div, который называется аргументом, конечно! Каждый div имеет свою собственную ссылку на onClick, возможно, свою собственную копию в зависимости от того, как вы написали метод.

Это действительно оставляет проблему. Как вы говорите,

if this Div's background is blue then set this div's background to green 

? Ответ this. this относится к объекту, к которому принадлежит текущий метод. Итак, когда нажимают div, его метод onClick вызывается; и у вас есть:

div.onClick() { 
    if this.background=blue then this.background=green 
    else if this.background=green then this.background=blue 
} 

Таким образом, вы только написать одну функцию div.onClick, и теперь каждый ДИВ может быть включен синий или зеленый на досуге.

Answer 2

Лучший способ взглянуть на это «Как работают функции, вызванные в Javascript?»

Внутри есть примитив функции, известный как "[[Call]]", который имеет интерфейс в Function.prototype.call(thisArg, arguments...), так что я буду использовать здесь.

Каждый раз, когда вы вызываете функцию в Javascript, вы пишете синтаксис, который преобразует в эквивалентный оператор Function.call, и он передается вам thisArg.Это зависит исключительно от того, как вы называете эту функцию, а не каких-либо других объектно-ориентированных концепций. Это один из основных программистов-замешателей, используемых для использования семантики объектов на основе классов на других языках, когда они приходят в Javascript.

В случае вызова функции в глобальном контексте:

function foo(a) { console.log(a); return this; } 
foo(5); // equivalent to foo.call(window, 5); 
     // outputs 5, returns (Window) 

В случае функции, называемой , как если бы это были связаны с объектом (точечный синтаксис):

var o = { foo: function(a) { console.log(a); return this; } }; 
o.foo(5); // equivalent to o["foo"].call(o, 5) 
      // outputs 5, returns (Object(o)) 

Это действительно все, что нужно. Обратите внимание на то, что мы можем добраться до же функции другим путем:

var x = o.foo; 
x(5); // equivalent to x.call(window, 5); 
     // outputs 5, returns (Window) 

и это точно такая же функция не имеет знаний, чтобы быть связаны каким-либо образом на всех к o мы создали его.

В качестве простого английского языка, как я думаю, что эта тема может получить:

• Если вы вызываете функцию, не подвергая точку впереди, this будет window (глобальный объекта).
• Если точка впереди, this будет объектом перед точкой.

Если вам не нравится, как это работает, вы можете имитировать различное поведение в различных формах (например, Function.prototype.bind или передавая свой собственный thisArg в call или apply).

^{Малый принт: в строгом режиме ECMAScript, где window передан в приведенных выше примерах, он вместо этого пройдет undefined. И «точка впереди» я просто говорю практически, o["foo"](6), будучи таким же, как o.foo(6) делает то же самое с this.}