This is the fifth day of my participation in the August Wen Challenge.More challenges in August

this

The understanding of this is also necessary in JS, after all, this is something that must be mastered in JS

Overall this

  • This points to global Windows
console.log(this.'this')
Copy the code

The object of this

  • The first is that obj itself calls to OBj
  • The second is when you assign a value to a variable, and you call it when it points to Windows
  • The third type is the arrow function that looks for its nearest this. The object does not constitute a separate scope (global scope/local function scope), so it points to the window
let obj = {
   name: 'I'm obj's name'.fn() {
     console.log(this.'this')},fn1: () = > { console.log(this.'Arrow function this')}
}

obj.fn()
// call: obj.fn()
// Output: {name: "I am obj's name", fn: ƒ}



let a = obj.fn;
a();
// Output: this points to Windows


// call: obj.fn1()
obj.fn1();
// Output: this points to Windows
Copy the code

This inside the function

 //1
 function fn() {
   console.log(this.'this')}/ / points to the window
 
 //2
 function fn() {
   return function() {
     console.log(this.'this')}}let obj = {
   f: fn()
 }
 
 // Call fn()() to point to window
 // Call: obj.f() points to obj itself
 
 //fn() return () => {console.log(this, 'this')} 
 // The arrow function points to the window in both cases
 
 
 //3
 
 function Fn() {
   console.log(this.'this')}let f = new Fn();
 // The constructor's this refers to itself
Copy the code

To change this

There are three ways to change this: apply, bind, call; Tell me the differences between them:

  1. apply Immediate execution contextTrigger the function immediatelyThe array listreceive
let obj = {
  text: 'the nuggets'
}


function fn(. args) {
  console.log(this.'this', args)
  return 'Return value'
}

// Call fn() to point to window by default;

/ / the apply to change this

let f = fn.apply(obj)

//1.
// change this (this refers to obj)
Fn. apply(obj, [1,2,3,4,5]);
// return value (f = 'return value');
Copy the code

2. Call immediate execution context (that is, immediately trigger the function) parameters are received with a list separated by ‘commas’.

Let obj = {text: 'obj'} function fn(... Args) {console.log(this,'this', args) return 'return value'} // Call fn() to point to window by default; Call (obj); // call(obj); Fn. call(obj, 1,2,3,4,5) //Copy the code

3. Bind does not execute the context immediately, but returns the function itself

let obj = {
  text: 'the nuggets'
}

function fn(. args) {
  console.log(this.'this', args)
  return 'Return value'
}

// Call fn() to point to window by default;

/ / the apply to change this

let f = fn.bind(obj);
f();
Call f()/fn.bind(obj)();
// change this (this refers to obj)
Fn. bind(obj, 1,2,3,4,5);
Fn. bind(obj)(1,2,3,4,5)
// return fn itself
Copy the code

Implement your own call and apply

Common: 1. Call immediately 2. Implement this to 3

call

// Implement a self-call
// No compatibility is considered so it is easier to understand and implement

  Function.prototype.myCall = function(target, ... args) {
       // Add a fn function to obj (this)
        const obj = target || window;
        obj.fn = this;
        //** fn** is called on obj
        letresult = obj.fn(... args);// Delete fn at last
        delete obj.fn
        return result
   }


   let obj = {
       name: 'call'
   }

   function fn(. args) {
       console.log(this.'this'. args) } fn.myCall(obj,1.2.3.4.5)
   fn.myCall(null.1.2.3.4.5)
   // The output is verified
Copy the code

apply

function fn1(. args) {
  console.log(this.'thisFn1'. args, args) }let obj = {
   name: 'apply'
 }
 
 Function.prototype.myApply = function(target, ... args) {
       // Add a fn function to obj (this)
        const obj = target || window;
        if(args && args.length > 1) {
            throw new Error('apply Invalid parameter')
        }
        obj.fn = this;
        // fn on obj is called
        letresult = obj.fn(... args[0]);
        // Delete fn at last
        delete obj.fn

        return result
   }

 fn1.myApply(obj, [1.2.3.4])
 
 
 // Verify that the output is correct
Copy the code

Implement a bind of your own

 //1, not immediately call return a function of its own
   //2
   //3. Realize the combination of multiple preparameters and actual parameters
   //4


   Function.prototype.myBind = function(target, ... args) {
     // Add a fn function to obj (this)
        const obj = target || window;
        let than = this; 
        return function(. args1) {
            
            obj.fn = than;
            // fn on obj is called
            letresult = obj.fn(... ([...args, ...args1]));// Delete fn at last
            delete obj.fn
        }

   }


   let obj = {
       name: 'call'
   }

   function fn(. args) {
       console.log(this.'this'. args, args) } fn.myBind(obj,1.2.3) (4.5.6)
   
   
   // Verify that the output is correct
Copy the code

conclusion

Hello, I’m Mihara. I will keep learning and summarizing