javascript - 修改方法中的类属性

Question

我正在研究 OOP 以及 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 中一样工作呢？

Answer 1

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()

这个示例可能有点过于简单化，但总体思想仍然存在 - 如果您不想更改主对象的状态，请不要修改它。如果您确实需要对新状态进行操作但仍保留旧状态，那么只拥有两个对象会更容易。