HTML5技术

【javascript】函数中的this的四种绑定形式 — 大家准备好瓜子,我要讲故事啦~~ - 外婆的彭湖湾(3)

字号+ 作者:H5之家 来源:H5之家 2017-08-16 11:00 我要评论( )

var obj = {a: 1 , // a是定义在对象obj中的属性 fire: function () {console.log( this .a)}} fireInGrobal = obj.fire;fireInGrobal(); // 输出2 fireInGrobal.call(obj); // 输出1 原本丢失了与obj绑定的this参

var obj = {       a: 1,    // a是定义在对象obj中的属性       fire: function () {          console.log(this.a)       } }   fireInGrobal = obj.fire; fireInGrobal();   // 输出2 fireInGrobal.call(obj); // 输出1

 

 

原本丢失了与obj绑定的this参数的fireInGrobal再次重新把this绑回到了obj

 

但是,我们其实不太喜欢这种每次调用都要依赖call的方式,我们更希望:能够一次性 返回一个this被永久绑定到obj的fireInGrobal函数,这样我们就不必每次调用fireInGrobal都要在尾巴上加上call那么麻烦了。

 

怎么办呢? 聪明的你一定能想到,在fireInGrobal.call(obj)外面包装一个函数不就可以了嘛!

var obj = {       a: 1,    // a是定义在对象obj中的属性       fire: function () {   console.log(this.a)       } }   fn = obj.fire; var fireInGrobal = function () {     fn.call(obj)   //硬绑定 }         fireInGrobal(); // 输出1

 

如果使用bind的话会更加简单

var fireInGrobal = function () {     fn.call(obj)   //硬绑定 }

 

可以简化为:

var fireInGrobal = fn.bind(obj);

 

call和bind的区别是:在绑定this到对象参数的同时:

 

1.call将立即执行该函数

2.bind不执行函数,只返回一个可供执行的函数

 

【其他】:至于apply,因为除了使用方法,它和call并没有太大差别,这里不加赘述

 

在这里,我把显式绑定和隐式绑定下,函数和“包含”函数的对象间的关系比作买房和租房的区别。

 

 

因为this的缘故

 

在隐式绑定下:函数和只是暂时住在“包含对象“的旅馆里面,可能过几天就又到另一家旅馆住了

在显式绑定下:函数将取得在“包含对象“里的永久居住权,一直都会”住在这里“

 

new绑定

【故事】 迪斯(this)组建了自己的家庭,并生下多个孩子(通过构造函数new了许多个对象)

 

 

 

执行new操作的时候,将创建一个新的对象,并且将构造函数的this指向所创建的新对象

 

function foo (a) { this.a = a; }   var a1  = new foo (1); var a2  = new foo (2); var a3  = new foo (3); var a4  = new foo (4);   console.log(a1.a); // 输出1 console.log(a2.a); // 输出2 console.log(a3.a); // 输出3 console.log(a4.a); // 输出4

 

 

【完】

 

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • angular或者js如何确定选中ul中的哪几个li - 枫树下的风

    angular或者js如何确定选中ul中的哪几个li - 枫树下的风

    2017-08-16 10:01

  • 【javascript】详解javaScript的深拷贝 - 外婆的彭湖湾

    【javascript】详解javaScript的深拷贝 - 外婆的彭湖湾

    2017-08-15 12:01

  • 我眼中的ASP.NET Core之微服务 (二) - Savorboard

    我眼中的ASP.NET Core之微服务 (二) - Savorboard

    2017-07-21 11:00

  • 关于meta标签中的http-equiv属性使用介绍 - 予沫笙

    关于meta标签中的http-equiv属性使用介绍 - 予沫笙

    2017-07-18 15:00

网友点评
s