JaveScript 笔记 call apply

dancebit

已于 2022-11-24 15:59:50 修改

阅读量114

点赞数 1

文章标签： javascript 开发语言

于 2022-11-24 15:55:42 首次发布

本文链接：https://blog.csdn.net/ai5945fei/article/details/128015208

版权

本文详细介绍了JavaScript中this的指向问题，以及call、apply、bind三种方法的使用场景和区别。通过示例代码演示了如何改变函数内部this的指向，特别是在需要将对象作为上下文传递到函数中时的应用。此外，还特别提到了apply的特殊用途，即在需要将数组转换为可变参数列表时的便利性。

摘要由CSDN通过智能技术生成

参考博客- aveScript中this指向以及call(),apply()、bind() 的用法

1、总结：

call,apply,bind函数目的都是为了将对象传递到函数里，只是带参方式不同
js 函数内部如果使用了this，就不能直接调用函数，因为这样找不到this

2、call示例

   let obj = {
      name: 'xiaohua',
    }
    function fun_2(param) {
      console.log(obj == this) //true
      this.value = param
      console.log("fun_2>", this ," name:" + this.name) //fun_2> {name: "xiaohua", value: 123}  name:xiaohua
    }
    fun_2.call(obj, 123)
    console.log(obj) //{name: "xiaohua", value: 123}

3、错误示例

如果直接执行函数会报错不能设置属性value，因为this不存在

    function fun_3(param) {
      console.log(obj == this,this) //false undefined
      this.value = param
      console.log("fun_2>", this ," name:" + this.name)
    }
    fun_3(5)
    //报错   TypeError: Cannot set property 'value' of undefined

4、对比测试

    let id = 0
    function fun_4(...param) {
      id+=1
      this.id = id
      console.log("--------name: "+this.name+"-------------")
      console.log('this>',this)
      console.log('param>',param)
    }
    console.log('------------')
    let v4 = new fun_4(2, 3, 4)
    console.log('v4',v4)
    fun_4.apply({name:"applay"}, [1, 2, 3, 4])//数组方式传入可变参数列表
    fun_4.call({name:"call"}, 1, 2, 3, 4) //正常可变参数传入
    fun_4.bind({name:"bind"}, 1, 2, 3, 4)() //也是正常可变参数方式传入

4.1、输出结果

--------name: undefined-------------
index.js:131 this> fun_4 {id: 1}
index.js:132 param> (3) [2, 3, 4]
index.js:136 v4 fun_4 {id: 1}
index.js:130 --------name: applay-------------
index.js:131 this> {name: "applay", id: 2}
index.js:132 param> (4) [1, 2, 3, 4]
index.js:130 --------name: call-------------
index.js:131 this> {name: "call", id: 3}
index.js:132 param> (4) [1, 2, 3, 4]
index.js:130 --------name: bind-------------
index.js:131 this> {name: "bind", id: 4}
index.js:132 param> (4) [1, 2, 3, 4]

5、apply特殊使用说明

apply可以用数组的方式传入可变参数，

一些函数定义时就是可变参数方式传入数据，但我们是数组时，总不能一个一个打出来吧。所以apply函数就有大作用了。

数组转字符串的函数原型如下：

String.fromCharCode(...codes: number[]): string

一般使用格式，

      var str = String.fromCharCode(0x31,0x32,0x33,0x34)
      console.log(str) // 1234

如果是一个数组，真的要一个一个打进去？难受！！！

    var array = [0x31, 0x32, 0x33, 0x34]
    var str2 = String.fromCharCode.apply(null,array)
    console.log(str2) // 1234

像这样就能搞定了。apply的this对象不需要传进去，用不到