How to execute function and reference variable in the object

Question

I am trying to better understand the object literal and I'm stuck on this specific part.

I have a fully working example here - https://jsfiddle.net/breezy/dqjpkus4/

I am trying to use the settings throughout the object but the console is saying my items are undefined. But, I wanted to convert this into an object. You can see my work in progress here and where the errors are happening - http://codepen.io/BryanBarrera/pen/OXZvgR

My question is how can I access this portion:

boxes: $('.boxes'),
container: $('.container'),

From inside my functions?

showMore: function() {

},

showLess: function() {

},

Another example of what I am trying to do - Here is the fiddle for the below where I am stuck. https://jsfiddle.net/breezy/86Lryrep/

The init portion works but when I try to execute the function on click, it gives me an error.

"use strict";

var object = {
  container: $('.container'),
  item: $('div'),
  textToAlert: 'Working',

  init: function() {


    console.log(this.textToAlert);
  },

  firstFunction: function() {
    // here i should be able to use container and item
    // but when i use my click event it doesn't work. 
    console.log(this.item.length);
  },

  secondFunction: function() {
    // here i should be able to use container and item
  }
}



object.init();

$('button').on('click', object.firstFunction);

`this` inside the `firstFunction` will refer to the element that is clicked. You can cache `this` into _that_ or _self_ OR use `.bind(object)`. — Tushar, Aug 25 '16 at 14:12
how can i access`item: $('div') ` instead of the button? This part i am confused about. @Tushar — breezy, Aug 25 '16 at 14:13

Rayon · Accepted Answer · 2016-08-25T14:21:47.127

Value of this is determined by how function is called.

In your example, this refers to the DOMElement because in handler-function of event, this is Element over which event is invoked!

Use Function#bind,

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

var object = {
  container: $('.container'),
  item: $('div'),
  textToAlert: 'Working',
  init: function() {
    console.log(this.textToAlert);
  },
  firstFunction: function() {
    console.log(this.item.length);
  },
  secondFunction: function() {}
}

object.init();
$('button').on('click', object.firstFunction.bind(object));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me!</button>
<div class="container">
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
</div>

Thanks a lot @raymon - this helped me. – breezy Aug 25 '16 at 16:19 — breezy, Aug 25 '16 at 16:19

How to execute function and reference variable in the object

1 Answers1