(1) call
Basic usage of call
function person () {
console.log(this.name)
}
let me = {
name: 'zfb'
}
person.call(me) // zfb
person.call(me) means to call the person function, and point this in the person function to the me object, and the parameters of call are passed one by one.
function person (a, b) {
console.log(this.name)
console.log(a)
console.log(b)
}
let me = {
name: 'zfb'
}
person.call(me, 1, 2)
// zfb
// 1
// 2
The function of call is to modify the this point, the above this points to the me object
(Two) apply
The difference between apply and call is. The parameter that apply accepts is an array, even if it is a parameter, it needs to be put in the array
When receiving, one by one
function person (a, b) {
console.log(this.name)
console.log(a)
console.log(b)
}
let me = {
name: 'zfb'
}
person.apply(me, [1, 2])
// zfb
// 1
// 2
(3) Special circumstances
If the first parameter passed to call and apply is undefined or null, this points to window
function person (a, b) {
console.log(this)
console.log(a)
console.log(b)
}
let me = {
name: 'zfb'
}
person.apply(undefined, [1, 2])
person.call(undefined, 1, 2)
person.apply(null, [1, 2])
person.call(null, 1, 2)
Output:
(Four) bind
The role of bind is to change the this point, but unlike call and apply, call and apply will be executed immediately after binding, but bind will not be executed immediately, and need to be called again
function person (a, b) {
console.log(this)
console.log(a)
console.log(b)
}
let me = {
name: 'zfb'
}
person.bind(me, 1, 2) // 这时候控制台什么都没发生
person.bind(me, 1 ,2)() // 手动调用
// {name: "zfb"}
// 1
// 4
In other words, bind returns a new function, and then we need to call the new function
const newFunction = person.bind(me, 1, 2) // 这时候控制台什么都没发生
console.log(newFunction)
// ƒ person (a, b) {
// console.log(this)
// console.log(a)
// console.log(b)
// }
newFunction() // 调用新返回的函数
// {name: "zfb"}
// 1
// 4
So pass parameters, you can pass the parameters to the new return function
person.bind(me)(1, 2)
// {name: "zfb"}
// 1
// 4
If binding null or undefined, also this points to window
person.bind(null)(1, 2)
person.bind(undefined)(1, 2)
(5) Handwriting call method
The essence of fn.call(obj) is obj.fn()
let me = {
name: 'zfb',
person: function (a, b) {
console.log(this)
console.log(a)
console.log(b)
}
}
me.person(1, 2)
So what we have to do is to mount the bound function to the object pointed to by this
Function.prototype.call = function (obj, ...args) {
// 如果第一个参数是 null 或者 undefined 赋值为 window
if (obj === null || obj === undefined) {
obj = window
}
// 谁调用call,this就指向谁
obj.p = this
// 给obj添加一个方法,把参数传进去调用 如果有返回值就返回赋值给result
var result = obj.p(...args)
// 添加了之后要删除
delete obj.p
// 返回 result 这个返回值
return result
}
Similarly, apply is the same
Function.prototype.apply = function (obj, args) {
// 如果第一个参数是 null 或者 undefined 赋值为 window
if (obj === null || obj === undefined) {
obj = window
}
// 谁调用call,this就指向谁
obj.p = this
// 给obj添加一个方法,把参数传进去调用 如果有返回值就返回赋值给result
var result = obj.p(...args)
// 添加了之后要删除
delete obj.p
// 返回 result 这个返回值
return result
}
The only difference between call and apply is that the accepted parameter types are not used, one is the value after deconstruction, and the other is the array without deconstruction
(6) bind
bind returns a new function
Function.prototype.bind = function (obj, ...args) { // bind 函数传参数
// bind 返回一个新函数
return (...arg2s) => { // 新函数传参数
return this.call(obj, ...args, ...arg2s) // call 返回一个返回值,将返回值返回
}
}
There are two ways to pass parameters in bind
person.bind(me, 1, 2)() // bind 函数传参数
person.bind(me)(1, 2) // bind 返回的新函数传参数
The above is all the knowledge points~