Что такое "this" в javascript при вызове метода на вычисленном объекте?

Я знаю, что this, вероятно, является второй самой интересной в javascript, сразу после арифметики с плавающей запятой.

Я вообще знаю, как работает this, и как это влияет на функции стрелок, .call(), .apply() и .bind(). Я думал, что все это понял. Но я этого не делаю.

В веб-браузере document.createElement("div").classList.add("c") дает undefined, как ожидалось. Однако это выражение неожиданно является ошибкой.

(true && document.createElement("div").classList.add)("c")

Я ожидал, что он будет таким же, но это

Uncaught TypeError: Illegal invocation
    at <anonymous>:1:54

Ответ 1

Ваше выражение

(true && document.createElement("div").classList.add)("c") также можно переписать следующим образом:

var add = (true && document.createElement("div").classList.add)
add("c")

[Логический И (& &) expr1 && & expr2: Возвращает expr1, если его можно преобразовать в false; в противном случае возвращает expr2.]

Вы видите, что функция add теперь является частью window и теряет ссылку на фактический объект classList и, следовательно, не может быть вызвана правильно.

add this теперь указывает на глобальный объект.

Если вы следуете (если новый div является единственным div на вашей странице), он снова ссылается на исходный объект:

(true && document.createElement("div").classList.add).bind(document.getElementsByTagName("div")[0].classList)("c")

Ответ 2

Это будет работать, поскольку оно возвращает this как classlist context

(document.createElement("div").classList.add)("c")

(true && document.createElement("div").classList.add) не будет работать, поскольку add получает оценку с помощью && & выражение и после этого возвращает контекст выражения (true && document.createElement("div").classList.add), который является add() { [native code] }, а не classList, и здесь мы пытаемся вызвать add on add function.

Когда вы пытаетесь передать имя класса ("c") на add, то это уже не classlist следовательно Illegal invocation

Ответ 3

То, что вы пытаетесь сделать, не имеет смысла. Может быть, вы имеете в виду

var added document.createElement("div").classList.add("c")
If (added){...….}

В вашем примере у вас есть a) слишком много после добавления