当前位置:3016.com-金沙城中心官网 > 前端 > 金沙城中心JS核心种类:浅谈 call apply 与 bind

金沙城中心JS核心种类:浅谈 call apply 与 bind

文章作者:前端 上传时间:2019-11-05

JS主旨体系:浅谈 call apply 与 bind

2016/03/01 · JavaScript · apply, bind, call

原作出处: 一像素   

在JavaScript中,call、apply和bind 是Function对象自带的多个艺术,这四个格局的要紧效率是退换函数中的this指向,进而得以到达接花移木的功用。本文将对那四个章程实行详细的讲课,并列出多少个卓绝应用途景。

 

call(thisArgs [,args…])


该办法能够传递叁个thisArgs参数和三个参数列表,thisArgs钦定了函数在运维期的调用者,也正是函数中的this对象,而参数列表会被传到调用函数中。thisArgs的取值有以下4种情景:

(1卡塔 尔(英语:State of Qatar) 不传,或然传null,undefined, 函数中的this指向window对象

(2卡塔 尔(英语:State of Qatar) 传递另三个函数的函数名,函数中的this指向这一个函数的引用

(3卡塔 尔(阿拉伯语:قطر‎传递字符串、数值或布尔类型等底子项目,函数中的this指向其相应的卷入对象,如 String、Number、Boolean

(4卡塔 尔(阿拉伯语:قطر‎ 传递四个对象,函数中的this指向这一个目的

JavaScript

function a(){ console.log(this); //输出函数a中的this对象 } function b(){} //定义函数b var obj = {name:'onepixel'}; //定义对象obj a.call(); //window a.call(null); //window a.call(undefined);//window a.call(1); //Number a.call(''); //String a.call(true); //Boolean a.call(b);// function b(){} a.call(obj); //Object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function a(){
    console.log(this); //输出函数a中的this对象
}
function b(){} //定义函数b
 
var obj = {name:'onepixel'}; //定义对象obj
 
a.call(); //window
a.call(null); //window
a.call(undefined);//window
a.call(1); //Number
a.call(''); //String
a.call(true); //Boolean
a.call(b);// function b(){}
a.call(obj); //Object

那是call的基本作用,它同意你在叁个指标上调用该目的没有概念的法子,况且那一个主意能够访谈该指标中的属性,至于那样做有啥样好处,小编待会再讲,大家先看贰个轻易的例证:

JavaScript

var a = { name:'onepixel', //定义a的属性 say:function(){ //定义a的方法 console.log("Hi,I'm function a!"); } }; function b(name){ console.log("Post params: "+ name); console.log("I'm "+ this.name); this.say(); } b.call(a,'test'); >> Post params: test I'm onepixel I'm function a!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var a = {
 
    name:'onepixel', //定义a的属性
 
    say:function(){ //定义a的方法
        console.log("Hi,I'm function a!");
    }
};
 
function b(name){
    console.log("Post params: "+ name);
    console.log("I'm "+ this.name);
    this.say();
}
 
b.call(a,'test');
>>
Post params: test
I'm onepixel
I'm function a!

当执行b.call时,字符串test用作参数字传送递给了函数b,由于call的效果与利益,函数b中的this指向了指标a, 由此一定于调用了对象a上的函数b,而其实a中未有概念b 。

 

apply(thisArgs[,args[]])


apply和call的并世无双分裂是第贰个参数的传递方式分歧,apply的第1个参数必需是四个数组,而call允许传递多少个参数列表。值得你注意的是,固然apply选拔的是叁个参数数组,但在传递给调用函数时,却是以参数列表的样式传递,大家看个简易的例子:

JavaScript

function b(x,y,z){ console.log(x,y,z); } b.apply(null,[1,2,3]); // 1 2 3

1
2
3
4
5
function b(x,y,z){
    console.log(x,y,z);
}
 
b.apply(null,[1,2,3]); // 1 2 3

apply的那些特点很要紧,大家会在上边包车型大巴应用项景中关系那个天性。

 

bind(thisArgs [,args…])


bind是ES5新扩充的二个办法,它的传参和call相似,但又和call/apply有着刚强的区别,即调用call或apply都会自动施行相应的函数,而bind不会实行相应的函数,只是重返了对函数的引用。粗略大器晚成看,bind如同比call/apply要走下坡路一些,那ES5为什么还要引进bind呢?

实际上,ES5引进bind的的确指标是为了弥补call/apply的贫乏,由于call/apply会对指标函数自动推行,进而造成它不或然在事件绑定函数中使用,因为事件绑定函数没有供给大家手动试行,它是在事件被触发时由JS内部自行执行的。而bind在促成转移函数this的还要又不会活动施行对象函数,因而能够康健的缓和上述难题,看一个例证就能够领会:

JavaScript

var obj = {name:'onepixel'}; /** * 给document增加click事件监听,并绑定onClick函数 * 通过bind方法设置onClick的this为obj,并传递参数p1,p2 */ document.add伊夫ntListener('click',onClick.bind(obj,'p1','p2'),false); //当点击网页时接触并执行 function onClick(a,b){ console.log( this.name, //onepixel a, //p1 b //p2 ) }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var obj = {name:'onepixel'};
 
/**
* 给document添加click事件监听,并绑定onClick函数
* 通过bind方法设置onClick的this为obj,并传递参数p1,p2
*/
document.addEventListener('click',onClick.bind(obj,'p1','p2'),false);
 
//当点击网页时触发并执行
function onClick(a,b){
    console.log(
            this.name, //onepixel
            a, //p1
            b  //p2
    )
}

当点击网页时,onClick被触发施行,输出onepixel p1 p2, 表达onClick中的this被bind订正成了obj对象,为了对bind实行深切的知道,大家来看一下bind的polyfill达成:

JavaScript

if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) { var aArgs = Array.prototype.slice.call(arguments, 1), fToBind = this, //this在这里间针对的是目的函数 fBound = function () { return fToBind.apply( //如若外界施行var obj = new fBound(),则将obj作为最终的this,废弃行使oThis this instanceof fToBind ? this //那时的this就是new出的obj : oThis || this, //借使传递的oThis无效,就将fBound的调用者作为this //将通过bind传递的参数和调用时传递的参数进行联合,并作为最终的参数字传送递 aArgs.concat(Array.prototype.slice.call(arguments))); }; //将指标函数的原型对象拷贝到新函数中,因为目的函数有异常的大希望被用作构造函数使用 fBound.prototype = this.prototype; //再次回到fBond的援用,由外界按需调用 return fBound; }; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if (!Function.prototype.bind) {
    Function.prototype.bind = function (oThis) {
        var aArgs = Array.prototype.slice.call(arguments, 1),
            fToBind = this, //this在这里指向的是目标函数
            fBound = function () {
                return fToBind.apply(
                    //如果外部执行var obj = new fBound(),则将obj作为最终的this,放弃使用oThis
                    this instanceof fToBind
                            ? this  //此时的this就是new出的obj
                            : oThis || this, //如果传递的oThis无效,就将fBound的调用者作为this
 
                    //将通过bind传递的参数和调用时传递的参数进行合并,并作为最终的参数传递
                    aArgs.concat(Array.prototype.slice.call(arguments)));
            };
 
        //将目标函数的原型对象拷贝到新函数中,因为目标函数有可能被当作构造函数使用
        fBound.prototype = this.prototype;
 
        //返回fBond的引用,由外部按需调用
        return fBound;
    };
}

行使场景豆蔻梢头:世袭


世家知晓,JavaScript中绝非诸如Java、C#等高级语言中的extend 关键字,由此JS中并未有世襲的概念,假设应当要一而再再三再四的话,call和apply能够实现那几个效应:

JavaScript

function Animal(name,weight){ this.name = name; this.weight = weight; } function Cat(){ Animal.call(this,'cat','50'); //Animal.apply(this,['cat','50']); this.say = function(){ console.log("I am " + this.name+",my weight is " + this.weight); } } var cat = new Cat(); cat.say();//I am cat,my weight is 50

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Animal(name,weight){
   this.name = name;
   this.weight = weight;
}
 
function Cat(){
    Animal.call(this,'cat','50');
  //Animal.apply(this,['cat','50']);
 
   this.say = function(){
      console.log("I am " + this.name+",my weight is " + this.weight);
   }
}
 
var cat = new Cat();
cat.say();//I am cat,my weight is 50

当通过new运算符发生了cat时,Cat中的this就照准了cat对象(关于new运算符的上书,请参见:),而继续的首要性是在于Cat中实行了Animal.call(this,’cat’,’50’) 这句话,在call上校this作为thisArgs参数字传送递,于是Animal方法中的this就针对了Cat中的this,而cat中的this指向的是cat对象,所以Animal中的this指向的便是cat对象,在Animal中定义了name和weight属性,就相当于在cat中定义了那么些属性,由此cat对象便具备了Animal中定义的天性,从而达到了后续的目标。

 

采纳场景二:冯谖三窟


在讲上面包车型地铁内容前面,我们先是来认知一下JavaScript中的多个非标准职业术语:ArrayLike(类数组/伪数组)

ArrayLike 对象即具有数组的意气风发局地行为,在DOM中早已突显出来,而jQuery的崛起让ArrayLike在JavaScript中山高校放异彩。ArrayLike对象的精巧在于它和JS原生的Array相似,不过它是随机营造的,它出自开辟者对JavaScript对象的增添,也正是说:对于它的原型(prototype)大家得以放肆定义,而不会传染到JS原生的Array。

ArrayLike对象在JS中被广泛利用,譬喻DOM中的NodeList, 函数中的arguments都以类数组对象,那一个目的像数组同样存储着每一个要素,但它从不操作数组的办法,而小编辈得以透过call将数组的一些方法移接到ArrayLike对象,从而达成操作其成分的目标。比方大家能够那样遍历函数中的arguments:

JavaScript

function test(){ //检查测量检验arguments是不是为Array的实例 console.log( arguments instanceof Array, //false Array.isArray(arguments) //false ); //决断arguments是不是有forEach方法 console.log(arguments.forEach); //undefined // 将数组中的forEach应用到arguments上 Array.prototype.forEach.call(arguments,function(item){ console.log(item); // 1 2 3 4 }); } test(1,2,3,4);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function test(){
    //检测arguments是否为Array的实例
    console.log(
            arguments instanceof Array, //false
            Array.isArray(arguments)  //false
    );
    //判断arguments是否有forEach方法
    console.log(arguments.forEach); //undefined
 
    // 将数组中的forEach应用到arguments上
    Array.prototype.forEach.call(arguments,function(item){
        console.log(item); // 1 2 3 4
    });
 
}
test(1,2,3,4);

除开,对于apply来讲,大家地点提到了它唯有的三个表征,即apply接纳的是数组,在传递给调用函数的时候是以参数列表传递的。 那个性格让apply看起来比call 后起之秀超过前辈,举例有那样八个气象:给定二个数组[1,3,4,7],然后求数组中的最大因素,而你精通,数组中并从未获得最大值的议程,平常景况下,你需求经过编写制定代码来兑现。而小编辈精晓,Math对象中有八个得到最大值的艺术,即Math.max(), max方法需求传递叁个参数列表,然后回来那几个参数中的最大值。而apply不仅可以够将Math对象的max方法运用到任何对象上,仍可以将四个数组转变为参数列表传递给max,看代码就可以一清二楚:

JavaScript

var arr = [2,3,1,5,4]; Math.max.apply(null,arr); // 5

1
2
3
var arr = [2,3,1,5,4];
 
Math.max.apply(null,arr); // 5

如上就是call和apply相比杰出的多少个利用途景,熟识驾驭那些能力,并把那个特征应用到你的骨子里项目中,会让你的代码看起来更为有趣!

2 赞 12 收藏 评论

金沙城中心 1

本文由3016.com-金沙城中心官网发布于前端,转载请注明出处:金沙城中心JS核心种类:浅谈 call apply 与 bind

关键词: