bind方法的详解与总括,方法运用

By admin in 4858美高梅 on 2019年5月5日

前言: 

apply、call 、bind有哪些效果,什么分别?

Function.prototype.call()
函数实例的call方法,能够内定函数内部this的针对(即函数执行时所在的成效域),然后在所钦赐的作用域中,调用该函数。

var obj = {};

var f = function () {
  return this;
};

f() === window // true
f.call(obj) === obj // true

地点代码中,全局情状运营函数f时,this指向全局情形(浏览器为window对象);call方法能够改动this的针对,钦点this指向对象obj,然后在目的obj的功用域中运作函数f。

call方法的参数,应该是三个目的。如若参数为空、null和undefined,则默许传入全局对象。

var f = function () {
  return this;
};

f.call(5)
// Number {[[PrimitiveValue]]: 5}

地点代码中,call的参数为5,不是目的,会被机关转成包装对象(Number的实例),绑定f内部的this。

call方法仍是勉强接受多个参数。

func.call(thisValue, arg1, arg2, ...)

call的首先个参数正是this所要指向的可怜目的,前边的参数则是函数调用时所需的参数。

function add(a, b) {
  return a + b;
}

add.call(this, 1, 2) // 3

Function.prototype.apply()

apply方法的机能与call方法类似,也是改换this指向,然后再调用该函数。唯一的区分就是,它接受三个数组作为函数执行时的参数,使用格式如下。

func.apply(thisValue, [arg1, arg2, ...])

apply方法的第三个参数也是this所要指向的可怜目的,若是设为null或undefined,则没有差异于钦定全局对象。第一个参数则是3个数组,该数组的全部成员相继作为参数,传入原函数。原函数的参数,在call方法中必须二个个加上,然而在apply方法中,必须以数组情势足够。

function f(x, y){
  console.log(x + y);
}

f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2

(1)寻觅数组最大因素

JavaScript
不提供搜索数组最大因素的函数。结合使用apply方法和Math.max方法,就足以回来数组的最大因素。

var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a) // 15

(二)将数组的空成分变为undefined

由此apply方法,利用Array构造函数将数组的空元素形成undefined。

Array.apply(null, ['a', ,'b'])
// [ 'a', undefined, 'b' ]

空成分与undefined的反差在于,数组的forEach方法会跳过空成分,可是不会跳过undefined。因而,遍历内部因素的时候,会获得分化的结果。

var a = ['a', , 'b'];

function print(i) {
  console.log(i);
}

a.forEach(print)
// a
// b

Array.apply(null, a).forEach(print)
// a
// undefined
// b

Function.prototype.bind()
bind方法用于将函数体内的this绑定到有个别对象,然后回到三个新函数。

var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.

var print = d.getTime.bind(d);
print() // 1481869925657

bind方法将getTime方法内部的this绑定到d对象,那时就可以安全地将那几个办法赋值给任何变量了。

var counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};

