This is the third day of my participation in Gwen Challenge

‘call’,’ apply ‘, and ‘bind’ are all used to change the direction of this.

In most cases, the call to the function determines the value of this (runtime binding). This cannot be assigned during execution, and the value of this may vary each time the function is called. (From MDN)

The most important thing to remember about this is actually the object that called it last.

Let’s take a look at the five bindings for this:

  1. Default binding (strict/non-strict mode)
  2. Implicit binding
  3. Explicitly bound
  4. Arrow function binding
  5. The new binding

Default binding (strict/non-strict binding)

// Strict format
'use strict';
function fn() {
	console.log(this);
}
fn(); // undefined

// Non-strict mode
function fn() {
	console.log(this);   
}
fn(); // window

// Only calling functions in strict mode is not affected
(function () {
'use strict';
	fn(); // window}) ();Copy the code

Implicit binding

varMyName = 'jack'; function fn() { console.log(this.myName); } fn(); // jack var obj = { myName:'peter', objFn:fn } obj.objFn(); // peterCopy the code

Explicitly bound

var myName = 'jack';
function fn(){
	console.log(this.myName);
}
fn(); // jack

var obj = {
	myName: 'peter'
}

fn.call(obj); // 'peter'
Copy the code

Arrow function binding

Let’s start with a few considerations when using the arrow function:

  1. The arrow function does not have its own this object
  2. Do not use it as a constructor, that is, do not use the new command on arrow functions, otherwise an error will be reported
  3. Instead of using arguments objects, use rest arguments instead
  4. Yield is used when this is not possible, so arrow functions cannot be used as Generator functions

Here we focus on the point where the arrow function does not have its own this object

// Take a look at this example
var myName = 'jack';
var obj = {
	myName: 'peter'.objFn1: function (){ console.log(this.myName); },
	objFn2:() = > console.log(this.myName)
}

obj.objFn1(); // peter
obj.objFn2(); // jack
Copy the code

We also said that this always refers to the object calling the function, but the arrow function is an exception. Since the arrow function itself has no this object, the arrow function’s this refers to the outer scope. The above example is global.

Let’s use the following example to see how to understand the outer scope

var myName = "jack";
var obj1 = {
	myName: "peter".fn1: () = > this.myName,
	fn2: function () {
		return this.myName;
	},
	fn: function () {
		return () = > this.myName; }};console.log(obj1.fn1()); // jack
console.log(obj1.fn2()); // peter
console.log(obj1.fn()()); // peter
Copy the code

If obj.fn() returns an arrow function, this refers to the outer scope. If obj.fn() returns an arrow function, this refers to the outer scope.

The new binding

When a function is used as a constructor (using the new keyword), its this is bound to the new object being constructed.

/ / see example
var myName = 'jack';
function Fn(name) {
    this.myName = name;
}

var o = new Fn('pater'); // o binds this in the Fn(' Peter ') call
console.log(o.myName); // peter

Copy the code

The above is the explanation of this point, if there is any problem, I hope you give advice.