js中call()、apply()、bind()函数之间的区别

小灰灰 2022-11-06 00:55 144阅读 0赞

### 文章目录 ###

*  call()函数
 *   *  call()函数语法
     *  call()函数的应用
     *  带参数的 call() 方法
 *  apply()函数
 *   *  apply()函数语法
     *  apply()函数的应用
     *  带参数的 apply() 方法
 *  bind()函数
 *   *  bind()函数语法
     *  bind()函数的应用
     *  带参数的 bind() 方法
 *  call()、apply()、bind()函数之间的区别
 *  \[用原生JS实现call() apply() bind()\](https://blog.csdn.net/PILIpilipala/article/details/114481198)

# call()函数 #

`call()` 方法是预定义的 JavaScript 方法。它可以用来调用所有者对象作为参数的方法。

通过 `call()`,我们能够使用属于另一个对象的方法。

## call()函数语法 ##

`fun.call(thisArg, arg1, arg2, ...)`

*  `thisArg`:在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为`null`和`undefined`的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。
 *  `arg1, arg2, ...`指定的参数列表。

## call()函数的应用 ##

var person = { 
        firstName:"Li",
        lastName: "Si",
        fullName: function () { 
            return this.firstName + " " + this.lastName;
        }
    }
    person.fullName();		
    // 将返回 "Li Si"

> fullName 属性是一个方法。person 对象是该方法的拥有者。  
> fullName 属性属于 person 对象的方法。

> 本例调用 person 的 fullName 方法，分别用于 person1 person2返回的结果

## 带参数的 call() 方法 ##

var person = { 
      fullName: function(city, country) { 
        return this.firstName + " " + this.lastName + "," + city + "," + country;
      }
    }
    var person1 = { 
      firstName:"Li",
      lastName: "Si"
    }
    person.fullName.call(person1, "BeiJing", "China");
    //返回 Li Si,Beijing,China

# apply()函数 #

apply() 方法与 call() 方法非常相似

## apply()函数语法 ##

`fun.apply(thisArg, [argsArray])`

*  `thisArg`： 在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this值，如果这个函数处于非严格模式下，则指定为 null 或 undefined时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。
 *  `argsArray`: 一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

## apply()函数的应用 ##

## 带参数的 apply() 方法 ##

var person = { 
      fullName: function(city, country) { 
        return this.firstName + " " + this.lastName + "," + city + "," + country;
      }
    }
    var person1 = { 
      firstName:"Li",
      lastName: "Si"
    }
    person.fullName.apply(person1, ["BeiJing", "China"]);
    //返回 Li Si,Beijing,China

# bind()函数 #

`bind()`方法，用来创建一个函数的实例----(新函数)，其新函数的this值会被绑定到给定bind()的第一个参数。

## bind()函数语法 ##

`fun.bind(thisArg[, arg1[, arg2[, ...]]])`

*  `thisArg` :当绑定函数被调用时，该参数会作为原函数运行时的this指向。当使用new 操作符调用绑定函数时，该参数无效。
 *  `arg1, arg2, ...`: 当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。

## bind()函数的应用 ##

var obj = { color: 'blue'}; 
    function sayColor() { alert(this.color)}; 
    //此时this指向window
    var objColor = sayColor.bind(obj); 
    objColor(); 
    // blue

## 带参数的 bind() 方法 ##

var m = {     
      "x" : 1 
    }; 
    function foo(y) {  
      console.log(this.x + y); 
    } 
    foo.apply(m, [5]); 
    //6
    foo.call(m, 5); 
    //6
    var foo1 = foo.bind(m, 5); 
    foo1();
    //6

# call()、apply()、bind()函数之间的区别 #

**相同点：**

*  三者都是用于改变函数体内this的指向
 *  如果第一个参数没有传入，在全局环境下，那么默认this指向 window（浏览器） / global（node）(非严格模式)

**区别：**

*  使用apply或call方法，那么this指向他们的第一个参数，apply的第二个参数是一个参数数组，call的第二个及其以后的参数都是数组里面的元素，需要全部列举出来。apply和call的调用返回函数执行结果
 *  bind不会立即调用，而是返回一个新函数，称为绑定函数，其内的this指向为创建它时传入bind的第一个参数，而传入bind的第二个及以后的参数作为原函数的参数来调用原函数。

# [用原生JS实现call() apply() bind()][JS_call_ apply_ bind] #

[JS_call_ apply_ bind]: https://blog.csdn.net/PILIpilipala/article/details/114481198