var obj = {
  count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count // 101

Javascript中call,apply,bind方法的详解与总括,applybind

以下内容会分成如下小节:

一.call/apply/bind方法的来自

2.Function.prototype.call()

3.Function.prototype.apply()

  3.一:寻觅数组中的最大数

  叁.2:将数组的空元素变为undefined

  3.三:转换类似数组的目的

4.Function.prototype.bind()

五.绑定回调函数的对象

陆.call,apply,bind方法的牵连和界别

一.call/apply/bind方法的来源于

第二,在利用call,apply,bind方法时,大家有不能缺少知道那四个方法毕竟是来源于哪儿?为何能够行使的到那七个法子?

call,apply,bind那八个章程其实都以往续自Function.prototype中的,属于实例方法。

 console.log(Function.prototype.hasOwnProperty('call')) //true
 console.log(Function.prototype.hasOwnProperty('apply')) //true
 console.log(Function.prototype.hasOwnProperty('bind')) //true

上边代码中,都回去了true,申明三种格局都是往续自Function.prototype的。当然,普通的对象,函数,数组都接二连三了Function.prototype对象中的多少个主意,所以那四个主意都足以在对象,数组,函数中利用。

至于持续的定义,会在将来与我们大饱眼福。

2.Function.prototype.call()

 函数实例的call方法,能够钦赐该函数内部this的指向(即函数试行时所在的效率域),然后在所钦赐的意义域中,调用该函数。并且会及时实践该函数。

 看个例子来出彩精晓那段话。

 var keith = {
 rascal: 123
 };
 var rascal = 456;
 function a() {
 console.log(this.rascal);
 }
 a(); //456
 a.call(); //456
 a.call(null); //456
 a.call(undefined); //456
 a.call(this); //456
 a.call(keith); //123

下边代码中,a函数中的this关键字,要是指向全局对象,再次回到结果为456。能够看出,假如call方法未有参数,大概参数为null或undefined大概this,则同样指向全局对象。借使利用call方法将this关键字指向keith对象,也等于将该函数实行时所在的效用域为keith对象,重返结果为123。

call()方法能够传递多个参数。第贰个参数是钦命函数内部中this的针对性(也便是函数施行时所在的成效域),第叁个参数是函数调用时须要传递的参数。

function keith(a, b) {
 console.log(a + b);
 }
keith.call(null, 1, 2); //3

首先个参数是必须的,可以是null,undefined,this,不过不可能为空。设置为null,undefined,this申明函数keith此时地处大局作用域。第1个参数中必须八个个增多。而在apply中必须以数组的样式丰裕。

call方法的两个行使是调用对象的原生方法。也得以用来将类数组对象调换为数组。

var obj = {};
 console.log(obj.hasOwnProperty('toString')); //false
 obj.hasOwnProperty = function() {
 return true;
 }
 console.log(obj.hasOwnProperty('toString')); //true
 console.log(Object.prototype.hasOwnProperty.call(obj, 'toString')); //false

地方代码中,hasOwnProperty是obj对象承继的办法,借使这些法子一旦被掩盖,就不会得到不错结果。call方法能够化解这些办法,它将hasOwnProperty方法的原有定义放到obj对象上实行,那样无论obj上有未有同名方法,都不会潜移默化结果。要留意的是,hasOwnProperty是Object.prototype原生对象的艺术,而call是三番五次自Function.prototype的艺术。

3.Function.prototype.apply()

apply方法的职能与call方法类似,也是退换this指向(函数试行时所在的成效域),然后在钦点的功能域中,调用该函数。同时也会立马施行该函数。唯1的区分正是,它接受三个数组作为函数奉行时的参数。

apply方法的率先个参数也是this所要指向的要命目的,要是设为null或undefined也许this,则一律钦点全局对象。第2个参数则是2个数组,该数组的装有成员相继作为参数,在调用时传出原函数。原函数的参数,在call方法中必须三个个加多,可是在apply方法中,必须以数组情势丰硕。

看一下call,apply的细微差距。

function keith(a, b) {
 console.log(a + b);
 }
 keith.call(null, 2, 3); //5
 keith.apply(null, [2, 3]); //5

 

上面代码中,第一个参数为null,指向全局功用域;第一个参数字传送入的款型稍稍不一样。

apply方法有以下应用。

三.1:寻找数组中的最大数

var a = [2, 4, 5, 7, 8, 10];
console.log(Math.max.apply(null, a)); //10
console.log(Math.max.call(null,2, 4, 5, 7, 8, 10)); //10 

Javascript中是平昔不提供寻找数组中最大值的主意的,结合使用持续自Function.prototype的apply和Math.max方法,就足以重临数组的最大值。

叁.二:将数组的空成分变为undefined

经过apply方法,利用Array构造函数将数组的空成分变成undefined。

console.log(Array.apply(null, [1, , 3])); // [1, undefined, 3]

空成分与undefined的反差在于,数组的forEach方法会跳过空成分,不过不会跳过undefined和null。因而,遍历内部因素的时候,会博得分化的结果。

var a = [1, , 3];
 a.forEach(function(index) {
 console.log(index); //1,3 ,跳过了空元素。
 })
 Array.apply(null,a).forEach(function(index){
 console.log(index); ////1,undefined,3 ,将空元素设置为undefined
 })

叁.三:调换类似数组的靶子

除此以外,利用数组对象的slice方法,能够将四个好像数组的目的(例如arguments对象)转为真正的数组。当然,slice方法的1个重中之重应用,正是将接近数组的对象转为真正的数组。call和apply都得以兑现该利用。

console.log(Array.prototype.slice.apply({0:1,length:1})); //[1]
console.log(Array.prototype.slice.call({0:1,length:1})); //[1]
console.log(Array.prototype.slice.apply({0:1,length:2})); //[1,undefined]
console.log(Array.prototype.slice.call({0:1,length:2})); //[1,undefined]
function keith(a,b,c){
 return arguments;
 }
console.log(Array.prototype.slice.call(keith(2,3,4))); //[2,3,4]

地点代码的call,apply方法的参数都以目的,可是回到结果都以数组,那就起到了将目的转成数组的目的。从上边代码能够看出,这么些格局起效果的前提是,被拍卖的对象必须有length属性,以及相对应的数字键。

4.Function.prototype.bind()

bind方法用于钦点函数内部的this指向(奉行时所在的效率域),然后回到3个新函数。bind方法毫无立刻推行3个函数。

var keith = {
 a: 1,
 count: function() {
 console.log(this.a++);
 }
 };
 keith.count(); //1
 keith.count(); //2
 keith.count(); //3

下面代码中,假设this.a指向keith对象内部的a属性,假设那几个措施赋值给其余2个变量,调用时就能出错。

 var keith = {
 a: 1,
 count: function() {
 console.log(this.a++);
 }
 };
 var f = keith.count;
 f(); //NaN

下边代码中,若是把count方法赋值给f变量,那么this对象指向不再是keith对象了,而是window对象。而window.a默以为undefined,举办递增运算之后undefined++就等于NaN。

为了解决那个难题,能够应用bind方法,将keith对象里的this绑定到keith对象上,也许是直接调用。

 var f = keith.count.bind(keith);
 f(); //1
 f(); //2
 f(); //3
 keith.count.bind(keith)() //1
 keith.count.bind(keith)() //2
 keith.count.bind(keith)() //3

bind方法的详解与总括,方法运用。 当然,this也能够绑定到其余对象上。

 var obj = {
 a: 100
 };
 var f = keith.count.bind(obj);
 f(); //100
 f(); //101
 f(); //102

1致,我们也足以给bind方法传递参数,第3个参数借使为null恐怕undefined或许this,会将函数内部的this对象指向全局情形;第二个为调用时索要的参数,并且传递参数的款式与call方法一样。

 function keith(a, b) {
 return a + b;
 }
 console.log(keith.apply(null,[1,4])); //5
 console.log(keith.call(null,1,4)); //5
 console.log(keith.bind(null, 1, 4)); //keith()
 console.log(keith.bind(null, 1, 4)()); //5

地点代码中,能够看出call,apply,bind③者的分别:call和apply方法都是在调用之后立刻施行的。而bind调用之后是回去原函数,须要再调用3次才行,有点像闭包的味道,假设对闭包概念不熟悉,能够浏览那两篇作品:深入掌握javascript函数参数与闭包,浅谈JavaScript的闭包函数。

5.绑定回调函数的目的

在那篇文章javascript中this关键字详解中,有谈及到若是在回掉函数中选用this对象,那么this对象是会针对DOM对象,也便是button对象。借使要缓和回调函数中this指向难点,能够用如下方法。

var o = {
 f: function() {
 console.log(this === o);
 }
 }
 $('#button').on('click', function() {
 o.f.apply(o);
 //或者 o.f.call(o);
 //或者 o.f.bind(o)();
 });

点击开关之后,调节台将会议及展览示true。由于apply方法(或许call方法)不唯有绑定函数实施时所在的目的,还会及时实施函数(而bind方法不会应声推行,注意区分),由此只可以把绑定语句写在二个函数体内。

陆.call,apply,bind方法的关联和差距

  其实用于钦命函数内部的this指向的难题,那多个办法都大约,只是存在情势上的异样。读者能够将上述的例子用两种艺术尝试用二种艺术落成。

  总计一下call,apply,bind方法:

  a:第3个参数都以钦定函数内部中this的对准(函数实践时所在的作用域),然后依据钦赐的成效域,调用该函数。

  b:都足以在函数调用时传递参数。call,bind方法要求一向传入,而apply方法须要以数组的花样传播。

  c:call,apply方法是在调用之后霎时施行函数,而bind方法未有应声试行,必要将函数再实施二回。有点闭包的含意。

  d:改换this对象的针对性难点不止有call,apply,bind方法,也能够运用that变量来固定this的针对。如有疑问,请访问
javascript中this关键字详解

上述正是本文的全体内容,希望本文的内容对大家的学习恐怕办事能带来一定的帮扶,同时也期望多多扶助帮客之家!

以下内容会分成如下小节: 一.call/apply/bind方法的来源
贰.Function.prototype.call() 三.Function.pr…

以下内容会分成如下小节:

  由于js 中this的指向受函数运转条件的影响,指向平常退换,使得开拓变得紧Baba和模糊,所以在封装sdk,写一些繁杂函数的时候时不时会用到this 指向绑定,以避免出现不须要的主题材料,call、apply、bind基本都能完毕那一功力,现对这三种办法运用总括一下:

 

1、function.prototype.call()

     
call 方法可以钦点this 的针对性(即函数实施时所在的的作用域),然后再内定的作用域中,实行函数

      call 方法的参数,应该是对象obj,借使参数为空或null,undefind,则私下认可传参全局对象 

var obj = {};
var f = function(){
return this;
};
console.log(f() === window);  // this 指向window
console.log(f.call(obj) === obj)  //改变this 指向 obj

   假如call 传参不是上述项目,则转化成对应的卷入对象,然后传入方法。比方,5 转成number 实例,绑定f 内部 this

var f = function () {
  return this;
};

f.call(5)
// Number {[[PrimitiveValue]]: 5}

   call 能够承受多少个参数,第2个参数是this 指向的靶子,之后的是函数回调所需的入参

function add(a, b) {
  return a + b;
}

add.call(this, 1, 2) // 3

call艺术的2个用到是调用对象的原生方法。

var obj = {};
obj.hasOwnProperty('toString') // false

// 覆盖掉继承的 hasOwnProperty 方法
obj.hasOwnProperty = function () {
  return true;
};
obj.hasOwnProperty('toString') // true

Object.prototype.hasOwnProperty.call(obj, 'toString') // false

 上边代码中hasOwnProperty 是 obj 承继来的法子,用来剖断目的是否带有小编特点(非承接)属性,可是hasOwnProperty 并不是保留字,要是被对象覆盖,会导致结果错误。

call措施能够化解这几个主题材料,它将hasOwnProperty格局的固有定义放到obj目标上实施,那样无论obj上有未有同名方法,都不会影响结果。

hasOwnProperty 
相关应用:

 

2、Function.prototype.apply()

   
apply 和call 成效类似,也是改变this 指向,然后调用该函数,唯1差距是apply 接收数组作为函数试行时的参数

func.apply(thisValue, [arg1, arg2, ...])

apply主意的第一个参数也是this所要指向的格外目的,如若设为nullundefined,则未有差距于钦定全局对象。

其次个参数则是一个数组,该数组的享有成员相继作为参数,传入原函数。

原函数的参数,在call主意中必须一个个抬高,然而在apply形式中,必须以数组情势充分。

function f(x, y){
  console.log(x + y);
}

f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2

应用那1特性,能够达成广大小成效

举例说,输出数组的最大值

 var a = [24,30,2,33,1]
 Math.max.apply(null,a)  //33

将数组中的空值,转化成undefined,首要选择在数组遍历中,因为数组foreach 遍历会跳过空值,而不会跳过undefined

var a = ['a',,'b'];
Array.apply(null,a) //['a',undefind,'b']

将接近于数组的对象转化成数组

除此以外,利用数组对象的slice艺术,能够将1个类似数组的靶子(比方arguments目标)转为真正的数组。

Array.prototype.slice.apply({0: 1, length: 1}) // [1]
Array.prototype.slice.apply({0: 1}) // []
Array.prototype.slice.apply({0: 1, length: 2}) // [1, undefined]
Array.prototype.slice.apply({length: 1}) // [undefined]

地点代码的apply方式的参数都以目的,不过回去结果都以数组,这就起到了将目标转成数组的目的。

从上边代码能够见到,这些措施起效果的前提是,被拍卖的对象必须有length质量,以及相呼应的数字键。

 

3.Function.prototype.bind()

 bind 用于将函数体内的this绑定到有个别对象,然后重返2个新函数

var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.

报错是因为,d.getTime 赋值给 print 后,getTime 内部的this 指向方式变通,已经不再指向date 对象实例了

消除格局

var print = d.getTime.bind(d);
print() // 1481869925657

bind 接收的参数就是所要绑定的对象

ar counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};

