JavaScript Tips (3)

已注销
62 阅读3分钟

  1. 本文是学习笔记，但是因为太过杂乱所以起了个综合性的名字，预知到未来查知识点的时候会头大如斗，但本着一切皆无所谓的态度，先记下再整理。(本章内容主要是函数)

  2. JS 中有 ... 这样的操作符，在数组中的话，叫 展开（spread）操作符；在函数中的话叫做 剩余（rest）操作符。作用略有不同，但总的来说，与省略号的抽象意义差不多一样。

    // 展开操作符
const array1 = [1,2,3]
const array2 = [...array1,4]
console.log(array2) // 输出：[1,2,3,4] 
// 剩余操作符
function sum(...args){
    let total = 0
    for(let arg of args){
        total += arg
    }
    return total
}
console.log(sum(1,2,3,4,5)) // 输出：15 重点是每一个实参都会参与

    从上面的例子来看，展开操作符很好理解，就是把数组展开而已，这个操作符可以放在任何地方，开头、中间、最后都行；

    剩余操作符的话是一个数组，实参将会传到数组中。可以想一下反例，如果不使用，那么传入参数的数量如果大于形参的话，就不会发生任何事情，而使用这个操作符，就可以使每一个实参都有作用。注意，这个操作符只能用在形参的最后一位。

  3. this 的指向。在方法中，它的指向是该对象；在函数中，它的指向是全局、window对象；在构造函数中，它的指向是通过 new 操作符创建的新的空对象上。

    注意，当对象中的方法使用了回调函数，那么回调函数中的this指向就不是当前对象了，而是window 。

    const example = {
    name:'张三',
    tags:['大众名'，'法外狂徒']，
    show(){
        this.tags.forEach(funcion(tag){
            console.log(this.name,tag)
        },this)
    }
}
​

    如果不给 forEach 传第二个参数（this绑定）的话， 是无法在回调函数中打印出 this.name 的，因为此时 this 指向是 window ， 当传入第二个参数，绑定了 this 指向，就可以在回调函数中调用当前对象的属性了；注意第二个参数并不在回调函数中，它属于方法 show()。

  4. 接着上面的讨论，如果回调函数中并没有关于绑定 this 指向的参数，应该如何绑定 this 呢？很常见的一种做法是在 show() 方法中先声明一个变量指定 this ，const self = this ，然后在需要绑定 this 的地方使用变量 self ，比如 self.name 。

    同样，如果上面例子中的回调函数中使用箭头函数的话，那么就不用在意 this 绑定的事情了，因为箭头函数它自身没有 this 指向，它会从它的容器函数中继承 this 。

  5. 改变指向的三种方法。JS 内置了三种方法，分别是 .call() 、.apply() 和 .bind() 。

    • f.call('第一个参数是 this 指向'，'后面的参数是传参')

    • f.apply('第一个参数是 this 指向'，['后面的参数是传参，要用数组形式'])

    • f.bind('第一个参数是 this 指向') 注意， bind 方法会返回一个函数，所以需要用函数的方法去调用它 比如 f.bind('this指向')();

avatar
文章
阅读
粉丝