修改方法中的 class 个属性

Question

我正在研究 OOP 以及 jQuery 等框架的工作原理。如果我使用更改 class 属性的方法创建 class，它会为所有变量调用更改它：

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" 方法替换了 class 的属性，变量 "p" 就像 class 实例的快捷方式。但是如何让它像在 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()

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

修改方法中的 class 个属性

Modifying class properties in a method

javascript

oop

jquery

inner-classes