Javascript 修改方法中的类属性
我正在研究OOP以及像jQuery这样的框架是如何工作的。如果我使用更改类属性的方法创建类,它会更改所有变量调用的类:Javascript 修改方法中的类属性,javascript,jquery,oop,inner-classes,Javascript,Jquery,Oop,Inner Classes,我正在研究OOP以及像jQuery这样的框架是如何工作的。如果我使用更改类属性的方法创建类,它会更改所有变量调用的类: class test{ constructor(selector) { this.el = document.querySelectorAll(selector); return this; } find(selector) { this.el = thi
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中一样工作呢?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()
这个例子可能有点过于谨慎,但总体思路仍然是——如果不想更改主对象的状态,请不要修改它。如果您确实需要对新状态执行操作,但仍然保留旧状态,那么只需要两个对象就更容易了