JS 类与普通对象中的箭头函数有何不同

Question

Why does calling click() here prints out the value property.

class Button {
  constructor(value) {
    this.value = value;
  }

  click = () => {
    return this.value;
  }
}

let button = new Button("hi")
console.log(button.click()) //hi

And calling click here prints the value property.

function Button2(value){
  this.value = value

  this.click =  () => {
   return this.value
  }

}

let button2 = new Button2("hi")
console.log(button2.click()) //hi

However, calling click() here prints undefined. This is what I would expect to happen for both examples, since arrow functions have no this .

let button2 = {
    value:"hi",
    click: () => { return this.value }
}

console.log(button2.click()) //undefined

When printing all 3 objects in devtools, they look identical.

button, button2, and button3 when logged in devtools:

   {value: "hi", click: ƒ}
            click: () => { return this.value }
            value: "hi"
            __proto__: Object

Why does the first 2 examples print hi but the third prints undefined , even though the objects look the same when printed?

Answer 1

One of the primary concerns of arrow functions is that they inherit the this keyword from the lexical scope they are defined in. Inside your class, this refers to the class instance as you would expect, but in your object declaration, this will refer to the global object window .

@trincot makes a good point that the primary distinction is that one of these is callable and one is not - basically, the class is a function (and you can actually verify this with typeof TestClass === 'function' ) which will form the lexical scope of the arrow method definition, but the object's lexical scope is just the global scope, so this === globalThis === window .

You can read the Mozilla docs for more information, and this is basically why it heavily recommends against arrow functions for method definitions. (Especially worth noting is that .bind and .apply do not work for arrow functions either, and the this parameter will be ignored.)

 class TestClass { // test defined inside TestClass instance scope // returns false test = () => console.log(this === window) } TestObject = { // object defined in global lexical scope // returns true test: () => console.log(this === globalThis && this === window) }; new TestClass().test(); TestObject.test();

Answer 2

The reason is that in the first code block, click is a public field . The documentation on MDN specifies:

When initializing fields, this refers to the class constructor.

By consequence, if that initialisation is an arrow function, then the lexical this at the time of execution of that function will be the same this . And it is a given that the this value of the class constructor is the instance .

This principle is further clarified when we represent that first code block without using class syntax:

function Button(value) {
    this.value = value;
    this.click = () => {
        return this.value;
    }
}

All this in this code are the same this (a consequence of "lexical this" ).

The second code block has a plain old object property click . An object does not define this for the arrow functions that may be defined for its properties. Only functions ( function , possibly constructors) define this by the way they are called. Your object is not called (it is not callable), and the way you call an arrow function has no influence on this either. So the this that occurs within the arrow function here, is determined by the larger context, which could be a wrapping function (not represented in your example), and how it is called. Or, by absence of such a context, this is the global object (or in strict mode: undefined ).