系列文章目录
其它部分在这儿~~~ 持续更新中~~
前言
call,apply,bind都是可以改变this指向的函数,但是具体区别是什么呢,这边主要是从实现方式看区别
一、call
分析
1、call的参数,第一个参数是this的指向(null或undefined则指向windows),后面是参数列表(必须一次性传入完)。
2、立即执行函数。
3、返回执行后的结果。
代码如下(示例):
Function.prototype.myCall = function(context, ...arg){
// 如果没有传入上下文,那么指向window,否则指向传入的上下文
let nowContext = context || window
// 避免函数名与上下文冲突,使用Symbol定义: symbol的实例是唯一的不可变的, 用于确保对象的属性不重复
let funName = Symbol()
// 将当前调用myCall的函数属性赋值给funName
nowContext[funName] = this
/// 根据参数格式化,没有传值就置为空数组
args = arg.length > 0 ? arg : [];
/// 根据不同的参数个数做处理
const result = args.length > 0 ? nowContext[funName](...args) : nowContext[funName]();
/// 删除方法,避免污染,不删除就等于是在context上新增了一个this方法
delete nowContext[funName];
return result
}
var name = "小李"
function getName(age) {
return this.name + age
}
let obj = {name: "小张"}
let b = getName.myCall(obj, 18)
let a = getName.myCall(null,22)
console.log(b) // 小张18
console.log(a) // 小李22
二、apply
分析
1、call的参数,第一个参数是this的指向(null或undefined则指向windows),第二个参数是数组。
2、立即执行函数。
3、返回执行后的结果。
看起来跟call差不多,实际也差不多,只是传入参数不一样,apply接收两个参数
代码如下(示例):
Function.prototype.myApply = function(context, arg){
// 如果没有传入上下文,那么指向window,否则指向传入的上下文
let nowContext = context || window
// 避免函数名与上下文冲突,使用Symbol定义: symbol的实例是唯一的不可变的, 用于确保对象的属性不重复
let funName = Symbol()
// 将当前调用myCall的函数属性赋值给funName
nowContext[funName] = this
/// 根据参数格式化,没有传值就置为空数组
args = arg ? arg : [];
/// 根据不同的参数个数做处理
const result = args.length > 0 ? nowContext[funName](...args) : nowContext[funName]();
/// 删除方法,避免污染,不删除就等于是在context上新增了一个this方法
delete nowContext[funName];
return result
}
var name = "小李"
function getName(age) {
return this.name + age
}
let obj = {name: "小张"}
let b = getName.myApply(obj, [18])
let a = getName.myApply(null,[22])
console.log(b) // 小张18
console.log(a) // 小李22
三、bind
分析
1、第一个参数是this的指向(null或undefined则指向windows),后面是参数列表(可分多次传入)。
2、不会立即执行
3、返回一个永久改变this指向的函数
代码如下(示例):
Function.prototype.mybind = function (object) {
// 记录this,后续返回普通方法后,this指向调用者,更多关于this可以看这里
// 这里的this是调用myBind方法的函数。
const that = this
// const arg = Array.prototype.slice.apply(arguments, [1]); // 截取arguments参数列表除第一个以外的参数,与下面es6方法效果相同
const [, ...arg] = arguments // arguments是参数列表,这是es6的解构语法,拿到除第一个参数以外的参数
const newFun = function () {
// 普通函数this满足谁调用指向谁的特点,所以可以使用instanceof检测有没有使用new。
if (this instanceof newFun) {
// 如果是使用new实例化,则this指向新的实例化对象,这里的this本身就满足谁调用指向谁的特点,所以直接传递this就指向了实例化后的对象
// 下面的arguments是返回的这个方法的arguments,这主要是为了模拟【原bind返回方法可传参】
that.apply(this, [...arg, ...arguments])
} else {
// 如果不是使用new实例化的,那么就要将函数的this指向到通过myBind传递的对象上。
// 下面的arguments是返回的这个方法的arguments,这主要是为了模拟【原bind返回方法可传参】
that.apply(object, [...arg, ...arguments])
}
}
// 将内部返回的函数变为具名函数,且将返回函数的原型指向原函数的原型。
newFun.prototype = that.prototype
// 返回方法
return newFun
}
总结
call和apply会立即执行,并且会返回执行的结果
bind不会立即执行,会返回一个永久改变this指向的函数
call和bind后面都是参数列表,但是call必须一次性传完,bind的分多次传入
apply传入参数是数组的形式