在方法中修改类属性答案

【问题标题】：Modifying class properties in a method在方法中修改类属性
【发布时间】：2019-09-12 10:07:16
【问题描述】：

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

【问题讨论】：

标签： javascript jquery oop inner-classes

【解决方案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()

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

【讨论】：