javascript中的call、apply、bind用法及区别

一.call、apply、bind作用

在JavaScript中,call、apply和bind是Function对象自带的三个方法。这三个函数的存在意义是什么?答案就是改变函数运行时的this指向。下面我们通过实际例子来介绍这三个方法的使用和区别。

二.call

语法:fn.call(thisArg,arg1,arg2,...)

thisArg:函数fn运行时,该函数中的this绑定到thisArg上。
arg1,arg2,...:函数fn所需的参数,是个list

我们直接看例子:

var a ={
    name : "test",
    fn : function (a,b) {
        console.log(this.name, a + b)
    }
}
var b={name:'test1'}
a.fn(1,2) //test 3
a.fn.call(b,1,2) //test1 3

执行 a.fn(1,2),fn中的this指向a,所以输出 test 3
执行 a.fn.call(b,1,2),通过call改变了fn中的this指向为b,所以输出 test1 3

注意事项:

  1. thisArg不传,或者传null,undefined, 函数中的this指向window对象
  2. thisArg为原始值(数字,字符串,布尔值),函数中this指向该原始值的自动包装对象(如 String、Number、Boolean)
  3. thisArg为一个对象,函数中的this指向这个对象
  4. thisArg为一个函数名,函数中的this指向该函数
  5. 前四点是默认在非严格模式下,如果在严格模式下,会略有不同。

我们直接看例子:

function a(params) {
    console.log(this);
}
function b() {}
var obj = {
    name: '这是一个屌丝'
};

//                  正常模式下              严格模式下
a.call();           //window               undefined
a.call(null);       //window               null
a.call(undefined);  //window               undefined
a.call(1);          //Number{1}            1
a.call('');         //String{''}           ''
a.call(true);       //Boolean{true}        true
a.call(b);          //function b(){}       function b(){}
a.call(obj);        //Object               Object

三.apply

语法:fn.call(thisArg,[arg1,arg2,...])或者 fn.call(thisArg,{0:arg1,1:arg2,...,lenght:总个数})

thisArg:函数fn运行时,该函数中的this绑定到thisArg上。
[arg1,arg2,...]或者形如{0:arg1,1:arg2,...,lenght:总个数}:函数fn所需的参数,是个数组或者类数组,call函数会自动将数组或类数组的每个值分开成列表然后给函函数fn

例子和上面一样,只需要把call换成apply即可。其他都一样,包括上面call的几点注意事项即不传或者传null等。

四.bind

语法:fn.bind(thisArg,arg1,arg2,...)()

thisArg:函数fn运行时,该函数中的this绑定到thisArg上。
arg1,arg2,...:函数fn所需的参数,是个list

bind其实和call类似,包括上面call的几点注意事项即不传或者传null等,只不过后面多个()。我们直接看例子

 var a = {
    name: "test",
    fn: function (a, b) {
        console.log(this.name, a + b)
    }
}
var b = {
    name: 'test1'
}
a.fn.bind(b, 1, 2)

运行上面代码,我们发现控制台并没有输出,所以我们可以看出bind 是创建一个新的函数,我们必须要手动去调用。我们更改代码:

var a = {
    name: "test",
    fn: function (a, b) {
        console.log(this.name, a + b)
    }
}
var b = {
    name: 'test1'
}
a.fn.bind(b, 1, 2) //test1 3

上面我们手动调用,发现正确输出结果。

五.call apply bind三者区别总结

1.call和apply用法一样,唯一的区别是call的参数为列表,apply参数为数组
2.bind和call用法一样,唯一的区别是call会自执行函数,bind需要手动调用函数

六.应用

1.继承

var Person = function (name, age) {
    this.name = name;
    this.age = age;
};
var Girl = function (name) {
    Person.call(this, name);
};
var Boy = function (name, age) {
    Person.apply(this, arguments);
}
var Boy1 = function (name, age) {
    Person.bind(this, name)();
}
var g = new Girl('xiaohong');
var b = new Boy('xiaoming', 100);
var b1 = new Boy1('xiaowang', 100);
console.log(g); //{name: "xiaohong", age: undefined}
console.log(b); //{name: "xiaoming", age: 100}
console.log(b1); //{name: "xiaowang", age: undefined}

上面例子,我们定义了四个构造函数,通过new实例化调用Girl、Boy、Boy1这三个构造函数,在这三个构造函数中分别使用call、apply、bind继承Person的属性。
我们来看下它到底是怎么继承的?

 var Person = function (name, age) {
      this.name = name;
      this.age = age;
};
var Girl = function (name) {
    Person.call(this, name);
};  
var g = new Girl('xiaohong');

1.先执行g=new Girl('xiaohong'); 此时执行Girl函数,并执行函数里面的代码Person.call(this, name);
2.Person.call(this, name);中的this指向调用方,即实例g. 通过call方法后,会调用person函数,本来person的this指向被调用方,此时person函数的this被改变成实例g
3.所以就变成g.name=name; g.age=age
4.所以通过girl实例化出的g相当于继承了person里面的属性

2.求数组中的最大和最小值

var ary = [0, 1, 1, 3, 4, 5, 6, 7];
console.log(Math.max(0, 1, 1, 3, 4, 5, 6, 7)); //7
console.log(Math.min(0, 1, 1, 3, 4, 5, 6, 7)); //0
var max = Math.max.apply(null, ary);
var min = Math.min.apply(null, ary);
console.log(max,min); //7 0

上面例子可以看出,正常情况下,Math.max和Math.min的参数为必须为列表,上面只用0-7八个数字还好,但如果数据很多,都放到参数会比较麻烦。

所以我们借助apply可以将数组转换成列表的功能,这样我们就可以直接传递一个变量了。第一个参数这里使用null,实际换成其他都可以(如随便一个字符串、数字、对象等),这里主要使用的是call函数的 数组转列表功能。

3.类数组转数组

Array.prototype.slice.call(arrayLike) 或者 Array.prototype.slice.apply(arrayLike)

具体可以戳这javascript中的伪(类)数组和数组

4.数组追加

在js中我们往数组追加元素,一般使用push方法。

  var arr1 = [1,2,3];
  var arr2 = [4,5,6];
  arr1.push(4,5,6)
  console.log(arr1) //[1,2,3,4,5,6]

我们也可以使用apply方法:

var arr1 = [1,2,3];
var arr2 = [4,5,6];
[].push.apply(arr1,arr2)
console.log(arr1) //[1,2,3,4,5,6]

上面代码意思表示:[]调用push方法,然后通过call将push方法中的this指向arr1,并将arr2转变成参数列表。这样就达到合并的目的。

5. 判断变量类型

Object.prototype.toString.call/apply(object);

具体详见另一篇文章toString()和Object.prototype.toString.call()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342