In the front-end interview, this direction and object oriented is a must test question, but also the daily development of the unavoidable topic, many front-end novice always feel this direction unpredictable, unpredictable; There are also a lot of front-end old bird often fail in this direction, this article will focus on this direction, see if you really thoroughly grasp.

Global scope

We can print this directly to the console in the global to see the pointing;

  1. If executed in a browser, output is displayed
console.log(this)  / / output window
Copy the code
  1. Execute in Node and output
console.log(this)  // 输出 {}
Copy the code

You can see that an empty object has been output in the Node environment and can be further tested

console.log(this= = =module.exports)  / / output true
Copy the code

Conclusion: In global scope, executing this in the browser points to window; Executed in Node, this points to module.exports.

The function this points to

According to different application scenarios of functions, the following situations are summarized and illustrated respectively.

1. Event handlers

Set up a simple scene, there are two buttons, click the button, you can make the button background color red, the two buttons do not affect each other

.<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>.Copy the code
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");

btn1.onclick = changeBgColor;
btn2.onclick = changeBgColor;

function changeBgColor() {
  this.style.backgroundColor = "red";
}
Copy the code

Conclusion: This refers to the DOM object from which it was called.

2. Ordinary functions in global scope

  1. Directly called in normal modefn(), this points to the window;
function fn() {
  console.log(this);
}

fn();             / / output window
window.fn();      / / output window
Copy the code
  1. When called in strict mode, this refers to undefined as follows:
'use strict'

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

fn();             / / output is undefined
window.fn();      / / output window
Copy the code

Conclusion: In strict mode, functions that are not called by window will point to undefined.

3. Methods in objects

var obj = {
  a: 10.b: function() {
    console.log(this);
  }
}

obj.b();          // output {a:10, b: f}, namely object obj
window.obj.b();   // output {a:10, b: f}, namely object obj

var c = obj.b;
c();             / / output window
window.c();      / / output window
Copy the code

Conclusion: If a function is contained by multiple layers of objects, when called by the outermost layer, this still refers to the object above it.

4. Constructor

function Fn(age) {
  this.age = age
  console.log(this);
}

var obj = new Fn(31);  // Fn {a:31} is the newly created object
Copy the code

There is a special case where there is a return in the constructor

function Fn(argu) {
  this.age = 10;
  return argu
}
// Returns a null character pass
 var obj1 = new Fn(' ');
 console.log(obj1.age); / / output 10

// Return an object
var obj2 = new Fn({});
console.log(obj2.age); / / output is undefined

/ / returns null
var obj3 = new Fn(null);
console.log(obj3.age); / / output 10
Copy the code

Conclusion: In the constructor, if return an object, this refers to the returned object, return null and non-object, and there is no explicit return, then this refers to the newly created object of new.

5. Arrow function

var obj1 = {
  a: 10.b: function() {
    console.log('Ordinary function:'.this)}}var obj2 = {
  a: 20.b: (a)= > {
    console.log('Arrow function:'.this)
  }
}

obj1.b();  // Output {a:10, b:f} is the obj1 object
obj2.b();  // Outputs the window object
Copy the code

Conclusion: The arrow function itself does not have this and arguments. Calling this in the arrow function actually calls this, which defines the upper scope, since objects cannot form independent scopes.