This is an object that refers to different objects in different cases. When a function is called, an object is generated (how it is called, where it is called, arguments, etc.). Generally we use this to refer to global or local scopes instead of the current object in use. The main uses are: 1, to call 2 as an object method, and 3 as a constructor. Called after changing this direction with call or apply

This object is easy to call, so if you call that object, this points to whoever it is

var person ={
name:'the 19'Age: '22'the print:function(a){
console.log (this)console.log (thisThe nmae + ', '+this.age)}} person.print();// This refers to the current object person
Copy the code

Function person (name, age) {this.name = name; function person (name, age) {this.name = name; this.age = age ; console.log (this); Var shijiu = new person (‘ 19 ‘, 22); // This refers to the new function of the new piece}

There are three ways to change this: Call apply bind

The first argument to apply points to this, followed by an array

function fn(x,y){
            console.log(this);  
        }
        var obj = {
            name:"pc"
        }
        fn(1.2);
        fn.apply(obj,[1.2]);
Copy the code

Common: All three can change the reference of this, and the first parameter passed is the object referred to by this, which takes the form of subsequent arguments. Difference: Call passes a single argument, while apply passes an array. Bind does not specify that single arguments and arrays can be used. Call and apply execute directly, while bind returns a function that is executed only when called.

The following is an extension:

Context is optional. If not, the default context is Window. Next create a fn property for the context and set the value to the function you want to call; Because call can pass multiple arguments as arguments to the calling function, you need to strip the arguments out; The function is then called and removed from the object.

// this is the function called
// Context is a parameter object
Function.prototype.myCall = function(context){ 
	// Determine whether the caller is a function
	if(typeof this! = ='function') {throw new TypeError('Error')}// The default value is window
 context = context || window 
 // Add the fn attribute, which sets the value to the function to be called
  context.fn = this
  Call [...arguments]
  const args = Array.from(arguments).slice(1)
   // Call the function
   constresult = context.fn(... args)// Delete the function
   delete context.fn 
   // Returns the execution result
   return result;
   }
  // A normal function
  function print(age){ 
  console.log(this.name+""+age);
   }
  // Custom objects
  var obj = { name:'pc' }
  // Call the function's call method
 print.myCall(obj,1.2.3)
Copy the code

Determines whether the caller is a function. Intercepting parameters, note that there are two forms of parameter passing. Return a function, judging which way the function called external (new | direct call)

// Write a bind function
Function.prototype.myBind = function (context) { 
	// Determine whether the caller is a function
	if(typeof this! = ='function') {throw new TypeError('Error')}// Intercepts the passed arguments
		const args = Array.from(arguments).slice(1) 
		// _this points to the called function
		const _this = this; 
		// Return a function
		return function F(){ 
		// Since we return a function, we can new F(), so we need to determine
		 // In the case of new, this will not be changed in any way
		 if(this instanceof F){ 
		 	return new_this(... args,... arguments) }else{
		 	return_this.apply(context,args.concat(... arguments)) } } }// A normal function
		function print(){ 
		Bind [...arguments]
		console.log(this.name); 
		}
// Custom objects
var obj = { name:'pc'} / Call the function's call methodlet F = print.myBind(obj,1.2.3); 
// Return the object
let obj1 = new F(); 
console.log(obj1);
Copy the code