Parameters also have scope? Come see this question, do you really understand?

foreword

When a function passes parameters, the parameters also have scope. Have you encountered it? When I heard it, I thought it was incredible, because basically I would not encounter similar code in daily development, and it may only be encountered in some interview questions. The test is about the overall understanding of the function. Today let's talk in detail about parameter scope in functions.

example

Look at the code below and think about its output

var x = 0
var k = 99
function bar(s = () => { console.log(this); }) {
  var j = 'zj'
  function foo(x,
    y = function () { x = 3; k = 100; j = 'yy'; console.log(x); },
    a = () => { console.log(this); }
  ) {
    console.log(x)
    var x = 2
    var k = 88
    console.log(j);
    y()
    a()
    console.log(x)
    console.log(k)
  }

  foo.call({ name: 'ving' }, 1)
  console.log(j);
  s()
}
bar.call({ name: 'king' })
console.log(x)
console.log(k)

复制代码

After reading it, what is your answer?

// 1
// zj
// 3
// {name:ving}
// 2
// 88
// yy 
// {name:king}
// 0
// 100
复制代码

The handsome guy who answered correctly can put arrogance in the comments

Anyway, that's what I saw

Parse

First let's understand what is parameter scope?
How is parameter scope formed, does every function have parameter scope?
No, only when a function's parameter has a default value, the function forms a new scope, which is used to hold the parameter's value . That is, the function now has two scopes, a parameter scope and a function body scope.
So what is the relationship between these two scopes?
It's okay, just kidding. Precisely it does matter a bit. These two scopes are independent of each other (no containment relationship!!!), and the connection between them can only be communicated through parameters. That is to say, when the parameter scope changes the value of the parameter, it will affect the change of the value in the function body scope. This is a bit abstract, and we will understand it when we analyze it through the code. Another thing to note is that the upper scope of the parameter scope and the upper scope of the function body scope are the same.

var x = 0
var k = 99
function bar(s = () => { console.log(this); // 八 }) {
  var j = 'zj'
  function foo(x,
    y = function () { x = 3; k = 100; j = 'yy'; console.log(x); // 三 },
    a = () => { console.log(this);// 四 }
  ) {
    console.log(x) // 一
    var x = 2
    var k = 88
    console.log(j); // 二
    y()
    a()
    console.log(x) // 五
    console.log(k) // 六
  }

  foo.call({ name: 'ving' }, 1)
  console.log(j); // 七
  s()
}
bar.call({ name: 'king' })
console.log(x) // 九
console.log(k) // 十

复制代码

As above, I marked the code execution order, let's analyze it step by step.
One: After the function pre-parse variable is promoted, foo passes the value of 1 to change x = 1
Two: The parameter scope is independent from the function body scope, so the access is j = 'zj' in the upper scope bar
Third: The parameter scope has x If not, it will look for bar--> window instead of the scope of the foo function body! So x = 3
four: a is an arrow function, and the arrow function points to the upper scope. (The upper scope of the parameter scope and the upper scope of the function body scope are the same) So this = {name:ving} See the following code and diagram analysis

function bar(s = () => {  console.log(this); // { name: 'king' } }) {
  const jj = () => {
    console.log(this); // { name: 'king' }
  }
  jj()
  s()
}
bar.call({ name: 'king' })
复制代码

draw

Five: The function body scope has a value x = 2
Six: Same as above k = 88
Seven: The function body scope has a value but when the process three is executed, j is reassigned so j = 'yy'
Eight: Same as the fourth example, this = { name:king}
Nine: x = 0 The first parameter x is changed when the third process is executed, not the global x, so the global does not change
Ten: k = 100 When the third process is executed, the global k is changed because the parameter scope does not have k and There is no upper scope, only k in the top-level window can be found

end

It's over, I get it!

The key points of this type of topic under a simple summary:
1. The parameter scope and the function body scope are independent of each other but their upper-level scope is the same.
2. this points to: this in the arrow function in the parameter scope points to its previous scope, which is its own this

Remember these two points, in the future, similar questions will change the soup instead of the medicine.
Give it a like! Yanzu