call、apply与bind在理解
call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。
fun.call(thisArg[, arg1[, arg2[, ...]]])
apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数
fun.apply(thisArg, [argsArray])
bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数
fun.bind(thisArg[, arg1[, arg2[, ...]]])
当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时，该参数无效。
特点：
返回一个函数
可以传入参数
1、理解
call方法原理
模拟Function中内置的call方法，写一个myCall方法，探讨call方法的执行原理
function sum(){
console.log(this);
}
function fn(){
console.log(this);
}
var obj = {name:'iceman'};
Function.prototype.myCall = function (context) {
// myCall方法中的this就是当前我要操作和改变其this关键字的那个函数名
// 1、让fn中的this关键字变为context的值->obj
// 让this这个函数中的"this关键字"变为context
// eval(this.toString().replace("this","obj"));
// 2、让fn方法在执行
// this();
};
fn.myCall(obj);// myCall方法中原来的this是fn
sum.myCall(obj);// myCall方法中原来的this是sum
call方法经典例子
function fn1() {
console.log(1);
}
function fn2() {
console.log(2);
}
fn1.call(fn2); // 1
首先fn1通过原型链查找机制找到Function.prototype上的call方法，并且让call方法执行，此时call这个方法中的this就是要操作的fn1。在call方法代码执行的过程过程中，首先让fn1中的“this关键字”变为fn2，然后再让fn1这个方法执行。
fn1.call.call(fn2); // 2
2、区别
三个函数存在的区别, 用一句话来说的话就是: bind是返回对应函数, 便于稍后调用; apply, call则是立即调用,apply是call的一层封装，可以传数组。所以call比较快。 除此外, 在 ES6 的箭头函数下, call 和 apply 的失效, 对于箭头函数来说:
- 函数体内的 this 对象, 就是定义时所在的对象, 而不是使用时所在的对象;
- 不可以当作构造函数, 也就是说不可以使用 new 命令, 否则会抛出一个错误;
- 不可以使用 arguments 对象, 该对象在函数体内不存在. 如果要用, 可以用 Rest 参数代替;
- 不可以使用 yield 命令, 因此箭头函数不能用作 Generator 函数;
call 方法比 apply 快的原因是 call 方法的参数格式正是内部方法所需要的格式
3、模拟
思路
- 将函数设为对象的属性
- 执行该函数
- 删除该函数
call
Function.prototype.call2 = function (context) {
var context = context || window;//null等传入指向window
context.fn = this;//将函数设为对象的属性
var args = [];
for(var i = 1, len = arguments.length; i < len; i++) {
args.push('arguments[' + i + ']');
}
var result = eval('context.fn(' + args +')');//执行该函数
delete context.fn; // 删除函数
return result;
}
apply
Function.prototype.apply = function (context, arr) {
var context = Object(context) || window;
context.fn = this;
var result;
if (!arr) {
result = context.fn();
}
else {
var args = [];
for (var i = 0, len = arr.length; i < len; i++) {
args.push('arr[' + i + ']');
}
result = eval('context.fn(' + args + ')')
}
delete context.fn
return result;
}
bind
一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。
Bound.prototype = this.prototype，我们直接修改 Bound.prototype 的时候，也会直接修改绑定函数的 prototype。这个时候，我们可以通过一个空函数来进行中转
Function.prototype.bind = Function.prototype.bind || function (context) {
if (typeof this !== "function") {
throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
}
var self = this;
var args = Array.prototype.slice.call(arguments, 1);//先取到bind时传参,bar.bind(foo, 'daisy');
var F = function () {};//继承用空函数来转
var Bound = function () {
var bindArgs = Array.prototype.slice.call(arguments);//在取到返回函数,bindFoo('18');
//如果是new的this指向F,this指向构造函数，如果不是指向要改变的this
return self.apply(this instanceof F ? this : context, args.concat(bindArgs)//合并参数);
}
F.prototype = this.prototype;
Bound.prototype = new F();
return Bound;
};
4、案例
1、柯里化
var currying = function( fn ){
var args = [];
return function(){
if ( arguments.length === 0 ){
return fn.apply( this, args );
}else{
[].push.apply( args, arguments );
return arguments.callee;
}
}
};
var cost = (function(){
var money = 0;
return function(){
for ( var i = 0, l = arguments.length; i < l; i++ ){
money += arguments[ i ];
}
return money;
}
})();
var cost = currying( cost ); // 转化成 currying 函数
cost( 100 ); // 未真正求值
cost( 200 ); // 未真正求值
cost( 300 ); // 未真正求值
alert ( cost() ); // 求值并输出：
var overtime = (function() {
var args = [];
return function() {
if(arguments.length === 0) {
var time = 0;
for (var i = 0, l = args.length; i < l; i++) {
time += args[i];
}
return time;
}else {
[].push.apply(args, arguments);
}
}
})();
overtime(3.5); // 第一天
overtime(4.5); // 第二天
overtime(2.1); // 第三天
//...
console.log( overtime() ); // 10.1
2、debounce 函数去抖
var debounce = function(idle, action){
var last
return function(){
var ctx = this, args = arguments
clearTimeout(last)
last = setTimeout(function(){
action.apply(ctx, args)
}, idle)
}
}
var timer = null;
window.onscroll = function(){
if (timer) {
// 清除未执行的逻辑，重新执行下一次逻辑，不论上一次是否执行完毕
clearTimeout(timer);
}
timer = setTimeout(function(){
//执行逻辑
}, 300);
};
3、throttle 函数节流
var throttle = function ( fn, interval ) {
var __self = fn, // 保存需要被延迟执行的函数引用
timer, // 定时器
firstTime = true; // 是否是第一次调用
return function () {
var args = arguments,
__me = this;
if ( firstTime ) { // 如果是第一次调用，不需延迟执行
__self.apply(__me, args);
return firstTime = false;
}
if ( timer ) { // 如果定时器还在，说明前一次延迟执行还没有完成
return false;
}
timer = setTimeout(function () { // 延迟一段时间执行
clearTimeout(timer);
timer = null;
__self.apply(__me, args);
}, interval || 5000 );
};
};
window.onresize = throttle(function(){ console.log( 1 ); }, 5000 );
var can = true;
window.onscroll = function(){
if(!can){
//判断上次逻辑是否执行完毕，如果在执行中，则直接return
return;
}
can = false;
setTimeout(function(){
//执行逻辑
can = true;
}, 100);
};
4、反柯里化(uncurring)
Function.prototype.uncurring = function() {
var self = this; //self此时是Array.prototype.push
return function() {
var obj = Array.prototype.shift.call(arguments);
//obj 是{
// "length": 1,
// "0": 1
//}
//arguments的第一个对象被截去(也就是调用push方法的对象),剩下[2]
return self.apply(obj, arguments);
//相当于Array.prototype.push.apply(obj, 2);
};
};
//测试一下
var push = Array.prototype.push.uncurring();
var obj = {
"length": 1,
"0" : 1
};
push(obj, 2);
console.log( obj ); //{0: 1,1: 2, length: 2 }
5、取数组最大值
Math.max(1,2,3,4);
利用apply可以把传数组的方法
var max = Math.max.apply(null, ary);
Math.max(1,2,3,4);
var max = eval("Math.max(" + ary.toString() + ")");
在非严格模式下，给apply的第一个参数为null的时候，会让max/min中的this指向window，然后将ary的参数一个个传给max/min
6、将类数组转换数组
slice在不穿参的情况下是复制数组
Array.prototype.slice = function() {
var result = [];
for(var i = 0; i < this.length; i++){
result[i] = this[i] };
return result;
}
[1,2,3,4].slice()
=> [1, 2, 3, 4]
var obj = {length:'2', '0': 'aa', '1': 'bb'}
[].slice.call(obj)
=> ["aa", "bb"]
function listToArray(likeAry) {
var ary = [];
try {
ary = Array.prototype.slice.call(likeAry);
} catch (e) {
for (var i = 0; i < likeAry.length; i++) {
ary[ary.length] = likeAry[i];
}
}
return ary;
}
7、push的理解
Array.prototype.push = function(str){ return this.concat(str) }
[1,2,3].push(1)
=>[1, 2, 3, 1]
[].push.call([1,2,3],3)
=> [1, 2, 3, 3]
5、caller与callee
caller
返回一个对函数的引用，该函数调用了当前函数。
对于函数来说，caller 属性只有在函数执行时才有定义。
如果函数是由顶层调用的，那么 caller 包含的就是 null 。
如果在字符串上下文中使用 caller 属性，那么结果和 functionName.toString 一样，也就是说，显示的是函数的反编译文本。
// caller demo {
function callerDemo() {
if (callerDemo.caller) {
var a= callerDemo.caller.toString();
alert(a);
} else {
alert("this is a top function");
}
}
function handleCaller() {
callerDemo(); //"function handleCaller() { callerDemo();}"
}
callee
返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。
ES5 提示: 在严格模式下，arguments.callee 会报错 TypeError，因为它已经被废除了
callee 属性是 arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿名函数的递归或者保证函数的封装性
arguments.length是实参长度，arguments.callee.length是形参长度
在递归中有很好的应该
