Изменение свойств класса в методе - PullRequest
Новая
       25

Изменение свойств класса в методе

0 голосов
/ 23 апреля 2019

Я изучаю ООП и как работают фреймворки, такие как jQuery. Если я создаю класс с методами, которые изменяют свойства класса, он меняет его для всех вызовов переменных: 

class test{

        constructor(selector) {
            this.el = document.querySelectorAll(selector);
            return this;
        }

        find(selector) {
            this.el = this.el[0].querySelectorAll(selector); //well...
            return this;
        }

}

function x(selector){ return new test(selector); }

var p = x('#parent'); //returns #parent
var c = p.find('#child') //returns #child
console.log(p); //returns #child too!

Но если я использую jQuery, он работает так, как мне нужно: 

var p = $('#parent'); //returns #parent
var c = p.find('#child') //returns #child
console.log(p); //returns #parent

Я понимаю, что метод "find" заменяет свойства класса, а переменная "p" похожа на ярлык для экземпляра класса. Но как заставить его работать так, как он работает в jQuery?

1 Ответ

1 голос
/ 23 апреля 2019

Способ jQuery заключается в том, что он не дает вам того же элемента , что и раньше, но нового . Если мы используем ту же технику с вашим кодом, она будет выглядеть примерно так: 

class test{

        constructor(selector) {
            this.el = document.querySelectorAll(selector);
            return this;
        }

        find(selector) {
            return new test(selector); //return a new instance
        }

}

function x(selector){ return new test(selector); }

var p = x('#parent'); //will return #parent
var c = p.find('#child') //will return #child - this is a separate instance
console.log(p); //will still return #parent because it's not modified by .find()

Этот пример может быть немного упрощен, но общая идея остается - не изменяйте состояние основного объекта, если вы не хотите, чтобы он изменился. Если вам нужно воздействовать на новое состояние, но при этом сохранить старое, проще всего иметь два объекта.

...