call()、apply()和bind()的区别

JS中改变this指向方法的异同
博客介绍了JS中改变函数this指向的相关内容。call、apply、bind三个方法可改变this指向,apply和call区别在于第二个参数传递方式,apply需是数组或类数组,call允许传递参数列表,还提及了bind与call、apply的区别。

在js中,call、apply、bind这三个方法主要是为了改变函数中this的指向

var a = {
    name: "阿里巴巴",
    fn:function(){
        console.log(this.name);
    }
}
var b = a.fn
b() //undefined
b.call(a)  // 阿里巴巴
b.apply(a)  // 阿里巴巴
b.bind(a)  // 没有被打印
  • apply 和 call 的区别
    是第二个参数的传递方式不同,apply 的第二个参数必须是一个数组(或者类数组),而 call 允许传递一个参数列表
    var a = {
         name:"阿里巴巴",
         fn:function(m,n){
             console.log(m+n);
         }
     }
     var b = a.fn;
     b.call(a,6,6)  // 12
    
     b.apply(a,[6,4])  // 10
    
  • bind和call、apply的区别
    call和apply都是立即执行,而bind则是返回一个函数
      var a = {
          name: "阿里巴巴",
          fn:function(){
              console.log(this.name);
          }
      }
      var b = a.fn
      b.bind(a)  // 没有被打印
      
      var c = b.bind(a)
      console.log(c)
      //function (){
          //console.log(this.name);
      //}
      
      c()  // 阿里巴巴
    
### Function.prototype.call、Function.prototype.apply Function.prototype.bind区别 在 JavaScript 中,`call`、`apply` `bind` 是函数对象的原型方法,它们都用于控制函数执行时的 `this` 上下文。尽管它们的功能相似,但在使用方式行为上存在关键差异。 #### 1. Function.prototype.call `call` 方法允许调用一个函数,并指定其运行时的 `this` 值以及一系列参数列表。这些参数是以逗号分隔的形式传入的。 例如: ```javascript function greet(greeting, punctuation) { console.log(greeting + ', ' + this.name + punctuation); } const person = { name: 'Alice' }; greet.call(person, 'Hello', '!'); // 输出 "Hello, Alice!" ``` 这里 `greet` 函数通过 `call` 被调用,`this` 指向了 `person` 对象,并且传递了 `'Hello'` `'!'` 作为参数[^4]。 #### 2. Function.prototype.apply `apply` 方法与 `call` 类似,也用于调用函数并设置 `this` 值,但它的参数是一个数组(或类数组对象)。这意味着你可以将参数以数组形式传递给 `apply`。 例如: ```javascript function greet(greeting, punctuation) { console.log(greeting + ', ' + this.name + punctuation); } const person = { name: 'Alice' }; const args = ['Hello', '!']; greet.apply(person, args); // 输出 "Hello, Alice!" ``` 在这个例子中,`args` 数组包含了所有要传递给 `greet` 函数的参数[^4]。 #### 3. Function.prototype.bind 不同于 `call` `apply`,`bind` 不会立即调用函数,而是创建一个新的函数实例,这个新函数的 `this` 值被永久绑定到提供的值,并且可以预设一些参数。 例如: ```javascript function greet(greeting, punctuation) { console.log(greeting + ', ' + this.name + punctuation); } const person = { name: 'Alice' }; const boundGreet = greet.bind(person, 'Hello'); boundGreet('!'); // 输出 "Hello, Alice!" ``` 这里 `greet` 函数通过 `bind` 创建了一个新的函数 `boundGreet`,其中 `this` 被绑定到了 `person`,并且 `'Hello'` 被预设为第一个参数。 #### 总结 - **`call`**:调用函数并指定 `this`,参数以逗号分隔。 - **`apply`**:调用函数并指定 `this`,参数以数组形式提供。 - **`bind`**:返回一个新函数,该函数的 `this` 被绑定,并且可以预设参数。 每种方法都有其适用场景。当你需要立即调用函数并且知道参数时,可以选择 `call` 或 `apply`;而当你想要创建一个具有固定上下文的新函数时,则应选择 `bind`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值