【call,apply,bind】手写call,apply,bind的方法

系列文章目录

其它部分在这儿~~~ 持续更新中~~

手写Javascript的API分析

---

前言

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

二、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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

三、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
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

---

总结

call和apply会立即执行，并且会返回执行的结果

bind不会立即执行，会返回一个永久改变this指向的函数

call和bind后面都是参数列表，但是call必须一次性传完，bind的分多次传入

apply传入参数是数组的形式