This is the 24th day of my participation in the August Text Challenge.More challenges in August

Writing in the front

In most cases, how the function is called determines the value of this (runtime binding). This cannot be assigned during execution, and its value may vary each time the function is called. ES5 introduced the bind method to set the this value of a function, regardless of how the function is called. 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).


var person = {
  firstName: "LiMing".lastName : "Li".id       : 123.fullName : function() {
    return this.firstName + "" + this.lastName; }};Copy the code

What is this?

This is an attribute of the current execution context (global, function, or eval) that, in non-strict mode, always refers to an object, and in strict mode can be any value.

The JavaScript this keyword refers to the object to which it belongs.

It has different values depending on where it is used:

  • In the method,thisRefers to the owner object.
  • In a single case,thisGlobal object.
  • In the function,thisGlobal object.
  • In the function, in strict mode,this 是 Undefined.
  • In the event,thisRefers to the element that receives the event.
  • Methods like call() and apply() can convertthisReference to any object.

This in the method

In object methods, this refers to the “owner” of the method. In the example at the top of this page, this refers to the Person object. The Person object is the owner of the fullName method.

fullName : function() {
  return this.firstName + " " + this.lastName;
}
Copy the code

This alone

When used alone, the owner is the global object, so this refers to the global object.

In the browser Window, the global object is [Object Window] :

var x = this;
Copy the code

In strict mode, if used alone, this refers to the global object [Object Window] :

"use strict";
var x = this;
Copy the code

Function this (default)

In JavaScript functions, the owner of the function binds this by default

Therefore, in functions, this refers to the global object Window.

function myFunction() {
  return this;
}
Copy the code

Derived classes

Unlike the constructors of base classes, the constructors of derived classes do not have an initial this binding. Calling super() in the constructor generates a this binding and executes the following code, Base being the Base class:

this = new Base();
Copy the code

Note: Referring to this before calling super() throws an error.

A derived class cannot return before super() is called unless its constructor returns an object or there is no constructor at all.

class A {}
class B extends A {}
class C extends A {
  constructor() {
    return {X: 12}; }}class D extends A {
  constructor(){}}new B();
new C();
new D(); // ReferenceError

Copy the code

The bind method

ECMAScript 5 introduces function.prototype.bind (). Calling f.bind(someObject) creates a function with the same body and scope as f, but in this new function, this is permanently bound to the first argument of bind, regardless of how the function is called.

Arrow function

In the arrow function, this is consistent with this in the enclosing lexical context. In the global code, it will be set as a global object

Note: If this is passed to call, bind, or apply to call the arrow function, it will be ignored. You can still add arguments to the call though, but the first argument (thisArg) should be set to null.