资讯专栏INFORMATION COLUMN

关于this的全面解析(下)

philadelphia / 1082人阅读

摘要:关于的全棉解析上的文章地址判断函数是否在中调用绑定如果是的话绑定的是新创建的对象。显而易见,这种方式可能会导致许多难以分析和追踪的。默认在严格模式下绑定到,否则绑定到全局对象。

关于this的全棉解析(上)的文章地址

判断this

函数是否在new中调用(new绑定)?如果是的话this绑定的是新创建的对象。

bar = new foo()

函数是否通过call、apply(显式绑定)或者硬绑定调用?如果是的话,this绑定的是指定的对象。

bar = foo.call(obj2)

函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this绑定的是那个上下文对象。

bar = obj1.foo()

如果都不是的话,使用默认绑定。如果在严格模式下,就绑定到undefined,否则绑定到全局对象。

bar = foo();

绑定例外
被忽略的this

如果把null或者undefined作为this的绑定对象传入call、apply或者bind,这些值在调用时会被忽略,实际应用的是默认绑定规则。

    function foo() {
    console.log(this.a);
    }
    var a = 2;
    foo.call(null); //2

然而,总是使用null来忽略this绑定可能产生一些副作用。如果某个函数确实使用了this,那默认绑定规则会把this绑定到全局对象(在浏览器中全局对象为window),这将导致不可预计的后果(比如修改全局对象)。
显而易见,这种方式可能会导致许多难以分析和追踪的bug。

更安全的this

一种“更安全”的做法是传入一个特殊的对象、把this绑定到这个对象不会对你的程序产生副作用。
在JavaScript中创建一个空对象最简单的方法都是Object.create(null),但是并不会创建Object.prototype这个委托。

    function foo(a, b) {
        console.log("a:" + a + ", b:" + b);
    }
    //创建一个新对象
    var emptyObj = Object.create(null);
    foo.apply(emptyObj, [2, 3])
    var bar = foo.bind(emptyObj, 2);
    bar(3);
间接引用

间接引用最容易在赋值时发生。

 

    function foo() {
        console.log(this.a);
    }
    var a = 2;
    var o = {
        a: 3,
        foo: foo
    };
    var p = {
        a: 4
    };
    o.foo(); //3
    (p.foo = o.foo)() //2

赋值表达式p.foo= o.foo的返回值是目标函数的引用,因此调用位置是foo()而不是p.foo()或者o.foo(),所以绑定的是全局对象。

小结

如果要判断一个运行中函数的this绑定,就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断this的绑定对象。

由new调用?绑定到新创建的对象。

由call或者apply(或者bind)调用?绑定到指定的对象。

由上下文对象调用?绑定到那个上下文对象。

默认:在严格模式下绑定到undefined,否则绑定到全局对象。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79700.html

相关文章

  • 关于this全面解析(上)

    摘要:关于的全面解析下页面链接的调用位置调用位置就是函数在代码中被调用的位置而不是声明的位置,寻找调用位置就是寻找函数被调用的位置,最重要的是分析调用栈就是为了到达当前执行位置所调用的所有函数。因此,调用函数时被绑定到这个对象上,所以和是一样的。 关于this的全面解析(下)页面链接 this的调用位置 调用位置就是函数在代码中被调用的位置(而不是声明的位置),寻找调用位置就是寻找函数被调用...

    caige 评论0 收藏0
  • this全面解析(一)

    摘要:调用栈就是为了到达当前执行位置所调用的所有函数。由于无法控制回调函数的执行方式,因此就没有办法控制调用位置得到期望的绑定,下一节我们会介绍如何通过固定来修复这个问题。 在《你不知道的this》中我们排除了对于this的错误理解,并且明白了每个函数的this是在调用时绑定的,完全取决于函数的调用位置。在本节中我们主要介绍一下几个主要内容: 什么是调用位置 绑定规则 this词法 调用...

    darry 评论0 收藏0
  • this全面解析(二)

    摘要:在传统的面向类的语言中,构造函数是类中的一些特殊方法,使用初始化类是会调用类中的构造函数。 在上一节中我们详细介绍了this的两种绑定方式,默认绑定和隐式绑定,在这一节我们继续介绍this的另外两种绑定方式显示绑定和new绑定。那么,我们要解决的问题当然就是上一节中我们提到的:this丢失! 显式绑定 在隐式绑定中,我们必须在一个对象的内部包含一个指向函数的属性,并通过这个属性间接引用...

    iflove 评论0 收藏0
  • Java杂记17—String全面解析

    摘要:所以也就是说在没有的基础上,执行代码会在串池中创建一个,也会在堆内存中再出来一个。不可变性的优点安全性字符串不可变安全性的考虑处于两个方面,数据安全和线程安全。 摘要: String基本特性,String源码,为什么String不可变? 前言 基于字符串String在java中的地位,关于String的常识性知识就不多做介绍了,我们先来看一段代码 public class Test {...

    jeffrey_up 评论0 收藏0
  • 用小程序·云开发打造功能全面博客小程序丨实战

    摘要:用小程序云开发将博客小程序常用功能一网打尽本文介绍博客小程序的详情页的功能按钮如何实现,具体包括评论点赞收藏和海报功能,这里记录下整个实现过程和实际编码中的一些坑。考虑到小程序本身的大小限制,使用的方式是最佳的。 用小程序·云开发将博客小程序常用功能一网打尽 本文介绍mini博客小程序的详情页的功能按钮如何实现,具体包括评论、点赞、收藏和海报功能,这里记录下整个实现过程和实际编码中的一...

    cc17 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<