“This is the fourth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

In object-oriented languages this represents a reference to the current object, but in JavaScript it behaves slightly differently, changing as the execution environment changes.

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.

In most cases, this will appear in functions, and this will also be present in the global scope.

This in the global scope

It says that we can also print this directly in global scope.

Browser environment:console.log(this); // windowThe Node environment:console.log(this); / / {}
console.log(window); // An error is reported in Node, no defined
Copy the code

From this we can see that this is different in different environments.

The effect of this

This.[attr]=xx. This refers to the current test object. When this is not available, you can use the syntax of [object name]. [attr] : [object name].[attr] : [attr] : [attr] : [attr] : [attr] : [attr] : [attr] : [attr] : [attr] : [attr] That’s what this does.

// This is not used
const test = {
  prop: 42.func: function() {
    returntest.prop; }};console.log(test.func());
Copy the code
// Use this, which refers to the current test object
const test = {
  prop: 42.func: function() {
    return this.prop; }};console.log(test.func());
Copy the code

The binding rule for this

There are always four binding rules for this: default binding, implicit binding, display binding, and new binding. These four methods are described below. To give you a better understanding of the binding of this

The default binding

  • A stand-alone function call can be understood as a function that is not bound to an object to be called
function foo(){
  console.log(this);
}
// Default binding, is a separate function, no binding object
/ / points to the window
foo()
Copy the code

Implicit binding

  • Its call location is a function call from an object, for exampleobj2.bar()
  • objectObjects can bejsEngine binding tofnIn the functionthisinside
function foo(){
  console.log(this);
}

// independent function calls
// foo()

var obj={
  name:'hxh'.foo:foo
}


obj.foo() / / object obj
Copy the code

According to the binding

  • The premise condition
    • There must be a reference to the function (such as a property) inside the called object
    • Without such a reference, an error is reported that the function was not found when the call is made
    • It is through this reference that the indirect willthisBind to this object
  • If you don’t want to include a reference to this function inside the object, and you want to force a call on the object
    • JavaScriptAll functions can be usedcallandapplyMethod (this sumprototypeThe relevant)
    • The first argument to both functions requires an object that is given tothisTo prepare the
    • When this function is called, thethisBind to this incoming object
function foo(){
  console.log('Function called');
  console.log(this);
}
var obj={
  name:'obj'
}

foo() // window

foo.call(obj) // obj
foo.apply(obj) // obj
foo.apply('aaa') // aaa
Copy the code

The new binding

  • We went through anewThe keyword is called when a function (constructor) is calledthisIs the object created when the constructor is called
function Person(name,age) {
  this.name=name
  this.age=age
}
// Automatically generate new obj objects
// The generated object is assigned to this in Person
var p1 = new Person('hxh'.21);
console.log(p1.name,p1.age);
Copy the code

Arrow function

There is no this in the arrow function. If you print this in the arrow function, this determines this based on the outer scope

var foo=() = >{
  console.log(this); // window
}
Copy the code

Priority of the binding rule

Default binding < implicit binding < display binding < new binding

Display binding over implicit binding
var obj={
  name:'obj'.foo:function(){
    console.log(this); }}// Implicit binding
obj.foo()
// Call Apply binding is superior to implicit binding
obj.foo.call('abc')
Copy the code
The new binding takes precedence over the implicit binding
var obj={
  name:'obj'.foo:function (){
    console.log(this)}}// Print obj to indicate that implicit binding has high priority
// Printing foo indicates that the new binding has a high priority
// New takes precedence over implicit binding
var fn=new obj.foo() // foo
Copy the code

The new binding is not allowed to be used together with call and apply, so there is no higher priority.

The new binding has a higher priority than bind
function foo(){
  console.log(this);
}

var bar=foo.bind('aaa')

var obj=new bar() // foo {}
Copy the code

This in strict mode

In strict mode, this in functions is not window by default, but undefined

'use strict';

console.log(this);// Window

function foo(){
  console.log(this); // undefined
}

foo()
Copy the code