preface

You wish the world, I wish you no bugs. Hello everyone! I’m Lin Dull!

This article is very short… But definitely not a piece of hydrology…

Mainly in the comment area to see, feel that we usually will ignore a small knowledge point and written examination is also likely to encounter, so alone as an article to write, but also please spend 2 minutes to see it, in case really met 😁.

(Title source: Digging friend Lazzw, thank you for your proposal)

To the chase

The title goes like this:

var obj = {

  age: 18.

  foo: function (func) {

    func()

    arguments[0] ()

  }

}

var age = 10

function temp () {

  console.log(this.age)

}

obj.foo(temp)

Copy the code

No mystery, here’s the answer:

10

undefined

Copy the code

Before we only care about function has been the most commonly used of this hidden parameter, and this problem is actually tested the arguments to the function of hidden another parameter.

Arguments.arguments.arguments

The arguments argument is a collection of all arguments passed to a function (array-like structure), as in the following two examples:

function test1 () {

  console.log(arguments)

}



function test2 (a) {

  console.log(a)

  console.log(arguments)

}



test1(1.2)

test2(1.2)

Copy the code

The execution result is as follows:

[1, 2]

1

[1, 2]

Copy the code

As you can see, arguments will get all the arguments you pass when calling a function, whether or not you have parameters in your function.

(Arguments only exist in normal functions, not in window global and arrow functions)

And we know that is passed to the function parameters can also be a function, so as long as it’s parameters, the arguments can be captured, even if you can’t escape is a function, like this:

function foo () {

  arguments[0] ()

}

function temp () {

  console.log(this)

}

foo(temp) / / the Arguments [ƒ temp ()]

Copy the code

As above, the temp function is passed to foo(), and calls to it with arguments[0]() are executable.

If you pass temp as an argument and call it, implicit binding loss occurs, so that this refers to the window:

function foo (fn) {

  fn()

}

function temp () {

  console.log(this)

}

foo(temp) // Window

Copy the code

Arguments [0]()

(I am very sorry for the wrong understanding of arguments. The following is the correct content. Thank you again Will__ for correcting my mistake.)

If the method you are about to call is in an array (class array), then this in the calling function is the array to call.

Here, for example:

var test = [function () { return this }]

console.log(test[0]() === test) // true

Copy the code

As you can see, the first entry of the array is a function and returns this. It is called test[0](), where this and test are equal.

This refers to whoever last called the method (in cases where there is no explicit binding and the function is an arrow function).

So back to the original problem:

var obj = { 

  age: 18.

  foo: function (func) { 

    func()

    arguments[0] ()

  }

} 

var age = 10 

function temp () {

  console.log(this.age)

}

obj.foo(temp)

Copy the code

What is the meaning of the passage?

  • In the use ofobj.foo(temp)When willtempThe function is passed as an argument tofooMiddle, here we knowfuncImplicit binding loss occurred, resulting in the first calltempFunction (that is, executefunc()This code),tempWithin thethisIs pointing towindowSo it prints out10.
  • And what goes intempWill beargumentsCollected, so it can be usedarguments[0]()It’s called in this form. whileargumentsIt’s an array of classes, and as I mentioned, arrays or arrays of classes are called with subscripts just like objects call properties, so in this casetempWithin thethisisargumentsAnd inargumentsInside there is noageOf this property, so it prints outundefined.

To test this idea 💡, we can change the title:

var obj = { 

  age: 18.

  foo: function (func) { 

    func()

    arguments.age = 66 // Add code 1

    arguments[0] ()

  }

} 

var age = 10 

function temp () {

  console.log(this) // Add code 2

  console.log(this.age)

}

obj.foo(temp)

Copy the code

I added two lines of code to the topic, one to add an age property to arguments, and one to print this from temp.

Now for the answer:

Window

10

The Arguments [ƒ temp (),age: 66]

66

Copy the code

The second time we call temp, this points to arguments, and we insert an age into arguments, which will print successfully.


Additional questions

OK👌, Lin Dull’s favorite thing is…

Answer time! To start!

"Buy one get one free"

Yeah, it’s an interesting question. Don’t you want to change it and make it harder?

[Chuckles ~]

On the topic!

var obj = {

  age: 10.

  foo: function (fn) {

    fn.call(this) ()

    arguments[0() ()

    arguments[0].call(this) ()

    arguments[0]().call(this)

  }

}

var age = 20

function temp () {

  return function () {

    console.log(this.age)

  }

}

obj.foo(temp)

Copy the code

I returned an anonymous function in temp and called it differently from the arguments that foo() received.

What is the meaning of the passage?

  • fn.call(this)()Is the simplest, read dullthisAs those of you who read that article know,fn.call(this)()use.call(this)Change is thetempIn the first level functionthisBut the anonymous function is still calledwindowSo it prints out20. (similar to thethisThe title of the passage4.9)
  • arguments[0]()()We know from the topic at 👆 abovearguments[0]()Student: Middle, which is equal totempThe first layer of the function points to thetaargumentsObject while callingtempThe anonymous function that was returned is stillwindow, likefn.call(this)()Same, so it’s still going to print out20. Do this type of problem by thinking of one function returning another function, if it doesn’t workcall/applyWith an explicit binding, it’s calledwindow)
  • arguments[0].call(this)()As with the second, it uses.call(this)Change is thetempThe first layer of the functionthisPointing to, and calling an anonymous function is stillwindowSo print it out20.
  • arguments[0]().call(this), used here.call(this)What’s changed is what’s inside the anonymous functionthisIf it does, bind it tofooWithin the functionthisAnd we know that at this pointfooWithin the functionthisIs pointing toobj, because the callfooisobjSo it prints out10.

(The link to this article mentioned by 👆 above is: “[suggested 👍] 40 more questions about this interview continue (1.2W words by hand)”)

After the language

Knowledge is priceless, support original.

Reference article:

  • Understanding function Calls-arguments

You wish the world, I wish you no bugs. So much for this article.

Seems there is no problem ~

Are the knowledge point that has seen before 😁.

If you feel that you can’t do it at first glance, don’t feel that you can’t do it 🙅♂️, to be honest, even if I don’t look back, I will forget 😂, so I don’t often make interesting questions to help us consolidate, 😁, if you can do it, it’s great.

(This time to write an article do not report me with my boss ah, I this is to improve the whole Chinese front-end engineer JS level)

"Bah! Shame on you!"

The guy who likes Lin Dull also hopes to follow Lin’s public account LinDaiDai or scan the following QR code 👇👇👇.


I will update some front-end knowledge content and my original article 🎉 from time to time

Your encouragement is the main motivation for my continuous creation 😊.

Related recommendations:

The most detailed BPMN.js textbook in the whole Web

If you don’t understand Babel, I’ll send you a mask.

Your Gold-digging article could have been so cool (Blog Beautification Tool wave away)

“[Suggested stars] To come to 45 Promise interview questions a cool end (1.1W words carefully arranged)”

This article is formatted using MDNICE