call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。
除了第一个参数外，call 可以接收一个参数列表，apply 只接受一个参数数组。
let a = {
value: 1
}
function getValue(name, age) {
console.log(name)
console.log(age)
console.log(this.value)
}
getValue.call(a, 'yck', '24')
getValue.apply(a, ['yck', '24'])
bind和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 bind实现柯里化。
如何实现一个 bind 函数
对于实现以下几个函数，可以从几个方面思考
- 不传入第一个参数，那么默认为
window - 改变了 this 指向，让新的对象可以执行该函数。那么思路是否可以变成给新的对象添加一个函数，然后在执行完以后删除？
Function.prototype.myBind = function (context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
var _this = this
var args = [...arguments].slice(1)
// 返回一个函数
return function F() {
// 因为返回了一个函数，我们可以 new F()，所以需要判断
if (this instanceof F) {
return new _this(...args, ...arguments)
}
return _this.apply(context, args.concat(...arguments))
}
}
如何实现一个call函数
Function.prototype.myCall = function (context) {
var context = context || window
// 给 context 添加一个属性
// getValue.call(a, 'yck', '24') => a.fn = getValue
context.fn = this
// 将 context 后面的参数取出来
var args = [...arguments].slice(1)
// getValue.call(a, 'yck', '24') => a.fn('yck', '24')
var result = context.fn(...args)
// 删除 fn
delete context.fn
return result
}
如何实现一个apply函数
Function.prototype.myApply = function (context) {
var context = context || window
context.fn = this
var result
// 需要判断是否存储第二个参数
// 如果存在，就将第二个参数展开
if (arguments[1]) {
result = context.fn(...arguments[1])
} else {
result = context.fn()
}
delete context.fn
return result
}
call/apply
作用
用来改变函数内部 this 的指向。
特点
任何函数都可以调用这两个方法，说明它们是添加在函数原型上的方法（Function.prototype）。
console.dir(Function.prototype)
调用 call 和 apply 的函数会立即执行。
call 和 apply 的返回值就是函数的返回值。
var name = '一尾流莺'
var obj = {
name: 'warbler',
}
function foo() {
console.log(this.name);
return 'success'
}
foo.call(obj) //=> warbler
console.log(foo.call(obj)); // => success
调用 call 和 apply 指向 undefined 或者 null ，会将 this 指向 window。
function foo() {
console.log(this)
}
foo.call(undefined)
foo.call(null)
foo.apply(undefined)
foo.apply(null)
调用 call 和 apply 指向一个值类型， 会将 this 指向由它们的构造函数创建的实例。
function foo() {
console.log(this)
}
foo.call(11)
foo.call('11')
foo.call(true)
[图片上传失败...(image-15f2a1-1666010480746)]
调用 call 和 apply 指向一个引用类型， 会将 this 指向这个对象。
我们声明了一个全局变量 name 和一个全局作用域下的函数 foo 。
var name = '一尾流莺'
var obj = {
name: 'warbler',
}
function foo() {
console.log(this.name)
}
foo() //=> 一尾流莺
这段代码很好理解，name 等价于 window.name ， foo() 等价于 window.foo() ，我们打印出this.name，当前的 this 指向它的调用者 window， 也就是 window.name 得到 一尾流莺。 但是如果我想打印出 warbler 该怎么办呢？在 obj 里面再定义一个 obj.fn 么? 当然不需要， 我们只需要调用 call/apply 改变 this 的指向，指向 obj 这个对象就可以了。这个时候 this.name 等价于 obj.name ，就得到了 warbler 。
foo.call(obj) //=> warbler
foo.apply(obj) //=> warbler
call 和 apply的区别
除了传参的形式不同没什么区别。
传给fn的参数写法不同：
-
call接收多个参数，第一个为函数上下文也就是this，后边参数为函数本身的参数。 -
apply接收两个参数，第一个参数为函数上下文this，第二个参数为函数参数只不过是通过一个 数组 的形式传入的。
只要记住 apply 是以 a 开头，它传给 fun 的参数是 Array，也是以 a 开头的，就可以很好的分别这两个函数了。
手写call/apply
手写call
var name = '一尾流莺'
var obj = {
name: 'warbler',
}
function foo() {
console.dir(this);
return 'success'
}
/**
* Object()方法
* 如果传入的是值类型 会返回对应类型的构造函数创建的实例
* 如果传入的是对象 返回对象本身
* 如果传入 undefined 或者 null 会返回空对象
*/
Function.prototype._call = function(ctx, ...args) {
// 判断上下文类型 如果是undefined或者 null 指向window
// 否则使用 Object() 将上下文包装成对象
const o = ctx == undefined ? window : Object(ctx)
// 如何把函数foo的this 指向 ctx这个上下文呢
// 把函数foo赋值给对象o的一个属性 用这个对象o去调用foo this就指向了这个对象o
// 下面的this就是调用_call的函数foo 我们把this给对象o的属性fn 就是把函数foo赋值给了o.fn
//给context新增一个独一无二的属性以免覆盖原有属性
const key = Symbol()
o[key] = this
// 立即执行一次
const result = o[key](...args)
// 删除这个属性
delete o[key]
// 把函数的返回值赋值给_call的返回值
return result
}
手写 apply
之前讲过，call 和 apply 的唯一区别就是传递参数的不同，所以我们只需要改一下对参数的处理，其它的和 call 一致就可以了。
var age = 10
var obj = {
age: 20,
}
function foo(a, b) {
console.dir(this.age + a + b);
}
// 只需要把第二个参数改成数组形式就可以了。
Function.prototype._apply = function(ctx, array = []) {
const o = ctx == undefined ? window : Object(ctx)
//给context新增一个独一无二的属性以免覆盖原有属性
const key = Symbol()
o[key] = this
const result = o[key](...array)
delete o[key]
return result
}
foo(3, 4) // => 17
foo._apply(obj, [3, 4]) //=> 27
bind
作用
也是用来改变函数内部 this 的指向。
bind 和 call/apply 的区别
是否立刻执行：
-
call/apply改变了函数的this上下文后 马上 执行该函数。 -
bind则是返回改变了上下文后的函数, 不执行该函数 。
返回值的区别:
-
call/apply返回fun的执行结果。 -
bind返回fun的拷贝，并指定了fun的this指向，保存了fun的参数。
var name = '一尾流莺'
var obj = {
name: 'warbler',
}
// this 指向调用者document
document.onclick = function() {
console.dir(this); // => #document
}
// this 指向 obj
document.onclick = function() {
console.dir(this); // => #Object{name:'warbler}
}.bind(obj)
手写bind
Function.prototype._bind = function(ctx, ...args) {
// 下面的this就是调用_bind的函数,保存给_self
const _self = this
// bind 要返回一个函数, 就不会立即执行了
const newFn = function(...rest) {
// 调用 call 修改 this 指向
return _self.call(ctx, ...args, ...rest)
}
if (_self.prototype) {
// 复制源函数的prototype给newFn 一些情况下函数没有prototype，比如箭头函数
newFn.prototype = Object.create(_self.prototype);
}
return newFn
}
