How to change the direction of this gracefully

Preface

Javascript  It provides us with some function methods to help us deal with the function interior more gracefully  

this

  Direction problem of , Commonly used

bind()

 

call()

 

apply()

this Point to

this

The direction of , It is determined after we call the function . The different calling methods determine this The direction of is different , Generally point to our caller .

change this Three functions of

call()

call()

  Method uses a specified  

this

  Value and one or more parameters given separately to call a function .

grammar

fun.call(thisArg, arg1, arg2, ...)

• thisArg： stay fun Specified by function runtime this value

• args1, arg2, ... ： Other parameters passed

• The return value is the return value of the function , Because it's the calling function

var ldh = {
 name: ' Lau Andy '
}
function f(a, b) {
 console.log(this); //ldh
 console.log(a + b); //5
}
f.call(ldh, 2, 3);

effect

• call
    The first one can call the function   The second one can change the... In the function  this  Point to

• call
    The main function of inheritance is to realize inheritance

function Father(uname, age, sex) {
 this.uname = uname;
 this.age = age;
 this.sex = sex;
}

function Son(uname, age, sex) {
 Father.call(this, uname, age, sex);
}
var son = new Son(' Lau Andy ', 22, ' male ');
console.log(son);
// { uname: ' Lau Andy ', age: 22, sex: ' male ' }

Father.call(this, uname, age, sex);

  While calling the parent constructor , The... In the parent constructor this Points to this, In this way, the child constructor can use uname,age,sex 了

apply()

apply()

  Method calls a given

this

The value of the function , And with an array （ or

Class array object

） Parameters provided in the form of .

grammar

fun.apply(thisArg, [argsArray])

• thisArg： stay fun Specified by function runtime this value

• argsArray： Value delivered , Must be included in
  Array
  Inside

• The return value is the return value of the function , Because it's the calling function

var ldh = {
 name: ' Lau Andy '
}

function f(arr) {
 console.log(this); //ldh
 console.log(arr); // Xiaohong
}
f.apply(ldh, [' Xiaohong ']);

effect

• It's also a call function   The second one can change the inside of the function this Point to

• But its parameters must be arrays （ Pseudo array ）

• apply The main application of   For example, we can use  apply  Find the maximum with the help of mathematical built-in objects  Math.max()

var arr = [1, 5, 66, 44, 8];
var max = Math.max.apply(Math, arr);
console.log(max); //66

// console.log(Math.max(...arr));
//  This can also , We are here to practice apply Usage of

bind()

bind()

  Method creates a new function , stay  bind()  When called , Of this new function  this  As the  bind()  The first parameter of , The rest of the parameters will be the parameters of the new function , For calling .

grammar

fun.bind(thisArg, arg1, arg2, ...)

• thisArg： stay fun Specified by function runtime this value

• args1, arg2, ... ： Other parameters passed

• bind  Methods do not call functions , But it can change the inside of the function this Point to

• The return value is fun Modified copy of the original function （ New functions are generated ）

var ldh = {
 name: ' Lau Andy '
}

function f(a, b) {
 console.log(this); //ldh
 console.log(a + b); //5
}
var fn = f.bind(ldh, 2, 3);
fn();

effect

• Will not call the original function

• You can change the internal of a function this Point to

• Return is the original function change this And the new functions that come out of it

• If there are functions we don't need to call immediately , But I want to change the internal of this function this Point to , Use this time  
  bind

Timer

There's a button , When we click , Just disable this button ,3 Turn on this button in seconds

<button> Click on </button>
var btn = document.querySelector('button');
btn.onclick = function() {
 this.disabled = true;
 var that = this;
 setTimeout(function() {
 that.disabled = false;
 }, 3000)
}

We will pass before

var that = this;

  Retain this The direction of , At the end of the course bind After the method , It can be used bind To keep it this Point to

var btn = document.querySelector('button');
btn.onclick = function() {
 this.disabled = true;
 setTimeout(function() {
 this.disabled = false;
 }.bind(this), 3000)
}

summary

call

 

apply

 

bind

  summary

The same thing

Can change the function of the internal

this

Point to

Difference

• call and apply Can bring Oh function , And change the inside of the function this Point to

• call and apply The parameters passed are different call：arg1, arg2, ...apply：[arg]  Array form

• bind Does not call function , You can change the inside of the function this Point to

Main application scenarios

• call Often do inheritance

• apply It's often related to arrays , For example, with the help of mathematical objects to achieve the maximum and minimum value of the array

• bind Don't call functions , But also want to change this Point to , For example, change the internal timer this Point to

Last

liver ！ liver ！ liver ！ Let's cheer together ~~~