HTML5技术

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

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

我想表达的意思是:在上文中,函数虽然被定义在对象的内部中,但它和在对象外部声明函数,然后在对象内部通过属性名称的方式取得函数的引用,这两种方式在 性质上 是等价的 ( 而不仅仅是效果上 ) 定义在对象内部

我想表达的意思是:在上文中,函数虽然被定义在对象的内部中,但它和“在对象外部声明函数,然后在对象内部通过属性名称的方式取得函数的引用”,这两种方式在性质上是等价的而不仅仅是效果上

 

定义在对象内部的函数只是“恰好可以被这个对象调用”而已,而不是“生来就是为这个对象所调用的”

 

借用下面的隐式绑定中的this传递丢失问题来说明:

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

 

 

上面这段简单代码的有趣之处在于: 这个于obj中的fire函数的引用( fireInGrobal)在调用的时候,行为表现(输出)完全看不出来它就是在obj内部定义的,其原因在于:我们隐式绑定的this丢失了!! 从而 fireInGrobal调用的时候取得的this不是obj,而是window

 

上面的例子稍微变个形式就会变成一个可能困扰我们的bug:

 

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

 

 

在上面,我们的关键角色是otherFire函数,它接受一个函数引用作为参数,然后在内部直接调用,但它做的假设是参数fn仍然能够通过this去取得obj内部的a属性,但实际上, this对obj的绑定早已经丢失了,所以输出的是全局的a的值(2),而不是obj内部的a的值(1)

 

在一串对象属性链中,this绑定的是最内层的对象

在隐式绑定中,如果函数调用位置是在一串对象属性链中,this绑定的是最内层的对象。如下所示:

var obj = {       a: 1,       obj2: {    a: 2,    obj3: { a:3, getA: function () {   console.log(this.a)      }    }        } }   obj.obj2.obj3.getA();  // 输出3

 

 

this的显式绑定:(call和bind方法)

【故事——线路3】 迪斯(this)穿越来异世界“伽瓦斯克利”(javascript),经过努力的打拼,积累了一定的财富,于是他买下了自己的房子

 

 

上面我们提到了this的隐式绑定所存在的this绑定丢失的问题,也就是对于 “ fireInGrobal = obj.fire”

fireInGrobal调用和obj.fire调用的结果是不同的,因为这个函数赋值的过程无法把fire所绑定的this也传递过去。这个时候,call函数就派上用场了

 

call的基本使用方式: fn.call(object)

fn是你调用的函数,object参数是你希望函数的this所绑定的对象。

fn.call(object)的作用:

1.即刻调用这个函数(fn)

2.调用这个函数的时候函数的this指向object对象

 

例子:

 

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

网友点评
r