javascript - Can functions access variables defined in its own parent function? - Stack Overflow

admin管理员组

文章数量:1391955

Mozilla's Developer Resource shows two contradicting explanation regarding the function scope.

Here indicates that even though a "variable is defined in the same scope as the function calls", the code will throw an error because "it is not defined inside the function definitions".

Example)

function myBigFunction() {
  var myValue;

  subFunction1();
}

function subFunction1() {
  console.log(myValue);
} //this will show a reference error

However, here indicates that a "function defined inside another function can also access all variables defined in its parent function and any other variable to which the parent function has access".

Example)

function getScore() {
  var num1 = 2,
      num2 = 3;

  function add() {
    return name + ' scored ' + (num1 + num2);
  }

  return add();
} //this is ok

Mozilla's Developer Resource shows two contradicting explanation regarding the function scope.

Here indicates that even though a "variable is defined in the same scope as the function calls", the code will throw an error because "it is not defined inside the function definitions".

Example)

function myBigFunction() {
  var myValue;

  subFunction1();
}

function subFunction1() {
  console.log(myValue);
} //this will show a reference error

However, here indicates that a "function defined inside another function can also access all variables defined in its parent function and any other variable to which the parent function has access".

Example)

function getScore() {
  var num1 = 2,
      num2 = 3;

  function add() {
    return name + ' scored ' + (num1 + num2);
  }

  return add();
} //this is ok

• javascript
• function
• variables
• scope

Share Improve this question Follow asked Feb 19, 2019 at 2:25 KevvvKevvv 4,0331212 gold badges5252 silver badges105105 bronze badges 5

• Both are not contradictory but actually plementary. variable scopes goes like this function<-parent-function<---parents<---global. In first example the variable is in local scope so its not visible to other function. But in second example its inside a function which bees its parent function. So it can access parent function's scope. – binariedMe Commented Feb 19, 2019 at 2:30
• The variables are declared in the parent function for both examples though – Kevvv Commented Feb 19, 2019 at 2:41
• 2 In first example there is no parent function. parent function are those which encapsulate a function. In first example, two separate function are defined. – binariedMe Commented Feb 19, 2019 at 2:42
• 1 subFunction1(); is just called within the parent function and defined outside of parent function. Defined function signature is function subFunction1() {... – zer00ne Commented Feb 19, 2019 at 2:50
• 2 So is it fair to say that where the function's definition is declared matters? – Kevvv Commented Feb 19, 2019 at 2:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

In your first example

function myBigFunction() {
  var myValue;

  subFunction1();
}

function subFunction1() {
  console.log(myValue);
} //this will show a reference error

here myValue is included in a function myBigFunction() so it has a block scope.

Block scope means any code within that block (here function defines the block) can use that variable if function contain another function(function definition) and inner function using that variable then it will be passed in a closure to inner function. 2nd scenario exactly same what I explained here.

function getScore() {
  var num1 = 2,
      num2 = 3;

  function add() {
    return name + ' scored ' + (num1 + num2);
  }

  return add();
} //this is ok

In above example num1 and num2 are declared in function getScore(), and it has inner function add() since add function using num1 and num2 it will be passed as closure to add() function and there won't be any error while accessing those variables.

but in first example the variable is accessed out of scope and as the variable accessed outside of that function it won't be accessible and it will throw reference error.

I hope the explanation clear your understanding. to understand it thoroughly go through JavaScript scope and closure concept.

The reason why the first example fails and the second 'works' has to do with scope and closure. You can think of a function's 'curly braces' as the enclosure around its scope - or sphere of influence.

The first example fails because myBigFunction()'s variable is not accessible to subFunction1()'s scope. myBigFunction() also doesn't wrap subFunction1() which would provide a closure. Check out closures here.

However, add() is declared within the scope of the getScore() function. getScore() 'wraps' add() - providing a closure so that add() has access to variables within getScore()'s scope.

Use the this keyword to get parent variable i.e.

var bar = function () {
  this.foo = "example";//the only catch is you have to have the this key word when defining the term.
  var subfunction = function () {
    this.foo = "This an example!";
  }
}

(Hope this helps!)

本文标签： javascriptCan functions access variables defined in its own parent functionStack Overflow