JS: Как вызвать метод hello внутри объекта?

LH
На сайте с 26.09.2013
Offline
89
1225

<script type="text/javascript">
const Obj = {
hello: function() {
console.log( 'Hello!' );
},
init: function() {
document.querySelector( '.some-button' ).onclick = function() {
this.hello();
}
}
}

Obj.init();
</script>
S
На сайте с 30.09.2016
Offline
469
#1

А почему Вас не устраивает Obj.hello()?

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
danforth
На сайте с 18.12.2015
Offline
153
#2

В JS ООП не такое как в других языках. Тут прототипная модель, а this зависит от контекста вызова. Пытаться писать JS код по ООП схемам других языков, это не правильно.

<script type="text/javascript">
const Obj = {
hello: function() {
console.log( 'Hello!' );
},
init: function() {
var self = this; // переназначим, self = this
document.querySelector( '.some-button' ).onclick = function() {
self.hello(); // потому что тут this - это элемент по которому кликнули
// да и вообще, в JS this зависит от контекста вызова
}
}
}

Obj.init();
</script>
Junior Web Developer
LH
На сайте с 26.09.2013
Offline
89
#3
danforth:
<script type="text/javascript">

const Obj = {
hello: function() {
console.log( 'Hello!' );
},
init: function() {
var self = this; // переназначим, self = this
document.querySelector( '.some-button' ).onclick = function() {
self.hello(); // потому что тут this - это элемент по которому кликнули
// да и вообще, в JS this зависит от контекста вызова
}
}
}

Obj.init();
</script>

Благодарю!

vandamme
На сайте с 30.11.2008
Offline
675
#4
S3
На сайте с 29.03.2012
Offline
367
#5

danforth, А зачем переназначать? Просто this.hello(); не будет работать?

ДП
На сайте с 23.11.2009
Offline
203
#6
Sly32:
danforth, А зачем переназначать? Просто this.hello(); не будет работать?

Так вот у ТС не заработало.

Там дело в том, что внутри функции-обработчика onclick: this - это элемент, по которому кликнули, а у него метода hello() нет. Поэтому нужный this надо пробросить снаружи функции через переназначение var _self = this;

В новых стандартнах (или они не стандарты еще) js, в typescript есть стрелочные функции (arrow functions) - они вот позволяют без переназначения this использовать внутри.

vandamme
На сайте с 30.11.2008
Offline
675
#7
Дикий пионер:
они вот позволяют без переназначения this использовать внутри.

ноу них пока нет 100% поддержки всеми браузерами.

S3
На сайте с 29.03.2012
Offline
367
#8

Дикий пионер, Спасибо за разьяснения, теперь понятно)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий