Today I am very boring to sort out JavaScript this point to the problem, I hope to help beginners, big men automatically skip

JEE: This pointer, also known as a “context object,” points to the code’s execution environment object

Here are a few common scenarios

A function call

When this appears in a function in the global environment, this refers to the host environment (window in the browser).

Function sayName() {this.name = 'this.name '; console.log(this.name); } sayName(); / / child fallCopy the code

Call the function in the Window environment. This refers to the window object

Var name = 'child' function sayName() {console.log(this.name); var name = 'child' function sayName() {console.log(this.name); } sayName(); / / child fallCopy the code

⚠️ Note the distinction between the following

Function sayName() {var name = ' '; console.log(this.name); } sayName(); The ReferenceError resource does not have an error (because the name attribute does not exist in the window object)Copy the code

Object methods

When this appears in an object method, this refers to that object

var name = 'window'; Var obj = {name: 'sub ', sayName: function() {console.log(this.name)}}; Obj. SayName () / / child fallCopy the code

⚠️ Note the distinction between the following

var name = 'window'; Var obj = {name: 'sub ', sayName: function() {console.log(this.name); }}; var ss = obj.sayName; ss(); //windowCopy the code

Object methods are called as functions in the window environment, where this refers to the window

The constructor

When this appears in the constructor, this points to the newly created object instance

Function Person() {this.name = 'constructor'} // es6 class Person {constructor() {this.name = 'constructor'}} var Person = new Person(); Console. The log (person name) / / child fallCopy the code

Call, apply, bind

When this occurs in the context of call, apply, bind, etc., it refers to the first object argument passed in; otherwise, the default value is window

Var name = 'window' var person = {name: 'child'}; function sayName() { console.log(arguments) //{ '0': 1, '1': 2, '2': 3} console.log(this.name)} sayname.apply (person) Sayname. call(person) // const say = sayname. bind(person, 1, 2, 3) sayname.apply () //window sayname.apply () //windowCopy the code

Arrow function

When this appears in an arrow function, this points to the execution environment of the outer function

Var name = 'this is window' var person = {name: 'sub ', sayName: () => { console.log(this.name) }, hello() { const bibao = () => { console.log(this.name); } bibao()}} person.sayname () //this is window person.hello() // subCopy the code

Incidentally, there are a few features of the arrow function:

  1. No this pointer;
  2. Without the arguments;
  3. Cannot be used as a constructor;
  4. There can be no yield in a function

Special scenario

In addition to the several this Pointers listed above, there are special cases where this always points to the window

Anonymous function self-tuning
Var name = 'c '; Var person ={name: 'person ', showName: function(){alert(this.name); }, waitShowName : function(){ ! function(__callback){ alert(this.name); } (); }}; Person.showname ()// person child person.waitshowName ()// person childCopy the code
Scheduled task (setTimeout, setInterval)
Var name = 'c '; Var person ={name: 'person ', showName: function(){alert(this.name); }, waitShowName : function(){ setTimeout(function(){ this.showName(); }, 1000); }}; Person. WaitShowName (); / / child fallCopy the code

⚠️ Note that when a scheduled task passes an arrow function, this does not point to window

var name = 'this is window' var person = { name: SayName () {setTimeout(() => {console.log(this.name)}, 0)}} person.sayName() The arrow function's this pointer is the external function's this pointer (sayName) //sayName is called on the Person object, so this.name=" child"Copy the code

The this keyword refers to whoever calls this function or method