var func = counter.inc.bind(counter);
func();
counter.count // 1

绑定到任何对象

var counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};

var obj = {
  count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count // 101

bind 还足以接受愈多的参数,将这一个参数绑定到原函数的参数

var add = function (x, y) {
  return x * this.m + y * this.n;
}

var obj = {
  m: 2,
  n: 2
};

var newAdd = add.bind(obj, 5);
newAdd(5) // 20

上边代码中,bind格局除了绑定this对象,还将add函数的率先个参数x绑定成5,然后再次回到3个新函数newAdd,那些函数只要再承受2个参数y就能够运作了。

 

总结:

  1. call 、 apply
    、bind 均能退换this 指向

贰.
apply 每一次施行发生二个新函数,call、apply 不会

三. call ,bind
接收八个参数绑定到函数,参数单一传入,apply 接收情势为数组

 

 

更加多详细资料:

 

1.call/apply/bind方法的来源于

2.Function.prototype.call()

3.Function.prototype.apply()

  三.1:寻觅数组中的最大数

  三.2:将数组的空元素变为undefined

  3.三:调换类似数组的对象

4.Function.prototype.bind()

五.绑定回调函数的靶子

陆.call,apply,bind方法的关联和界别

壹.call/apply/bind方法的根源

第二,在采纳call,apply,bind方法时,大家有至关重要了然那两个格局毕竟是根源哪里?为何能够行使的到那八个法子?

call,apply,bind那多个主意其实都以一连自Function.prototype中的,属于实例方法。

 console.log(Function.prototype.hasOwnProperty('call')) //true
 console.log(Function.prototype.hasOwnProperty('apply')) //true
 console.log(Function.prototype.hasOwnProperty('bind')) //true

下面代码中,都回来了true,注解两种格局都以三番五次自Function.prototype的。当然,普通的靶子,函数,数组都一而再了Function.prototype对象中的五个点子,所以那多少个点子都得以在对象,数组,函数中利用。

有关持续的定义,会在其后与我们大饱眼福。

2.Function.prototype.call()

 函数实例的call方法,能够钦赐该函数内部this的指向(即函数施行时所在的作用域),然后在所钦赐的功能域中,调用该函数。并且会及时施行该函数。

4858美高梅 , 看个例子来能够通晓那段话。

 var keith = {
 rascal: 123
 };
 var rascal = 456;
 function a() {
 console.log(this.rascal);
 }
 a(); //456
 a.call(); //456
 a.call(null); //456
 a.call(undefined); //456
 a.call(this); //456
 a.call(keith); //123

地方代码中,a函数中的this关键字,要是指向全局对象,重返结果为45陆。可以见到,倘诺call方法未有参数,或然参数为null或undefined恐怕this,则同样指向全局对象。如若运用call方法将this关键字指向keith对象,也正是将该函数施行时所在的成效域为keith对象,重返结果为12三。

call()方法能够传递五个参数。第二个参数是钦定函数内部中this的针对性(也正是函数执行时所在的作用域),第3个参数是函数调用时索要传递的参数。

function keith(a, b) {
 console.log(a + b);
 }
keith.call(null, 1, 2); //3

首先个参数是必须的,能够是null,undefined,this,但是不能够为空。设置为null,undefined,this注明函数keith此时地处大局功能域。首个参数中必须二个个增添。而在apply中必须以数组的样式丰富。

call方法的三个行使是调用对象的原生方法。也能够用于将类数组对象调换为数组。

var obj = {};
 console.log(obj.hasOwnProperty('toString')); //false
 obj.hasOwnProperty = function() {
 return true;
 }
 console.log(obj.hasOwnProperty('toString')); //true
 console.log(Object.prototype.hasOwnProperty.call(obj, 'toString')); //false

地方代码中,hasOwnProperty是obj对象承袭的办法,假设这一个法子壹旦被掩盖,就不会获得不错结果。call方法能够化解这一个办法,它将hasOwnProperty方法的原本定义放到obj对象上实行,那样无论obj上有未有同名方法,都不会潜移默化结果。要留意的是,hasOwnProperty是Object.prototype原生对象的艺术,而call是持续自Function.prototype的艺术。

3.Function.prototype.apply()

apply方法的效益与call方法类似,也是改换this指向(函数实施时所在的功用域),然后在钦命的法力域中,调用该函数。同时也会立马执行该函数。唯1的区分即是,它接受二个数组作为函数实施时的参数。

apply方法的首先个参数也是this所要指向的卓殊目的,如果设为null或undefined或许this,则一样钦赐全局对象。第三个参数则是二个数组,该数组的具有成员相继作为参数,在调用时传出原函数。原函数的参数,在call方法中必须二个个加多,可是在apply方法中,必须以数组方式丰富。

看一下call,apply的细微差距。

function keith(a, b) {
 console.log(a + b);
 }
 keith.call(null, 2, 3); //5
 keith.apply(null, [2, 3]); //5

 

地点代码中,第多少个参数为null,指向全局效率域;第一个参数字传送入的花样稍稍差异。

apply方法有以下应用。

叁.一:寻找数组中的最大数

var a = [2, 4, 5, 7, 8, 10];
console.log(Math.max.apply(null, a)); //10
console.log(Math.max.call(null,2, 4, 5, 7, 8, 10)); //10 

Javascript中是从未有过提供搜索数组中最大值的办法的,结合使用持续自Function.prototype的apply和Math.max方法,就能够回去数组的最大值。

三.二:将数组的空成分变为undefined

因此apply方法,利用Array构造函数将数组的空成分形成undefined。

console.log(Array.apply(null, [1, , 3])); // [1, undefined, 3]

空成分与undefined的歧异在于,数组的forEach方法会跳过空成分,可是不会跳过undefined和null。因而,遍历内部因素的时候,会获得不一样的结果。

var a = [1, , 3];
 a.forEach(function(index) {
 console.log(index); //1,3 ,跳过了空元素。
 })
 Array.apply(null,a).forEach(function(index){
 console.log(index); ////1,undefined,3 ,将空元素设置为undefined
 })

三.叁:调换类似数组的靶子

除此以外,利用数组对象的slice方法,能够将二个近乎数组的指标(举例arguments对象)转为真正的数组。当然,slice方法的多个第一应用,就是将接近数组的对象转为真正的数组。call和apply都得以兑现该使用。

console.log(Array.prototype.slice.apply({0:1,length:1})); //[1]
console.log(Array.prototype.slice.call({0:1,length:1})); //[1]
console.log(Array.prototype.slice.apply({0:1,length:2})); //[1,undefined]
console.log(Array.prototype.slice.call({0:1,length:2})); //[1,undefined]
function keith(a,b,c){
 return arguments;
 }
console.log(Array.prototype.slice.call(keith(2,3,4))); //[2,3,4]

地点代码的call,apply方法的参数都是目的,可是回到结果都以数组,那就起到了将目的转成数组的目的。从上边代码能够见见,那些措施起效果的前提是,被拍卖的对象必须有length属性,以及相对应的数字键。

4.Function.prototype.bind()

bind方法用于钦点函数内部的this指向(实施时所在的效率域),然后回到一个新函数。bind方法毫无马上施行3个函数。

var keith = {
 a: 1,
 count: function() {
 console.log(this.a++);
 }
 };
 keith.count(); //1
 keith.count(); //2
 keith.count(); //3

上边代码中,假诺this.a指向keith对象内部的a属性,假若这么些点子赋值给其余三个变量,调用时就能够出错。

 var keith = {
 a: 1,
 count: function() {
 console.log(this.a++);
 }
 };
 var f = keith.count;
 f(); //NaN

上边代码中,假若把count方法赋值给f变量,那么this对象指向不再是keith对象了,而是window对象。而window.a默感觉undefined,举行递增运算之后undefined++就等于NaN。

为了化解这一个题目,能够选取bind方法,将keith对象里的this绑定到keith对象上,也许是直接调用。

 var f = keith.count.bind(keith);
 f(); //1
 f(); //2
 f(); //3
 keith.count.bind(keith)() //1
 keith.count.bind(keith)() //2
 keith.count.bind(keith)() //3

 当然,this也能够绑定到任何对象上。

 var obj = {
 a: 100
 };
 var f = keith.count.bind(obj);
 f(); //100
 f(); //101
 f(); //102

同样,大家也得以给bind方法传递参数,第一个参数如若为null大概undefined或然this,会将函数内部的this对象指向全局情状;第1个为调用时索要的参数,并且传递参数的情势与call方法一样。

 function keith(a, b) {
 return a + b;
 }
 console.log(keith.apply(null,[1,4])); //5
 console.log(keith.call(null,1,4)); //5
 console.log(keith.bind(null, 1, 4)); //keith()
 console.log(keith.bind(null, 1, 4)()); //5

地方代码中,可以见见call,apply,bind3者的区分:call和apply方法都以在调用之后随即实践的。而bind调用之后是再次来到原函数,要求再调用一遍才行,有点像闭包的含意,要是对闭包概念目生,能够浏览那两篇文章:深远了然javascript函数参数与闭包,浅谈JavaScript的闭包函数。

5.绑定回调函数的对象

在那篇小说javascript中this关键字详解中,有谈及到倘若在回掉函数中央银行使this对象,那么this对象是会针对DOM对象,也正是button对象。就算要化解回调函数中this指向难题,可以用如下方法。

var o = {
 f: function() {
 console.log(this === o);
 }
 }
 $('#button').on('click', function() {
 o.f.apply(o);
 //或者 o.f.call(o);
 //或者 o.f.bind(o)();
 });

点击开关之后,调节台将会显得true。由于apply方法(也许call方法)不仅仅绑定函数实施时所在的靶子,还会立马实行函数(而bind方法不会马上试行,注意区分),因而只能把绑定语句写在二个函数体内。

6.call,apply,bind方法的关联和界别

  其实用于钦赐函数内部的this指向的主题材料,那三个点子都大约,只是存在格局上的异样。读者能够将上述的例证用两种方式尝试用三种方法实现。

  总计一下call,apply,bind方法:

  a:第三个参数皆以钦赐函数内部中this的指向(函数实践时所在的功效域),然后依照钦定的成效域,调用该函数。

  b:都能够在函数调用时传递参数。call,bind方法须要一直传入,而apply方法须求以数组的款型传播。

  c:call,apply方法是在调用之后霎时实践函数,而bind方法未有立即试行,须要将函数再举行一次。有点闭包的意味。

  d:改动this对象的针对难题不止有call,apply,bind方法,也得以行使that变量来固定this的针对性。如有疑问,请访问
javascript中this关键字详解

如上正是本文的全体内容,希望本文的原委对大家的就学恐怕专业能拉动一定的协助,同时也期待多多扶助脚本之家!

您大概感兴趣的稿子:

  • 浅谈JavaScript中的apply/call/bind和this的使用
  • 实例讲明JavaScript中call、apply、bind方法的异议
  • 详解js中的apply与call的用法
  • JS中退换this指向的方法(call和apply、bind)
  • JavaScript中的apply()方法和call()方法应用介绍
  • js中承接的两种用法总计(apply,call,prototype)
  • js
    apply/call/caller/callee/bind使用方法与不一致分析
  • js中call与apply的用法小结
  • JavaScript 中 apply 、call
    的详解

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有