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

我知道什么“查找”方法代替了类的属性，而变量“ 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()

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

修改方法中的类属性

1 个答案: