xml地图|网站地图|网站标签 [设为首页] [加入收藏]

JS核心系列

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:176 发布时间:2019-05-02
摘要:JS主题体系:浅谈 call apply 与 bind 2016/03/01 · JavaScript· apply,bind,call 初稿出处: 一像素    在JavaScript中,call、apply和bind是Function对象自带的几个格局,那七个方式的机要功能是改造函数

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

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

初稿出处: 一像素   

在JavaScript中,call、apply和bind 是Function对象自带的几个格局,那七个方式的机要功能是改造函数中的this指向,从而能够高达接花移木的效力。本文将对那多少个主意开始展览详尽的上课,并列出多少个杰出应用场景。

 

call(thisArgs [,args…])


该措施能够传递二个thisArgs参数和一个参数列表,thisArgs钦点了函数在运转期的调用者,约等于函数中的this对象,而参数列表会被盛传调用函数中。thisArgs的取值有以下四种情形:

(壹) 不传,可能传null,undefined, 函数中的this指向window对象

(2) 传递另3个函数的函数名,函数中的this指向那些函数的引用

(三) 传递字符串、数值或布尔类型等基础项目,函数中的this指向其对应的包裹对象,如 String、Number、Boolean

(四) 传递3个对象,函数中的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(一); //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是ES五新添的三个主意,它的传参和call类似,但又和call/apply有着明确的不等,即调用call或apply都会活动试行相应的函数,而bind不会实施相应的函数,只是重临了对函数的引用。粗略一看,bind仿佛比call/apply要滞后一些,那ES伍为什么还要引入bind呢?

其实,ES伍引进bind的确实目标是为了弥补call/apply的不足,由于call/apply会对目的函数自动实施,从而致使它不能够在事变绑定函数中接纳,因为事件绑定函数无需大家手动推行,它是在事变被触发时由JS内部自行实行的。而bind在落到实处转移函数this的同时又不会自动试行对象函数,因而得以健全的解决上述难题,看四个例证就能够领略:

JavaScript

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

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 p壹 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, 一), 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中定义的天性,从而落成了连续的目标。

 

使用场景2:移花接木


在讲上边的内容前边,大家先是来认知一下JavaScript中的2个非规范专门的学业术语: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); // 一 2 3 ④ }); } test(1,2,三,四);

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筹,比方有如此一个光景:给定八个数组[1,3,4,7],然后求数组中的最大因素,而你了解,数组中并从未获取最大值的不贰法门,一般情形下,你需求通过编写制定代码来得以落成。而我辈明白,Math对象中有3个到手最大值的法子,即Math.max(), max方法须要传递三个参数列表,然后回来那么些参数中的最大值。而apply不仅能够将Math对象的max方法运用到其它对象上,仍可以将3个数组转化为参数列表传递给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

在JavaScript中,call、apply和bind 是Function对象自带的八个方法,那四个法子的重中之重效用是改换函数中的this指向,从而得以达到`接花移木`的效率。本文将对那多少个形式开始展览详尽的授课,并列出多少个卓越应用场景。 

浅谈javascript中的call、apply、bind,applybind

在JavaScript中,call、apply和bind 是Function对象自带的八个主意,那多个章程的关键功用是更动函数中的this指向,从而能够高达`接花移木`的意义。本文将对那多少个办法举办详细的教师,并列出多少个优良应用场景。 

call(thisArgs [,args...])

该格局可以传递2个thisArgs参数和1个参数列表,thisArgs内定了函数在运营期的调用者,也正是函数中的this对象,而参数列表会被流传调用函数中。thisArgs的取值有以下四种情况:

(一) 不传,恐怕传null,undefined, 函数中的this指向window对象

(二) 传递另二个函数的函数名,函数中的this指向那一个函数的引用

(3) 传递字符串、数值或布尔类型等基础项目,函数中的this指向其对应的包裹对象,如 String、Number、Boolean

