JavaScript 中 call()、apply()、bind() 的用法

简介: JavaScript 中 call()、apply()、bind() 的用法
+关注继续查看

1 apply

Function.apply(obj,args)

复制

apply方法接收两个参数

  1. obj:这个对象将代替Function类里this对象
  2. args:这个是数组,它将作为参数传给Function(args-->arguments)

不带第一个参数

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 将返回 "Bill Gates"

复制

带全部参数

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);

复制


2 call

Function.call(obj[,params...])

复制

call方法接收两个参数

  1. obj:这个对象将代替Function类里this对象
  2. args:这个是一个参数列表

不带第一个参数

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
var person2 = {
    firstName:"Steve",
    lastName: "Jobs",
}
person.fullName.call(person1);  // 将返回 "Bill Gates"

复制

带全部参数

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");

复制


3 bind

Function.bind(obj[,params...])

复制

bind是ES5 新增的一个方法,它的传参和call类似,也是接收两个参数。

  1. obj:这个对象将代替Function类里this对象
  2. args:这个是一个参数列表

不带第一个参数

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
var person2 = {
    firstName:"Steve",
    lastName: "Jobs",
}
person.fullName.call(person1)();  // 将返回 "Bill Gates"

复制

带全部参数

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA")();

复制

可以从上面看出,使用方法基本和call一致,只是后面多了(),其实是bind不会立即执行对应的函数,只是返回对函数的引用。那为什么要引入bind呢,是因为call和apply会自动执行目标函数,从而无法绑定在事件上,因为事件是我们手动触发的,而bind不会自动执行目标函数。

相关文章
|
5天前
|
JavaScript 前端开发 API
JavaScript中的new,bind,call,apply的原理及简易实现
JavaScript中的new,bind,call,apply的原理及简易实现
35 0
|
25天前
|
JavaScript
热点面试题:JS 中 call, apply, bind 概念、用法、区别及实现?
热点面试题:JS 中 call, apply, bind 概念、用法、区别及实现?
|
30天前
|
JavaScript 前端开发
JavaScript中的this指向,call、apply、bind的简单实现
JavaScript中的this指向,call、apply、bind的简单实现
15 0
|
1月前
|
JavaScript
JS 手写实现call,apply方法
JS 手写实现call,apply方法
17 0
|
2月前
|
JavaScript 前端开发
JavaScript call、apply 和 bind 的区别
JavaScript call、apply 和 bind 的区别
|
4月前
|
前端开发 JavaScript
手写javascript中的call、apply、bind方法~
手写javascript中的call、apply、bind方法记录
31 1
|
5月前
|
JavaScript 前端开发
JavaScript学习笔记(十) call、apply、bind
JavaScript学习笔记(十) call、apply、bind
49 0
|
9月前
|
JavaScript 前端开发 CDN
JavaScript - 手写call、apply和bind函数
JavaScript - 手写call、apply和bind函数
94 0
|
10月前
|
存储 JavaScript 前端开发
JavaScript手写call,apply,bind方法
JavaScript手写call,apply,bind方法
|
10月前
|
JavaScript
js之call() apply() bind() $proxy()的总结
由以上代码可以总结出: 1. foo.call()与foo.apply()原理是一样的,将foo函数的this指向指定的对象(或者表述为在指定对象的上下文环境中运行foo函数); 2. bind(obj)与$proxy(obj)不同的是他们返回的是一个新的函数,该函数的this执行指定的对象obj。
89 0
js之call() apply() bind() $proxy()的总结
相关产品
云迁移中心
推荐文章
更多