CODEWITHSUNDEEP
javascriptjqueryoop
Ching Ching
Ching Ching

Reputation: 1049

Javascript OOP callback "this" apply

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

Upvotes: 4

Views: 66

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388446

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>

Upvotes: 3

Related Questions