区别call,apply,bind

一、探索call方法原理

Function.prototype.call = function(obj) {
// 1、让fn中的this指向obj
// eval(this.toString().replace("this","obj"));

// 2、让fn方法再执行
// this();
}
function fn1() {
  console.log(1);
  console.log(this);
}
function fn2() {
  console.log(2);
  console.log(this);
}
fn1.call(); //1,this指向window
fn1.call(fn2); //1,原来的this指向fn1,fn1.call(fn2)把this指向fn2,再让fn1方法执行。

fn1.call.call(); //报错了,fn1.call.call is not a function。
fn1.call.call(fn2); //2
/*设fn1.call = test;
test.call(fn2)原来的this指向test,test.call(fn2)把this指向fn2,再让test方法执行,即fn1.call的内部this()执行,即fn2()执行。
*/

二、call,apply,bind的调用语法

function fn(num1, num2) {
  console.log(num1 + num2);
  console.log(this);
}
//call方法
fn.call(obj , 100 , 200);
//apply方法
fn.apply(obj , [100, 200]);
//bind方法
var tempFn = fn.bind(obj, 1, 2);
tempFn();
//或者fn.bind(obj, 1, 2)();

1、相同点

  • apply、call、bind三者都是用来改变函数的this对象的指向的;
  • apply、call、bind三者第一个参数都是this要指向的对象,也就是想指定的上下文;
  • apply、call、bind三者都可以利用后续参数传参。

2、不同点

  • call在给fn传递参数的时候,是一个个的传递值的;而apply不是一个个传的,而是把值放在数组中,传过去的。
  • 明确知道参数数量时用call;不确定参数数量时用apply,然后把参数push进数组并传递进去,函数内部也可以通过arguments这个数组来遍历所有的参数。
  • bind是返回对应函数,便于稍后调用;apply、call则是立即调用。
  • bind这个方法在IE6~8下不兼容。在Javascript中,多次bind()是无效的,因为bind的实现,相当于使用函数在内部包了一个call/apply,第二次bind()相当于再包住第一次bind(),故第二次以后的bind是无法生效的。

四、应用场景
1、验证是否是数组

function isArray(obj){
  return Object.prototype.toString.call(obj) === ‘[object Array]‘;
}

2、获取数组最大最小值

var numbers = [5, 458 , 120 , -215];
var maxInNumbers = Math.max.apply(Math, numbers), //458
maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

3、数组追加

var arr1 = [12 , "foo" , {name "Camille"} , -2458];
var arr2 = ["HouYi" , 555 , 100];
Array.prototype.push.apply(arr1, arr2);

4、伪数组使用数组方法

//定义一个log方法,让它可以代理console.log方法,常见的解决方法是:
function log(msg) {
  console.log(msg);
}
log(‘msg1‘); //msg1
log(‘msg1‘,‘msg2‘); //msg1
//当不确定传入参数的个数时,上面的方法就失效了,于是想到了apply.
function log(){
  console.log.apply(console, arguments);
};
log(‘msg1‘); //msg1
log(‘msg1‘,‘msg2‘); //msg1 msg2
//如果给log消息添加一个"app_"前辍,这时可以想到Array.prototype.slice.call可以把arguments伪数组转化为标准数组,再使用数组方法unshift即可。
function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift(‘app_‘);
  console.log.apply(console, args);
};
log(‘msg1‘); //app_ msg1
时间: 2024-11-09 01:01:13

区别call,apply,bind的相关文章

javascript中的call(),apply(),bind()方法的区别

之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再进行补充. 1. 改变this的指向 var obj = { name : '张三', age : 17, myFun : function () { console.log(this.name + ' ' + this.age); } } var obj2 = { name : '李四', age

js中的call,apply,bind区别

在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:apply . call .bind 三者都是用来改变函数的this对象的指向的:apply . call .bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文(函数的每次调用都会拥有一个特殊值--本次调用的上下文(context)--这就是this关键字的值.):apply . ca

javascript中call,apply,bind的区别

在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对象.3.都可以利用后续参数传参.那么他们的区别在哪里的,先看一个例子. var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " , &qu

call,apply,bind

call,apply,bind 一.call&apply call, apply都属于Function.prototype的方法,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性啦. 如果不明白,请见“Javascript之一切皆为对象3”. 而且它们的作用都是一样的,只是使用方式不同而已. 作用:借用别人的方法来调用,就像自己有这个方法一样. 咦,那它们怎样才能达到这目的呢? 对象. 对象? 是的,其实就是改变执行上下

call() , apply() , bind() 方法,

先来说说call() 和 apply()方法: 在<javascript高级程序设计>中有提到:函数也是对象,函数原型链的顶层实际上是指向Object的.既然函数是对象,那么自然就具有属性和方法." 每个函数都包含两个非继承而来的方法  call() , apply() " call() , apply() , 这两个方法其本质就是设置函数体内this对象指向的值,换个说法来理解这句话,一个对象可以通过call() 和 apply() 来调用其他对象的方法.比如说对象A拥有

call,apply,bind的用法

关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成"借用“,"请求".想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了,总之你的手机就是用不成.可是你非打这个电话不可,于是你可以去借一下朋友的手机,或者借用一下邻居的手机,或者公用电话,这样呢,你就可以在自己没有手机可

call(),apply(),bind()与回调

1.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.简单的说就是改变函数执行的上下文,这是最基本的用法.两个方法基本区别在于传参不同. call(obj,arg1,arg2,arg3); call第一个参数传对象,可以是null.参数以逗号分开进行传值,参数可以是任何类型. apply(obj,[arg1,arg2,arg3]); appl

JavaScript中call,apply,bind方法的总结

why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. var a = { user:"追梦子&quo

javascript中call,apply,bind的用法对比分析

这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成"借用“,"请求".想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了,总之你的手机就是用

js 的 call apply bind 方法

js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) thisObj可选项.将被用作当前对象的对象.arg1, arg2, argN ..可选项.将被传递方法参数序列. 如果没设置严格模式 “use strict” 当thisObj 不存在或 为 undefined 或为 null 或为 this 时,则隐式地指向 全局对象(在浏览器中即为 wi