Why does "this" work differently when function is called with and without "new"

Question

I Want Know Why If I Don't Call The Function Bike Before The Obj The Output Of Console.log of maker is Bajaj !

function bike() {
  var name = "Ninja";
  this.maker = "Kawasaki";
  console.log(this.name + " " + maker);  // undefined Bajaj
}

var name = "Pulsar";
var maker = "Bajaj";
obj = new bike();
console.log(obj.maker);                  // "Kawasaki"

But if I Call It The Output of maker inside The Console.log is Kawasaki

function bike() {
  var name = "Ninja";
  this.maker = "Kawasaki";
  console.log(this.name + " " + maker);  // undefined Kawasaki
}

var name = "Pulsar";
var maker = "Bajaj";
bike();
obj = new bike();
console.log(obj.maker);                  // "Kawasaki"

Barmar · Accepted Answer · 2020-02-22T01:03:28.077

1

When you don't call the function with new, this is the global window object, so this.maker is equivalent to window.maker. Global variables are properties of the window object, so this.maker = 'Kawasaki is reassigning the global variable maker.

For lots more information about this, see How does the "this" keyword work?

edited Feb 22 '20 at 01:03

answered Feb 22 '20 at 00:50

Barmar

596,455
48
393
495

If the `'use strict'` directive is declared, then `this` is `undefined`. – Jake Holzinger Feb 22 '20 at 00:55
That's true but irrelevant to the question, since it's not getting errors. – Barmar Feb 22 '20 at 00:56
Perhaps, but other's may want to know "How To Deal With The This Keyword" – Jake Holzinger Feb 22 '20 at 01:00
I'm not sure why you are being so combative. I only added some clarity as a comment. If my input bothers you, then flag it for a moderator. – Jake Holzinger Feb 22 '20 at 01:02
I would go for my solution here. There are a lot of unanswered questions about the original provided example, but there are some reasonable expectations about what @Barmar was intending to accomplish in the first place. Also looks like too much unconstructive dialog in comments. That is frustrating. Glad you found a solution that works for you! – Miaplacidus Feb 22 '20 at 01:06
Thank Uu Guys I Understood ! – A2ub Feb 22 '20 at 02:28

Miaplacidus · Answer 2 · 2020-02-22T00:57:23.977

The context for this within a function defined in the global namespace is window.

You may want to create a class Bike and assign properties to it for later access.

let Bike = class {
  constructor(settings) {
    this.name = settings.name
    this.maker = settings.maker
    this.price = settings.price
  }
  get tax() { return 0.01 }
  changePrice(newPrice) {
    this.price = this.price + (this.tax * this.price)
    return this
  },
}

then...

let bike = new Bike({
  name: 'Some Name', 
  maker: 'Some Manufacturer',
  price: 1344, 
})

then later...

bike.changePrice(1500)

There are probably some more advanced concepts that you could apply when managing a data object like this, but that is the basics of how a class works.

Otherwise, you need to create functions that return an object where the properties are applied, then have functions on the object that can use this to refer to itself.

function Bike(settings) {
  return {
    name: settings.name,
    maker: settings.maker,
    price: settings.price,
    tax: 0.01,
    changePrice: function(newPrice) {
      this.price = this.price + (this.tax * this.price)
      return this
    },
  }
}

Same instantiation.

let bike = new Bike({
  name: 'Some Name', 
  maker: 'Some Manufacturer',
  price: 1344, 
})

Same API usage.

bike.changePrice(1500)

Why does "this" work differently when function is called with and without "new"

2 Answers2