美文网首页
JS中的call、apply、bind方法

JS中的call、apply、bind方法

作者: 另一只小白 | 来源:发表于2017-05-24 00:42 被阅读30次

    一、call()和apply()方法

    • call方法:

    语法:call(thisObj,[,arg1[, arg2]...)

    第一个参数是在其中运行函数的作用域,其余参数直接传递给函数,使用call()方法时,传递给函数的参数必须逐个列举出来

    定义:在特定的作用域中调用函数,实际上等于设置函数体内的this对象的值

    如果没有提供 thisObj参数,那么 Global 对象被用作 thisObj

    • apply方法:

    语法:call(thisObj,[,argArray])

    第一个参数是在其中运行函数的作用域,另一个参数是数组。其中,第二个参数可以使Array的实例,也可以是arguments对象

    如果没有提供argArraythisObj 任何一个参数,那么 Global 对象将被用作thisObj, 并且无法被传递任何参数。

    • code1
    window.name = "func";
    function func() {
      console.log(this.name);
    }
    func(); // func;
    
    var obj = {name:'obj'};
    func.call(obj); //obj   等价于obj.func()
    
    • code2
    function add(a,b)  
    {  
        return a+b;
    }  
    function calladd(a,b)  
    {  
        return add.call(this,a,b)
    }  
    alert(calladd(10,10)); //20
    

    calladd执行add()函数时传入了this作为this值(因为是在全局作用域中调用的,所以传入的就是window对象)和两个参数。

    • code
    function add(a,b)  
    {  
        return a+b;
    }  
    function add1(a,b)  
    {  
        return add.apply(this,arguments)
    }  
    function add2(a,b)  
    {  
        return add.apply(this,[a,b])
    }  
    alert(add1(10,10)); //20
    alert(add2(10,10)); //20
    

    add1()执行apply()函数时传入了this作为this值(因为是在全局作用域中调用的,所以传入的就是window对象)和argumentsadd2()传入的是数组)对象。

    二、bind方法

    语法:fun.bind(thisArg[, arg1[, arg2[, ...]]])

    简单地看一下这些参数的含义

    thisArg

    当绑定函数被调用时,该参数会作为原函数运行时的this指向,当使用new 操作符调用绑定函数时,该参数无效。

    arg1, arg2, ...

    当绑定函数被调用时,这些参数将传递给被绑定的方法。

    绑定this作用域示例

    window.name = 'windowName'
    
    let obj = {
      name: 'qianlongo',
      showName: function() {
        console.log(this.name)
      }
    }
    
    obj.showName() // qianlongo
    
    let showName = obj.showName
      showName() // windowName
    
    let bindShowName = obj.showName.bind(obj)
      bindShowName() // qianlongo
    

    通过以上简单示例,我们知道了第一个参数的作用�就是绑定函数运行时候的this指向

    第二个参数开始起使用示例

    let sum = (num1, num2) => {
      console.log(num1 + num2)
    }
    
    let bindSum = sum.bind(null, 1)
    bindSum(2) // 3
    

    bind可以使一个函数拥有预设的初始参数。这些参数(如果有的话)作为bind的第二个参数跟在this(或其他对象)后面,之后它们会被插入到目标函数的参数列表的开始位置,传递给绑定函数的参数会跟在它们的后面。

    参数的使用基本上明白了,我们再来看看使用new去调用bind之后的函数是怎么回事。

    function Person(name, sex) {
      console.log(this) // Person {}
      this.name = name
      this.sex = sex
      return this;
    }
    let obj = {
      age: 100
    }
    let bindPerson = Person.bind(obj, 'qianlongo')
    
    let p = new bindPerson('boy')
    
    console.log(p) // Person {name: "qianlongo", sex: "boy"}
    

    有没有发现bindPerson内部的this不再是bind的第一个参数obj,此时obj已经不再起效了,而是新建了一个Person对象。

    相关文章

      网友评论

          本文标题:JS中的call、apply、bind方法

          本文链接:https://www.haomeiwen.com/subject/mhcnxxtx.html