Javascript OOP 回调 “this” 适用

Javascript OOP callback "this" apply

本文关键字：适用 this OOP 回调 Javascript      更新时间：2023-09-26

我在自己的EACH函数上创建callback时遇到问题。

我正在使用 OOP 方法来补充它。

基本上，我创建了自己的JavaScript库来模仿JQUERY习惯。

看看这个小提琴在行动：https://jsfiddle.net/6pk068ep/1/

<div class="parent">
    <p class="child">child</p>
</div>
<div class="parent">
    <p class="child">child</p>
</div>

JavaScript： 

"use strict";
(function(window) {
    var i, $, $Obj, ele; // global variable
    $ = function(el, length) {
        return new $Obj(el, length); // create new object
    };
    $Obj = function(el, length) {
      ele = document.querySelectorAll(el); // get selector element 
        this.length = ele.length; // count the length of ele
        for (i = 0; i < this.length; i++) {
            this[i] = ele[i]; // loop it
        }
    };
    $Obj.prototype = { // object prototype
       each : function(fn) { // create method each just like jquery
       var arr = []; // create array to store value
       for (i = 0; i < this.length; i++) {          
         arr.push(this[i]); // push it to arr variable
         }
       fn.apply(this, arr); // IS THIS THE CORRECT WAY TO APPLY IT? 
       return this; // return this, so, it's chainable for other method
      }
    };
window.$ = $; // make dollar sign global object
})(window);
$(".child").each(function() {
    console.log(this);
    this.style.color = "red"; // not working, what's wrong with my code? is it because my "apply" wrong?
});

如何将那些.child样式的颜色变成红色？

我的代码有什么问题？

提前感谢...

当你说each()时，假设将为集合中的每个项目调用回调，因此在这种情况下，您需要在 for 循环中调用回调。

另请注意，像 ele 和 i 这样的变量不是全局的，它们应该是您使用它们的函数的局部变量。

"use strict";
(function(window) {
  var $, $Obj; // global variable
  $ = function(el, length) {
    return new $Obj(el, length); // create new object
  };
  $Obj = function(el, length) {
    var ele, i;
    ele = document.querySelectorAll(el); // get selector element 
    this.length = ele.length; // count the length of ele
    for (i = 0; i < this.length; i++) {
      this[i] = ele[i]; // loop it
    }
  };
  $Obj.prototype = { // object prototype
    each: function(fn) { // create method each just like jquery
      var i;
      for (i = 0; i < this.length; i++) {
        fn.call(this[i], this[i], i);
      }
      return this; // return this, so, it's chainable for other method
    }
  };
  window.$ = $; // make dollar sign global object
})(window);
$(".child").each(function() {
  console.log(this);
  this.style.color = "red"; // not working, what's wrong with my code? is it because my "apply" wrong?
});
<div class="parent">
  <p class="child">child</p>
</div>
<div class="parent">
  <p class="child">child</p>
</div>

相关文章：