Использование ключевого слова «this» в javascript

Я прочитал об этом ключевом слове, и я узнал, что это ключевое слово this используется для объекта, который находится в контексте.Использование ключевого слова «this» в javascript

<!DOCTYPE html> 
    <html> 
    <body> 



    <form id="myForm"> 
    <label>Type anything but "fun": <input id="noFun" type="text" oninput="checkValid" required ><input type="submit"></label>                
    <div><button onclick="previewMessage()">Preview errors</button></div> 
    <div id="err"></div> 
    </form> 

    <script> 

     function checkValid() { 
      if (this.value == "fun") { 
       this.setCustomValidity("You're having too much fun!"); 
      } else { 
     // input is fine -- reset the error message 
     this.setCustomValidity(''); 
      } 
     } 
     function previewMessage() { 
      var myform = document.getElementById("noFun") 
      document.getElementById("err").innerHTML = myform.validationMessage; 
     } 
    </script> 

    </body> 
    </html>

Но когда я использую oninput = «checkValid», он должен скопировать функцию checkValid и «это» ключевое слово внутри функции следует указать на вход object.But, что это не так !!!

Проверьте этот еще один фрагмент кода, он означает то же, что и предыдущий, но работает нормально.

<form id="myForm"> 
    <label>Type anything but "fun": <input id="noFun" type="text"   oninput="checkValid(this)" required ><input type="submit"></label> 
    <div><button onclick="previewMessage();">Preview errors</button></div> 
    <div id="err"></div> 
    </form> 
    <script> 
     function checkValid(input) { 
      if (input.value == "fun") { 
       input.setCustomValidity("You're having too much fun!"); 
      } else { 
       // input is fine -- reset the error message 
       input.setCustomValidity(''); 
      } 
     } 
     function previewMessage() { 
      var myform = document.getElementById("noFun") 
      document.getElementById("err").innerHTML=myform.validationMessage; 
     } 
    </script>

Можете ли вы объяснить мне разницу между двумя фрагментами и почему первый пример не работает должным образом.

Заранее благодарен!

источник

2016-12-30 Piyush Bhuwalka

Когда вы вызываете 'checkValid()', 'this' является' window'. Когда вы вызываете его, вам нужно либо сделать что-то вроде 'this.checkValid = checkValid; this.checkValid() 'или называть его как' checkValid.call (this) '. – Siguza

Возможный дубликат [Как работает ключевое слово this?] (Http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) –

Но когда я использую oninput = "checkValid", он должен скопировать функцию checkValid, а ключевое слово "this" внутри функции должно указывать на объект ввода.

Нет, не следует.

Значение атрибута встроенного события - это тело функции обработчика события.

HTML-oninput="checkValid" эквивалентно JavaScript:

reference_to_input.oninput = function (event) { 
    checkValue; 
};

Упоминание переменную (как checkValue), ничего не делая для него (как положить () после этого вызвать функцию) ничего не делает.

источник

2016-12-30 15:22:30 Quentin

, как вы создали обработчик событий таков, что значение this будет не быть <input> элемента. У вас есть то, что составляет «голой» вызов функции, поэтому this будет ссылаться на объект window.

Если, однако, вы должны были установить обработчик событий в JavaScript, как это:

document.getElementById("noFun").oninput = checkValid;

вы получите this со ссылкой на элемент.

Обратите внимание, что ваш код будет передать ссылку на элемент в качестве параметра, поэтому ваш второй образец кода работает.

источник

2016-12-30 15:22:46 Pointy

так в чем разница между –

document.getElementById («noFun»). oninput = checkValid; –

AND Тип ничего, кроме «fun»:

Использование ключевого слова «this» в javascript

ответ

Смежные вопросы