代码之家 › 专栏 › 技术社区 › Lord Grosse Jeanine

调用自对象方法时的最佳实践

this object jquery javascript

Lord Grosse Jeanine · 技术社区 · 6 年前

假设我有这个代码:

const MyObject = {
    a($els) {
        // What is the best practice here ?
        $els.each(function() {
            MyObject.b($(this));
        });
        // Or
        const self = this;
        $els.each(function() {
            self.b($(this));
        });
    },
    b($el) {
        $el.addClass('test');
    }
};

在对象中调用另一个方法的“最佳实践”是什么?将变量称为“myObject”有什么缺点吗?还是最好用 this 为什么?

3 回复 | 直到 6 年前

Eriks Klotins 6 年前

this.method(params)

this var self = this

const MyObject = {
    a(x) {
        var self = this;
        return x.map(function (a) 
        {
           // cannot use this here to access parent scope
           return self.b(a);
        })


    },
    b(y) {
      return y % 2;
    }

KooiInc 6 年前

this

const MyObject = {
    getAll: selector => Array.from(document.querySelectorAll(selector)),
    addClass:  (elements, className) => 
      elements.forEach(element => element.classList.add(className)),
};

MyObject.addClass(MyObject.getAll("[data-test]"), "test");
setTimeout(() => 
  MyObject.addClass(MyObject.getAll("[data-test2]"), "test2"), 1000);
  
// using jQuery I'd use
const MyObjectJQ = {
  setClass4Elements($els) {
    const setClass = this.setClass2Foo;
    $els.each( (i, elem) => setClass($(elem)) );
  },
  setClass2Foo($el) {
    $el.addClass('foo');
  }
};

setTimeout(() => 
  MyObjectJQ.setClass4Elements($("[data-test2]")), 2000);

// still I'd avoid  the use of [this]
const MyObjectJQNoThis = {
  setClass4Elements($els, className) {
    const setClass = $el => $el.addClass(className);
    $els.each( (i, elem) => setClass($(elem)) );
  }
};

setTimeout(() => 
  MyObjectJQNoThis.setClass4Elements($("[data-test]"), "bar"), 3000);

.test {
  color: red;
}
.test2 {
  color: green;
}
.foo {
  color: orange;
}
.bar {
  color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-test>div1</div>
<div data-test2>div2</div>
<div data-test>div3</div>
<div data-test2>div4</div>

-3

jj anderson 6 年前

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

5 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前