Javascript OOP callback "this" apply

Question

i have a problem when creating callback on my own EACH function.

i'm using OOP way to accompolished it.

basically, i create my own javascript library that mimicry JQUERY habits.

check this fiddle out on action : https://jsfiddle.net/6pk068ep/1/

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

The 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?

});

how to get those .child style color to red?

what's wrong with my code?

thanks in advance...

var i, ele; // global variable will surely be a source of errors. — Bergi
– Bergi, Commented Mar 16, 2016 at 7:48

Arun P Johny · Accepted Answer · 2016-03-16 07:46:16Z

3

When you say each() it is assumed that the callback will be called for each item in the collection, so in this case you need to call the callback in the for loop.

Also note that variables like ele and i are not global, they are suppose to be local to the function where you are using them.

"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>

answered Mar 16, 2016 at 7:46

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ching Ching Over a year ago

fabolous! thank you so much Mr. Arun P Johny! just one thing, you make var i to local variable. so, i must redefined it over, over, and over again. what's the problem if i defined it first on top of Object?

Arun P Johny Over a year ago

@ChingChing jsfiddle.net/arunpjohny/ygfqez48/1 - is suppose to print 0-14 4 times like in jsfiddle.net/arunpjohny/ygfqez48/2

Ching Ching Over a year ago

ahh! GOTCHA! i understand it now! thank you so much Mr. Arun P Johny!

Collectives™ on Stack Overflow

Javascript OOP callback "this" apply

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related