Accesing the object's property form a nested function

Question

Here is my java script code.

var fiat = { 
    make: "Fiat",
    model: "500",
    year: 1957, 
    color: "Medium Blue",
    passengers: 2,
    convertible: false,
    mileage: 88000,
    fuel: 0,
    started: false,

    start: function() {
        if (this.fuel == 0) {
            console.log("The car is on empty, fill up before starting!");
        } else {
            this.started = true;
        }
    },

    stop: function() {
        this.started = false;
    },


    drive: function() {
        function update(){
            this.fuel-=-1;

        }


        if (this.started) {
            if (this.fuel > 0) {
                console.log(this.make + " " +
                      this.model + " goes zoom zoom!");
                update();
            } else {
                console.log("Uh oh, out of fuel.");
                this.stop();
            } 
        } else {
            console.log("You need to start the engine first.");
        }
    },

    addFuel: function(amount) {
        this.fuel = this.fuel + amount;
    }
};

I want to update the fuel by invoking the helper function "update()" nested inside the property function "drive". I checked in the console it seems I can't access the variables this.fuel property since it prints "NaN".

The question is How do I access the objects property from the "update()" helper nested inside the "drive" property function so that I can make changes to "this.fuel". Thanks.

You will have to create a reference to current object using `this` and use that new reference in the update. Because scope of `this` changes inside the function. So your drive function should be like this. `drive: function(){ var _self = this; function update(){_self.fuel -=1;}}...` — Pratik Gaikwad, Nov 17 '16 at 19:24

score 0 · Answer 1 · answered Nov 17 '16 at 19:34

0

use like this

drive: function() {
        var that= this;
        function update(){
            that.fuel-=-1;
        }

answered Nov 17 '16 at 19:34

Mahi

1,707
11
22

+ thanks a lot for the anwer. – Saugat Awale Nov 17 '16 at 19:44
@SaugatAwale glad to help – Mahi Nov 17 '16 at 19:46

score -1 · Answer 2 · answered Nov 17 '16 at 19:27

Yes you cannot access this here because it has lost its scope. you can make it as an IIFE and send this to it

check this snippet

var fiat = {
  make: "Fiat",
  model: "500",
  year: 1957,
  color: "Medium Blue",
  passengers: 2,
  convertible: false,
  mileage: 88000,
  fuel: 0,
  started: false,

  start: function() {
    if (this.fuel == 0) {
      console.log("The car is on empty, fill up before starting!");
    } else {
      this.started = true;
    }
  },

  stop: function() {
    this.started = false;
  },


  drive: function() {
    (function update(obj) {
      obj.fuel -= -1;

    })(this);


    if (this.started) {
      if (this.fuel > 0) {
        console.log(this.make + " " +
          this.model + " goes zoom zoom!");
        update();
      } else {
        console.log("Uh oh, out of fuel.");
        this.stop();
      }
    } else {
    
      console.log("You need to start the engine first.");
    }
    
  },

  addFuel: function(amount) {
    this.fuel = this.fuel + amount;
  }
};
fiat.drive();

Hope it helps

It's the *receiver* or *context*, not "scope". And using an IIFE doesn't solve anything, your code does try to call a function that was never declared. — Bergi, Nov 17 '16 at 19:34
ok can i not send this context through iife like the way i have done — Geeky, Nov 17 '16 at 19:35

Accesing the object's property form a nested function

2 Answers2