first need to understand
The same point
call apply bind, the three functions all play the role of changing the point of this
Differences
1. Call and apply have different parameter passing. call(object, parameter 1, parameter 2, ...) supports multiple parameters, while apply only supports 2 parameters. apply(object, parameter group) [function].call
( [object], parameter 1, parameter 2, ... parameter n)
[function].apply([object], [parameter 1, parameter 2, parameter 3, ... parameter n])
2.call and apply change a function call The this points to, bind returns a new function whose this point has been changed
This points to the principle of change.
The this in the function in js will point to whoever calls this. No one calls this. By default, it points to the window
object.function() object to call the function. Then this in this function points to this object
.
Function.prototype.myCall = function (obj, ...args) {
//先判断 obj中是否有值 如果有 就赋值指向 如果没有 就指向window
let callThis = (obj !== null & obj !== undefined) ? Object(obj) : window
//this 谁调用这个方法this就指向谁 所以这里this就是改变this指向的桉树
const fn = this
//将需改变this指向函数 放入callThis中
callThis.fn = fn
//这样去调用就可以改变this的指向
const result = callThis.fn(...args)
//调用完成之后 将callThis中的fn删除
delete callThis.fn
//有的函数是有返回值的 所以这里需要把返回值考虑进来
return result
}
Function.prototype.myApply = function (obj, arr) {
//apply接收的参数是arr 所以这里需要转数组
let callThis = (obj !== null & obj !== undefined) ? Object(obj) : window
//this 谁调用这个方法this就指向谁 所以这里this就是改变this指向的桉树
const fn = this
//将需改变this指向函数 放入callThis中
callThis.fn = fn
//这样去调用就可以改变this的指向
const result = callThis.fn(...arr)
//调用完成之后 将callThis中的fn删除
delete callThis.fn
//有的函数是有返回值的 所以这里需要把返回值考虑进来
return result
}
//bind函数 返回的是一个改变this指向的函数
Function.prototype.myBind = function (obj, ...Array) {
//先判断传值
let callThis = (obj !== null & obj !== undefined) ? Object(obj) : globalThis
const fn = this
function fnProxy(...args) {
callThis.fn = fn
//函数执行时调用
const result = callThis.fn([...Array, ...args])
return result
}
//将函数返回
return fnProxy
}
const obj = {
name: "wsm"
}
const foo = function () {
console.log(this);
}
const sum = function (n1, n2) {
console.log(this, n1, n2);
return n1 + n2
}
sum.myApply(obj, [12, 13])
console.log('结果', sum.myApply(obj, [12, 13]));
separate handwritten call
//定义一个加减方法
function add(a,b){
return a+b+this.c
}
const obj ={
c:10
}
//定义自己的call函数（参数1:要改变this指向的函数，this指向的对象，函数的参数）
const call = function (func,obj,...args){
//先判断 是否传入了obj 如过没有 就将window传进去
if(obj == null || obj ==undefined){
//globalThis 会根据环境自动识别 在浏览器环境就是window 在node环境globalProject
obj = globalThis
}
//第一步 将传入的函数拷贝给对象中
obj.test=func
//第二步 用对象.函数的方法调用该函数并传参返回
const result = obj.test(...args)
//每次调用完删除加入的函数
delete obj.test
//返回计算结果
return result
}
console.log(call(add,obj,10,10));
Handwritten apply
and call alone are almost the same, but the parameters passed are different
//定义一个加减方法
function add(a,b){
return a+b+this.c
}
const obj ={
c:10
}
//定义自己的call函数（参数1:要改变this指向的函数，this指向的对象，函数的参数）
const call = function (func,obj,args){
//只有此处和call有区别
//先判断 是否传入了obj 如过没有 就将window传进去
if(obj == null || obj ==undefined){
//globalThis 会根据环境自动识别 在浏览器环境就是window 在node环境globalProject
obj = globalThis
}
//第一步 将传入的函数拷贝给对象中
obj.test=func
//第二步 用对象.函数的方法调用该函数并传参返回
const result = obj.test(...args)
//每次调用完删除加入的函数
delete obj.test
//返回计算结果
return result
}
console.log(call(add,obj,10,10));