持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

铃铛说点题外话

上一篇我们说了内存泄露相关的一些知识点，包括：造成内存泄露的两种可能闭包和定时器，并且对闭包进行了详细的解释，包括闭包最长使用的场景，那上一篇我们留下了几个没介绍的知识点apply和箭头函数

这一篇我就先不说主线内容先说说apply和箭头函数这两个。

铃铛说正文

我先来说说apply

这个方法实际上能改变this的指向，但是改变this指向的方法不止这一种，这里我们先说和apply相近的几个方法bind和call。下面我们详细的说说这三种的区别

bind

首先，先说说bind和其余两个的区别：bind区别于apply和call的最大区别就是bind不是立即执行，而是返回一个函数，需要调用才能执行。

var obj = {
    name: "xiaobai",
    foo: function () {
        console.log(this)
    }
}

这里我们以obj对象为基础，来详细的看看这三个区别，首先我们直接调用

obj.foo()   //{name: "xiaobai", foo: ƒ}

直接调用发现this是指向obj对象，如果使用bind改变this指向呢

var result = obj.foo.bind("abc")
result()

这里this的指向是String {"abc"},bind一定是调用返回的函数才可以改变this指向。

apply和call

调用这两个方法的一定是函数

他俩的第一个参数一定是对象，也就是this要指向的对象。

apply只接收两个参数，第二个参数是以数组或者类数组的形式传递，如果是多个参数只取第一个参数

call的参数则是一个一个连续的接收传递，如果传递的是一个数组，那么会被当做为第一个参数，后续为Undefined。

obj.foo.apply("abc")
obj.foo.call("abc")

这里的this指向也是String{"abc"}

那么第二个之后的参数怎么使用呢，还记上一篇的防抖和闭包吗？我们这里用上一节课的内容来说说apply和call

防抖

function debounce(fn, delay) {
    var timer = null
    return function () {
        clearTimeout(timer)
        setTimeout(() => {
            fn.apply(this, arguments)
        }, delay)
    }
}

这里面的apply可可以使用call替代

 fn.apply(this, ...arguments)

跟铃铛说再见

这一篇我们对三种改变this的方法进行了一个详细的解释，这种方式我们也可以称为显示绑定，这里也说了改变this的不止这种绑定方式，我们下一篇再说。今天就先说到这里。

细说JS系列（十二）

铃铛说点题外话

铃铛说正文

跟铃铛说再见