object - How does Javascript execute code when duplicate named functions are declared? - Stack Overflow

admin管理员组

文章数量:1334942

I'm trying to understand why declaring a duplicate function after a statement has executed affects it.

It's as if JavaScript is reading ALL functions first, regardless of placement/control flow, and then executing console.log expressions. Example:

function Question(x, y) {
   this.getAnswer = function() {
  return 42;
  };
};

var tony = new Question('Stack','Overflow');
console.log(tony.getAnswer());   // 42, as expected.

// If the following 2 lines are unmented, I get an error:
// function Question(x, y) { 
// };

The error is:

Uncaught TypeError: tony.getAnswer is not a function

But how does JavaScript know it's not a function yet when it's running the console.log statement, since the Person class doesn't get overwritten until the line after the console.log?

I'm trying to understand why declaring a duplicate function after a statement has executed affects it.

It's as if JavaScript is reading ALL functions first, regardless of placement/control flow, and then executing console.log expressions. Example:

function Question(x, y) {
   this.getAnswer = function() {
  return 42;
  };
};

var tony = new Question('Stack','Overflow');
console.log(tony.getAnswer());   // 42, as expected.

// If the following 2 lines are unmented, I get an error:
// function Question(x, y) { 
// };

The error is:

Uncaught TypeError: tony.getAnswer is not a function

But how does JavaScript know it's not a function yet when it's running the console.log statement, since the Person class doesn't get overwritten until the line after the console.log?

• javascript
• object

Share Improve this question Follow edited Jul 30, 2015 at 2:35 Bond 16.3k66 gold badges3232 silver badges5555 bronze badges asked Jul 30, 2015 at 2:32 Tony DiNittoTony DiNitto 1,23911 gold badge1616 silver badges2929 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

In Javascript, if you define two functions with the same name, then the last one parsed is the one that will be active after parsing. The first one will be replaced by the second one and there will be no way to reach the first one.

Also, keep in mind that all function() {} definitions within a scope are hoisted to the top of the scope and are processed before any code in that scope executes so in your example, if you unment the second definition, it will be the operative definition for the entire scope and thus your var tony = new Question('Stack','Overflow'); statement will use the 2nd definition which is why it won't have a .getAnswer() method.

So, code like this:

function Question(x, y) {
   this.getAnswer = function() {
  return 42;
  };
};

var tony = new Question('Stack','Overflow');
console.log(tony.getAnswer());

// If the following 2 lines are unmented, I get an error:
function Question(x, y) { 
};

Works like this because of hoisting:

function Question(x, y) {
   this.getAnswer = function() {
  return 42;
  };
};

// If the following 2 lines are unmented, I get an error:
function Question(x, y) { 
};

var tony = new Question('Stack','Overflow');
console.log(tony.getAnswer());    // error

It's called Hoisting, all declarative functions and variable declarations are moved up, though undefined, at pilation.

http://code.tutsplus./tutorials/javascript-hoisting-explained--net-15092

http://bonsaiden.github.io/JavaScript-Garden/#function.scopes

declarative function are functions like

function name(){...}

本文标签： objectHow does Javascript execute code when duplicate named functions are declaredStack Overflow