Vue, Babel, weird this when debugging under the arrow function

Time:2022-1-7

Test start

Scenario:

  1. webpack: mode=development
  2. babel: babel/preset-env
  3. Arrow function
  4. In fact, it has nothing to do with Vue, but I encountered this disgusting problem in Vue

Question:

  1. Debugger process, real-time monitoring of this, and console Log (this) is inconsistent.

Simplified code:

const test1 = () => {
  console.log('test1 called this------>', this);
};
const test2 = () => {
  console.log('test2 called this------>', this);
  test1();
};

test2();

Operation results:
Vue, Babel, weird this when debugging under the arrow function
Two window objects are output. It seems that there is no problem

However, at this time, break the two consoles, run them again, and press F10 to advance to the execution of test1 ()
Vue, Babel, weird this when debugging under the arrow function
Tragedy, watched aundefinedCome out.

Again, delete this in the console this time
Vue, Babel, weird this when debugging under the arrow function
Sure enough, there’s still one in the surveillanceundefined, enter this in the console, and then you can enter this in the consoleundefinedYes
Vue, Babel, weird this when debugging under the arrow function

End of test

Don’t you use this, it’s undefined; And using him, there is a point?
In fact, the JS running here is actually packaged by webpack and uses Babel compatibility. Let’s modify the code as follows:

class TClass {
  a = 1;
  b = 2;
  c = 3;
  constructor() {}
  test1() {
    console.log('test1 called this.a----->', this.a);
    this.test2().then(() => {
      debugger;
      console.log('test1 called this.c----->', this.c);
    });
  }
  test2() {
    return new Promise((resolve, reject) => {
      console.log('test2 called this.b----->', this.b);
      resolve();
    });
  }
}

const tObject = new TClass();
tObject.test1();

Run it and monitor this at the debugger
Vue, Babel, weird this when debugging under the arrow function
This points to window?, Look at the console output
Vue, Babel, weird this when debugging under the arrow function
How did the properties of my class run to window??? No, just print it on the console
Vue, Babel, weird this when debugging under the arrow function
Speechless…. Since the running code is the code after Babel, it’s better to translate it on Babel’s official website
Vue, Babel, weird this when debugging under the arrow function

If I add one manually_thismonitor
Vue, Babel, weird this when debugging under the arrow function
I caught you
Vue, Babel, weird this when debugging under the arrow function

In fact, the processed JS is running, which makes debugging difficult. Fortunately, a solution has been found:
Use Babel plugin transform es2015 arrow functions dependency

npm i babel-plugin-transform-es2015-arrow-functions -D

After successful installation, it will be displayed in webpack.com config. JS or Babel config. Add this plug-in to JSON

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [['transform-es2015-arrow-functions', { spec: true }]],
          },
        },
      },
    ],
  },

Let me Kangkang. What’s the change this time
Vue, Babel, weird this when debugging under the arrow function
Now the monitor, output, console, and mouse pointing to this can be identified correctly.

The problem was solved, but it was not completely solved.

Here is an article explaining that V8 optimization can also lead to this situation, but this is another situation
Why does Chrome debugger think closed local variable is undefined?
Baidu two hours is not as good as Google two minutes. (at first, I thought my problem was here, but I found that I saw the wrong direction)

epilogue

JS awesome.

Vue, Babel, weird this when debugging under the arrow function

Recommended Today

Proper memory alignment in go language

problem type Part1 struct { a bool b int32 c int8 d int64 e byte } Before we start, I want you to calculatePart1What is the total occupancy size? func main() { fmt.Printf(“bool size: %d\n”, unsafe.Sizeof(bool(true))) fmt.Printf(“int32 size: %d\n”, unsafe.Sizeof(int32(0))) fmt.Printf(“int8 size: %d\n”, unsafe.Sizeof(int8(0))) fmt.Printf(“int64 size: %d\n”, unsafe.Sizeof(int64(0))) fmt.Printf(“byte size: %d\n”, unsafe.Sizeof(byte(0))) fmt.Printf(“string size: %d\n”, […]