How to elegantly change the direction of this

Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

preface

Javascript provides a number of function methods to help us handle this pointing problems inside functions more elegantly, such as bind() call() apply()

This points to the

The reference to this is determined after we call the function. Depending on how this is called, it refers to our caller.

Change the three functions of this

call()

The call() method calls a function with a specified this value and one or more arguments given separately.

grammar

fun.call(thisArg, arg1, arg2, ...)
Copy the code

• ThisArg: This value specified when fun is run
• args1, arg2, … : Other parameters to pass
• The return value is the return value of the function, because it is the calling function

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

role

• Call the first one can call a function and the second one can change the “this” reference inside the function

• The main purpose of Call is to enable 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('Andy Lau'.22.'male');
console.log(son);
Copy the code

The print result is as follows:

Father.call(this, uname, age, sex); When the parent constructor is called, refer this from the parent constructor to this from the child constructor, so that the constructor can use uname, age, and sex from the parent constructor

apply()

The apply() method calls a function with a given this value and arguments in the form of an array (or array-like object).

grammar

fun.apply(thisArg, [argsArray])
Copy the code

• ThisArg: This value specified when fun is run
• ArgsArray: The value passed must be included in theAn array ofinside
• The return value is the return value of the function, because it is the calling function

var ldh = {
    name: 'Andy Lau'
}

function f(arr) {
    console.log(this);	//ldh
    console.log(arr);	/ / the little red
}
f.apply(ldh, ['little red']);
Copy the code

role

• This is also the second function that can be called to change the this pointer inside the function
• But its arguments must be arrays (pseudo-arrays)
• For example, we can use Apply to maximize math.max () with the help of mathematical built-in objects.

var arr = [1.5.66.44.8];
var max = Math.max.apply(Math, arr);
console.log(max);	/ / 66

// console.log(Math.max(... arr));
// This is a good idea
Copy the code

bind()

The bind() method creates a new function. When bind() is called, this of the new function is the first argument to bind(), and the remaining arguments are used as arguments to the new function.

grammar

fun.bind(thisArg, arg1, arg2, ...)
Copy the code

• ThisArg: This value specified when fun is run
• args1, arg2, … : Other parameters to pass
• The bind method does not call a function, but can change the this reference inside the function
• The return value is a copy of the original function modified by Fun.

var ldh = {
    name: 'Andy Lau'
}

function f(a, b) {
    console.log(this);		//ldh
    console.log(a + b);		/ / 5
}
var fn = f.bind(ldh, 2.3);
fn();
Copy the code

role

• The original function will not be called
• You can change the this pointer inside the function
• Returns the new function created when the original function changes this
• If you don’t need to call a function immediately, but want to change the “this” pointer inside the function, use bind

The timer

There’s a button, and when we click it, we disable it, and after 3 seconds, we turn it on

<button>Click on the</button>
Copy the code

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

We used to say var that = this; Keep this pointing, so once you’re done with bind, you can use bind to keep this pointing

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

conclusion

Call apply bind

The same

You can change the this pointer inside the function

The difference between

1. Call and Apply take the function and change the this reference inside the function
2. Call and apply pass different parameters
   • Call: arg1, arg2…
   • Apply: [arg] Array format
3. Bind does not call a function; it can change the this pointer inside a function

Main Application Scenarios

1. Call often does inheritance
2. Apply is often associated with arrays, such as arrays Max and min with mathematical objects
3. Bind doesn’t call a function, but it also wants to change the this pointer, such as inside the timer

The last

Liver! Liver! Liver! We come on together ~~~