(四) 传递1个目标,函数中的this指向那些目标

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的基本作用,它同意你在一个目的上调用该目的没有概念的章程,并且这几个艺术能够访问该对象中的属性,至于那样做有何好处,笔者待会再讲,我们先看1个简练的例证:

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的第二个参数必须是多个数组,而call允许传递1个参数列表。值得您放在心上的是,固然apply接收的是贰个参数数组,但在传递给调用函数时,却是以参数列表的花样传递,大家看个大概的例证:

function b(x,y,z){
  console.log(x,y,z);
}

b.apply(null,[1,2,3]); // 1 2 3

apply的这几个天性很重大,大家会在下边的使用场景中关系那一个性子。

bind(thisArgs [,args...])

bind是ES伍新增加的四个艺术,它的传参和call类似,但又和call/apply有着明显的区别,即调用call或apply都会活动实施相应的函数,而bind不会试行相应的函数,只是重返了对函数的引用。粗略1看,bind仿佛比call/apply要走下坡路一些,那ES伍为啥还要引进bind呢?

实际,ES伍引进bind的真的目标是为着弥补call/apply的阙如,由于call/apply会对目的函数自动试行,从而产生它无法在事件绑定函数中动用,因为事件绑定函数无需大家手动推行,它是在事件被触发时由JS内部自行施行的。而bind在贯彻转移函数this的还要又不会自动实行对象函数,因而得以健全的消除上述难题,看多个例证就能够明了:

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 p一 p2, 表达onClick中的this被bind改换成了obj对象,为了对bind实行深远的知道,大家来看一下bind的polyfill达成:

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能够兑现这一个效果:

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运算符的教师,请参见:') 那句话,在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:

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筹,举例有如此1个景观:给定二个数组[1,3,4,7],然后求数组中的最大因素,而你理解,数组中并未赚取最大值的不贰秘籍,一般情形下,你须求通过编写制定代码来得以落成。而作者辈通晓,Math对象中有3个获得最大值的法子,即Math.max(), max方法要求传递1个参数列表,然后回到这个参数中的最大值。而apply不仅可以将Math对象的max方法运用到其它对象上,还是能将多个数组转化为参数列表传递给max,看代码就会显而易见:

var arr = [2,3,1,5,4];

Math.max.apply(null,arr); // 5

以上正是call和apply比较非凡的多少个利用场景,理解驾驭这么些技能,并把这么些特征应用到你的骨子里项目中,会使您的代码看起来特别深入!

call(thisArgs [,args...])

你恐怕感兴趣的稿子:

  • js apply/call/caller/callee/bind使用办法与分化分析
  • javascript中call,apply,bind的用法相比较分析
  • 浅谈javascript中call()、apply()、bind()的用法
  • 张开Javascript中apply、call、bind的用法之旅格局
  • 跟本人学习javascript的call(),apply(),bind()与回调
  • 浅谈javascript的call()、apply()、bind()的用法

在JavaScript中,call、apply和bind 是Function对象自带的八个措施,这八个措施的主要成效是更改函数中...

该措施能够传递一个thisArgs参数和一个参数列表,thisArgs钦定了函数在运营期的调用者,也正是函数中的this对象,而参数列表会被流传调用函数中。thisArgs的取值有以下四种处境:

(一) 不传,恐怕传null,undefined, 函数中的this指向window对象

(二) 传递另多个函数的函数名,函数中的this指向这么些函数的引用

(三) 传递字符串、数值或布尔类型等基础项目,函数中的this指向其对应的包装对象,如 String、Number、Boolean

(四) 传递2个目的,函数中的this指向那几个目标

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的主导效能,它同意你在三个目的上调用该目的未有定义的措施,并且那一个办法能够访问该目的中的属性,至于那样做有哪些便宜,小编待会再讲,大家先看二个简单易行的事例:

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[]])

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:JS核心系列

关键词: 68399皇家赌场 JavaScript

最火资讯