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.
Call way | This points to the |
---|---|
Ordinary function calls | window |
Constructor call | Methods inside the instance object prototype object also point to the prototype object |
Object function call | The object to which the method belongs |
Event binding method | Bind event object |
Timer function | window |
Execute function immediately | window |
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 the
An array of
inside - 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
- Call and Apply take the function and change the this reference inside the function
- Call and apply pass different parameters
- Call: arg1, arg2…
- Apply: [arg] Array format
- Bind does not call a function; it can change the this pointer inside a function
Main Application Scenarios
- Call often does inheritance
- Apply is often associated with arrays, such as arrays Max and min with mathematical objects
- 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 ~~~