The beginning of an event

I have a rest today. At noon, I watch Douyin in bed. My wechat rings.

A friend asked me why he used the arrow function in watch handler. This points to undefined

Excuse me, this is not a word ？？？？

“This in the arrow function refers to this in the scope above it.”

Then he followed up with a series of questions:

  • “What’s the next level?”
  • “Watch in the source code is an apply or call change to the VM?”
  • “Why is everyone saying that the” this “in the arrow is the upper layer, not quite the same as the document?”
  • “Shouldn’t even the next floor be Window??”
  • “What are you doing? Still up?”
  • “Three rows at night are endless. Yesterday I added a girl with a really nice voice…”
  • “Let me borrow your VPN account. I’ll study at station P.”

Jiong, you big grandpa, I rest ………………

I was ready to pretend to be dead when I saw the serial call, but when I saw the bold sentence, I immediately decided that this friend would hold on for the rest of the day.

It goes the

First, we need to understand that the arrow function “this” points to.

Many of you have heard the phrase “this in the arrow function refers to the scope above it, which is father”. It sounds funny, but I think it’s very easy to understand. However, I do worry about this “it father”, who is this your father?

Later, I looked up MDN, and the document read as follows:

ES2015 introduced arrow functions that do not provide their own this binding (the value of this will remain the value of the closed lexical context).

The explanation here, to be honest, does not make much sense to a person of my basic background. Closure, morphology, context? For wool you are a man, combination together I do not know ？？？？？

Later, with the increase of working experience, I read some articles of other big wigs and added my own understanding, which can be summarized as follows:

This in the arrow function refers to the object in which the function was defined, not the object in which it was used.

So what are the criteria for scope here?

There are two types of scope in JavaScript:

  • Local scope
  • Global scope

JavaScript has function scope: each function creates a new scope. The scope determines the accessibility (visibility) of these variables. Variables defined inside a function are not accessible (invisible) from outside the function

So in other words, the arrow function this points to. Depends on whether the arrow function is defined in a global scope or within a function.

  watch: {
    searchText: {
    // The arrow function is a normal function,
    // When it is defined, its position is in the global scope, not in a function
      handler: val= >{........................... },immediate: true}}Copy the code

In this case, the value of handler is a normal arrow function declaration.

So, shouldn’t this inside of it be window? Because when the function is declared, it is in the global scope.

Why is it undefined?

The reason is that when our browser executes code, it executes code that has been transformed by Babel. After Babel transforms the code, it defaults to strict mode.

So the new problem is, strictly mode, this in the global scope function refers to the problem, right?

Several directions to this in strict mode:

  1. This in the global scope

In strict mode, this refers to the window object in the global scope

  1. This in a function in global scope

In strict mode, this in such functions is equal to undefined

  1. This in the function (method) of the object

In strict mode, the this in an object’s function refers to the instance of the object calling the function

  1. Constructor this

In strict mode, this in the constructor refers to the object instance created by the constructor.

  1. This in the event handler

In strict mode, in event handlers, this points to the target object that triggered the event

  1. Inline this in the event handler

In strict mode, there are two cases in inline event handlers:

<button onclick="alert((function(){'use strict'; return this})());">Inline event processing 1</button>
<! -- Warning window character is undefined -->
<button onclick="'use strict'; alert(this.tagName.toLowerCase());">Inline event handling 2</button>
<! -- Warning window character is button -->
Copy the code

Therefore, the arrow function of handler in watch is a function under global scope, and the this in this function points to undefine in strict mode.

The end of the story

HXD, it’s almost 10:00, and I’m in third row with a girl

Destroy it, I’m tired…