函数可以访问在其自己的父函数中定义的变量吗？

Question

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

Answer 1

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.

Answer 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.

Answer 3

Use the this keyword to get parent variable ie

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!)