The default binding for this

  • This in the global context refers to the window
console.log(this); // window
Copy the code
  • The function is called independently. This inside the function also refers to the window, and the function is mounted to the window by default
function fn() {
  console.log(this);
}
fn(); // window // equivalent to window.fn();
Copy the code
  • When called independently by nested functions,this points to window by default
var obj = {
  a: 2.// The function is called as a method of the object. This points to obj
  fn: function () {
    function test() {
      console.log(this); // window} test(); }}; obj.fn();// The test() function is called by itself, so this is the window
Copy the code
  • This of the immediately executed function points to the window
(function () {
  console.log('This:' inside a self-executing function + this); //window}) ();Copy the code
  • This in the closure points to the window by default
// Closures are functions that can read variables inside other functions. The test function below is the closure
var a = 0;

var obj = {
  a: 2.foo: function () {
    var c = this.a;
    return function test() {
      console.log(this); // window
      returnc; }; }};var fn = obj.foo();
console.log(fn()); / / 2
Copy the code
  • Chain of function calls (one function calls another function), where each function is equivalent to a separate call, and this refers to the window
function test1() {
  console.log(this); // window
  test2();
}

function test2() {
  console.log(this); // window
}
test1();
Copy the code
  • The this in the callback of the first argument to the built-in setTimeout() and setInterval() functions points to window by default
/ / 1.
setTimeout(function () {
  console.log(this); // window
}, 1000);
Copy the code
// 2. var a = 10; function foo() { console.log(this.a); } var obj = { a: 1, foo: foo, }; setTimeout(obj.foo, 1000); SetTimeout (function foo() {console.log(this.a); }, 1000); / / 10Copy the code

Implicit binding of this

// 1. When a function is called as a method on an object,this refers to the direct object
function foo() {
  console.log(this.a);
}
var obj = {
  a: 1.foo: foo,
  obj2: {
    a: 2.foo: foo,
  },
};
The direct object of foo() is obj, and this is implicitly bound to obj
obj.foo(); / / 1
The direct object of foo() is obj2, and this is implicitly bound to obj
obj.obj2.foo(); / / 2
Copy the code

Display binding for this

  • Bind this object with call() apply() bind()
var a = 0;
function foo() {
  console.log(this.a);
}
var obj = {
  a: 2}; foo();/ / 0
foo.call(obj); / / 2
foo.apply(obj); / / 2
var fn = foo.bind(obj);
fn(); / / 2
Copy the code
  • If this is hardbound, then this cannot be changed
var a = 0;
function foo() {
  console.log(this.a);
}
var obj = {
  a: 2};var bar = function () {
  foo.call(obj);
};
bar();
setTimeout(bar, 2000);
// No matter how hard bar is called, foo's this binding is not affected
bar.call(window); / / 2
Copy the code
  • ForEach (map() filter() some() every())
// Because the function passed in by default is called independently (default binding)
var id = 'window';
var obj = {
  id: 'fn'};var arr = [1.2.3];
arr.forEach(function (item) {
  console.log(item, this.id); // Print "window" three times
});
Copy the code
// To change the function's this pointer, pass an object to the second argument to forEach
var id = 'window';
var obj = {
  id: 'fn'};var arr = [1.2.3];
arr.forEach(function (item) {
  console.log(item, this.id); // Print "fn" three times
}, obj);
Copy the code

The new binding for this

// If the new keyword is used to call the function equivalent to the constructor to instantiate the object, then the inner this refers to the currently instantiated object
/ / create a Person
function Person() {
  console.log(this); // Person {}
}

var p = new Person();
console.log(p); // Person {}
Copy the code

Implicit loss of this

  • Function is an alias
var a = 0;
function foo() {
  console.log(this.a);
}
var obj = {
  a: 1.foo: foo,
};
obj.foo(); / / 1
// Foo is called to bar, and bar is not bound to any object. Therefore, there is no implicit binding. This is the default binding, and this refers to window
var bar = obj.foo;
bar(); / / 0
Copy the code
  • Parameter passing
var a = 0;
function foo() {
  console.log(this.a);
}
var obj = {
  a: 1.foo: foo,
};
obj.foo(); / / 1
// Foo is called to bar, and bar is not bound to any object. Therefore, there is no implicit binding. This is the default binding, and this refers to window
var bar = obj.foo;
bar(); / / 0
Copy the code
  • Indirect invocation
function foo() {
  console.log(this.a);
}
var a = 2;
var obj = {
  a: 3.foo: foo,
};
var p = { a: 4 };
// Implicitly bound, the function is used as a method in the object, and the inner this refers to the object
obj.foo(); / / 3

// The result of assignment (obj2.foo = obj1.foo) is foo;
// foo is called directly, which is the default binding
(p.foo = obj.foo)(); / / 2

// Assign obj.foo to p.foo, and then p.foo() to execute, which is actually the execution of a method belonging to the p object. This refers to the current p object
p.foo = obj.foo;
p.foo(); / / 4
Copy the code

This in the ES6 arrow function points to

MDN official documentation: “Arrow functions do not create their own this, it only inherits this from the upper level of their scope chain.”

var obj = {
  a: () = > {
    console.log(this); }};// The object is not scoped. The a method is defined in the global scope, and this refers to the window
obj.a(); // window
Copy the code
Var obj = {a: () => {console.log(this); }}; obj.a.call({ name: 'zhangsan' }); // windowCopy the code

This points to in strict mode

// 1. In strict mode, this inside a function called independently refers to undefined
function fn() {
  'use strict';
  console.log(this); // undefined
}
fn();
Copy the code
// 2. In strict mode, this inside apply() and call() is always their first argument
function fn() {
  'use strict';
  console.log(this); // The first output is null, and the second output is undefined
}
showColor.call(null);
showColor.call(undefined);
Copy the code