ES5 and ES6 for this

preface

Fix this in javascript (ES3, ES5, ES6 included).

ECMAScript 3/5

This version of this makes it clear that there are only five cases:

global

console.log(this); // This equals ECMAScript to the Global object in the browser environment, i.e. window
Copy the code

Within the function

function foo() {
  console.log(this); // this 还是 window
}
Copy the code

The method call

var obj = {
  name: 'alex'.getName: function(){
    console.log(this.name);
  }
}
obj.getName(); / / this is obj

var bar = obj.getName;
bar(); // When called this way, this refers to the window, since the function's execution environment is global
Copy the code

The constructor

function Foo() {}
Foo.prototype.getName = function(){
  console.log(this.name);
}

var bar = new Foo();
bar.name = 'alex';
bar.getName(); // This points to the instance bar
Copy the code

According to call

Apply and call change the this reference at runtime

function foo(){
  console.log(this.name);
}

var applyObj = {
  name: 'alex'
}

var callObj = {
  name: 'f0rest'
}

foo.apply(applyObj); // alex
foo.call(callObj); // f0rest
Copy the code

ECMAScript 6

In ES 6, most of our functions are written using arrow function, whose this is different from ES 5.

Arrow function

// ES 5
var foo = function(options){ console.log('alex'); };
// ES 6
const foo = (options) = > { console.log('alex'); };



// ES6 function to return a object
const foo = (a)= > ({ name: 'f0rest' });
Copy the code

The rule in ES 6 is that the {following the arrow is resolved to be the beginning of a block, not the beginning of an object, so parentheses wrapping object literals is the only trick you need to keep in mind

this

The arrow function does not have its own this value; it inherits this from the enclosing scope

In the following example, this is undefined because ES 6 is in strict mode, and in strict mode this of the global scope is undefined

const foo = (options) = > {
  console.log(this); // undefined
};
Copy the code

inReactIn the practice

In the React component, there are three ways to register events so that this in the event function points to the current component instance

We used ES 6 syntax for React application development

Method 1

Bind in the constructor method

class App extends React.Component {
    constructor() {
        this.myEvent = this.myEvent.bind(this);
    }
    myEvent() {
      console.log(this);
    }
    render() {
        return (<div onClick={this.myEvent}>demo</div>); }}Copy the code

Method 2

Bind in the Render method because the Render method already binds this for you

class App extends React.Component {
    myEvent() {
      console.log(this);
    }
    render() {
        return (<div onClick={this.myEvent.bind(this)}>demo</div>); }}Copy the code

Methods 3

Here is the arrow function that inherits the this of the enclosing scope, the current component instance

class App extends React.Component {
    myEvent = (a)= > {
      console.log(this);
    }
    render() {
        return (<div onClick={this.myEvent}>demo</div>); }}Copy the code

Note: If you are writing generic components, the first method is recommended, which involves prototyping, but is not presented.

The last

Thank you for reading, please correct any errors.