下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922
论坛 >编程语言 >javascript 函数中的 this 的四种绑定形式(二)

javascript 函数中的 this 的四种绑定形式(二)

课课家iOS游客发布于 2017-10-20 10:11查看:1630回复:1

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

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

image.png

        上面我们提到了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对象

        例子:

image.png

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

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

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

image.png

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

image.png        可以简化为:

image.png

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

        1.call将立即执行该函数

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

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

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

image.png

        因为this的缘故

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

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

      new绑定

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

image.png

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

image.png

收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

    • IT宅男
    • mr jack
    • Mr ken
    • Mright
    • cappuccino
    • YUI
    • 课课家运营团队
    • 课课家技术团队1
    • 酸酸~甜甜
    • 选择版块:

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: