call 办法
call()办法应用一个指定的 this 值(this 指向执行环境上下文)和独自给出的一个或多个参数来 调用一个函数。
语法
fun.call(thisArg[, arg1[, arg2[, …]]])
- fun:调用的函数。
- thisArg:必选的。函数运行时指定的 this 值(this 指向执行环境上下文)。
- arg1, arg2, …:可选的。指定的参数列表。
留神: 指定的 this 值并不一定是该函数执行时真正的 this 值,如果这个函数处于非严格模式下,则指定为 null 和 undefined 的 this 值会主动指向全局对象 (浏览器中就是 window 对象),值为根本类型值(数字,字符串,布尔值) 的 this 会指向该原始值的主动包装对象。
用处
应用 call 办法调用函数并且指定 this,借用本人没有的函数
function speakName() {console.log('My name is' + this.name);
}
var person1 = {name: 'chong',}
speakName(); // speakName 为全局函数,this 指向全局对象 window,因为全局作用域中不存在变量 name,所以输入:My name is
speakName.call(person1); // 输入:My name is chong
应用 call 办法 调用父构造函数,实现继承
function Product(name, price) {
this.name = name;
this.price = price;
if (price < 0) {
throw RangeError('Cannot create product' + this.name + 'with a negative price');
}
}
function Food(name, price) {Product.call(this, name, price);
this.category = 'food';
}
// 下面 Food 构造函数等同于以下代码
function Food(name, price) {
this.name = name;
this.price = price;
if (price < 0) {
throw RangeError('Cannot create product' + this.name + 'with a negative price');
}
this.category = 'food';
}
apply 办法
apply() 办法用一个指定的 this 值,以及以一个数组(或类数组对象)的模式提供的参数 调用一个函数。
语法
func.apply(thisArg, [argsArray])
- fun:调用的函数。
- thisArg:必选的。函数运行时指定的 this 值。
- argsArray 可选的。一个数组或者类数组对象,其中的数组元素将作为独自的参数传给 func 函数。
apply 办法用处和 call 办法雷同,不再赘述
bind 办法
bind() 办法 用来创立一个新的函数。bind() 的第一个参数为这个新函数的 this,其余参数将作为新函数的参数。
语法
func.bind(thisArg[, arg1[, arg2[, …]]])
- fun:调用的函数。
- thisArg:必选的。调用新函数时作为新函数的 this 值。如果应用 new 运算符结构绑定函数,则疏忽该值。当应用 bind 在 setTimeout 中创立一个函数(作为回调提供)时,作为 thisArg 传递的任何原始值都将转换为 object。如果 bind 函数的参数列表为空,或者 thisArg 是 null 或 undefined,执行作用域的 this 将被视为新函数的 thisArg。
- arg1, arg2, …:可选的。给新函数预设的初始参数列表。
返回值:返回一个原函数的拷贝,并领有指定的 this 值和初始参数。
用处
- 创立绑定函数
- 偏函数:使一个函数领有预设的初始参数
例如:
var x = 9;
var module = {
x: 81,
getX: function() {return this.x;},
addX: function(n) {return this.x + n;}
};
module.getX(); // 81
module.addX(9); // 90
var _getX = module.getX;
var _addX = module.addX;
_getX(); // 返回 9, 因为函数是在全局作用域中调用的
_addX(9); // 返回 18
// 创立一个新函数 boundGetX,并把 this 绑定为 module 对象;var boundGetX = _getX.bind(module);
boundGetX(); // 81
// 1. 创立绑定函数 boundAddX,把 this 绑定为 module 对象,并预设参数为 10;var boundAddX = _addX.bind(module, 10);
// 调用新函数时不必再传参数(传了也没用)boundAddX(); // 91
// 2. 创立一个新函数 boundAddX,把 this 绑定为 module 对象,不预设参数;var boundAddX = _addX.bind(module);
// 调用新函数时须要传参数
boundAddX(9); // 90
- 配合 setTimeout
在默认状况下,应用 window.setTimeout() 时,this 关键字会指向 window(或 global)对象。当类的办法中须要 this 指向类的实例时,你可能须要显式地把 this 绑定到回调函数,就不会失落该实例的援用。
function LateBloomer() {
// 花瓣数
this.petalCount = Math.ceil(Math.random() * 12) + 1;
}
// 在调用 bloom 1 秒钟后,调用 declare
LateBloomer.prototype.bloom = function() {window.setTimeout(this.declare, 1000);
};
LateBloomer.prototype.declare = function() {
console.log('I am a beautiful flower with' +
this.petalCount + 'petals!');
};
var flower = new LateBloomer();
flower.bloom(); // 一秒钟后, 调用 'declare' 办法
总结
call 和 apply 比拟
- 相同点:它们都能够用一个指定的 this 值调用一个函数,并且能够给函数传递一个或者多个参数。简略来说,它们的用处就是一个对象调 / 借用本身没有的函数。如果这个函数是构造函数,就能够实现继承。
- 不同点: 只在于传递参数的模式不同。call 办法传递参数是通过参数列表,apply 办法传递参数是通过数组 / 类数组。
call、apply 和 bind 比拟
- 相同点:它们都能够扭转一个函数执行时的 this,并且能够给函数传递一个或者多个参数。
- 不同点: bind 办法返回一个新的函数,须要调用才会执行。而 call 和 apply 是立刻执行。
参考
- Function.prototype.call()
- Function.prototype.apply()
- Function.prototype.bind()