Javascript-具有new关键字的函数构造函数

Question

When the below foo function is called with new , it turns into a constructor function returning the object which gets assigned to baz .

function foo() {
  this.baz = "baz";
  console.log(`${this.bar} ${baz}`); 
}

var bar = "bar";
var baz = new foo(); // prints undefined undefined

The question is why baz inside the console statement gets undefined value - would it be right to say that while baz got hoisted, when new foo() is called, till the function returns the baz is not assigned the returned object ?

console.log(baz) in a later line prints the returned object correctly.

Answer 1

In the function there is no bar in the this . You need to remove the this part of the this.bar . For baz you must use the this.baz , because it is attached to the object instance.

 function foo() { this.baz = "baz"; console.log(`${bar} ${this.baz}`); } var bar = "bar"; var baz = new foo(); 

This code means

this.baz = "baz";
console.log(`${this.bar} ${baz}`); 

that when you create an object it will have only baz in it. In the body if you want to access the object's property you need to access via this . ${baz} is undefined because there is no baz variable(it will not look in the this ).So if you need to access the baz in the function you need to use this.baz .

what about ${this.bar} , there is no bar property in the this , only baz .

Answer 2

The variable baz doesn't exist in the moment of executing the constructor. baz is created after the constructor is executed.

It would work similarly if you used an IIFE:

var test = (function() {
  console.log(test) // undefined
  return 'test'
}())
console.log(test) // 'test'

Answer 3

MDN link will help you to understand what this means.

Used inside a function, this refers to the current object. What that actually means is specified by the way in which you called that function. If you called it using dot notation or bracket notation on an object, that object becomes this. If dot notation wasn't used for the call, this refers to the global object.

So you are calling this.bar inside of function foo() . You will get undefined because function foo() doesn't have bar property.

Also, when you call just bar inside of function foo () , It will starts to find bar property.
First inside of function foo () and search it if global has bar property.