你不知道的JavaScript 笔记

this绑定的时机

  • this是在运行时候绑定的,并不是在编写的时候,它的上下文取决于函数调用时候的各种条件。this的绑定和函数声明的位置没有任何关系,只取决于函数调用的位置。

this的绑定规则

  1. 默认绑定
    独立的函数调用,可以把这条规则看做是无法应用其他规则的默认规则。

        function foo(){
          console.log(this.a)
        }      
        var a = 2;
        foo()    //2
    
        // 这里的foo()函数是直接不带任何修饰的函数调用,因此只能使用默认绑定
    
  2. 隐式绑定
    函数调用位置是否有上下文对象,或者说是否被某个对象包含。

      function foo() {
         console.log(this.a)
      }
      var obj = {
        a: 2,
        foo:foo
      }
      obj.foo() // 2
      // 这里的隐私绑定会把函数调用中的this绑定到这个上下文对象。
    

    2.1 隐式丢失
    一个常见的问题是隐式绑定的函数会丢失绑定对象,也就是说会默认应用默认绑定,这时候的this可能会被绑定到全局上或者是undefined

        function foo() {
          console.log(this.a)
        }
        var obj = {
          a: 2,
          foo:foo
        }
        var bar = obj.foo();
        var a = 'global';
        bar() // global
    

    这里的bar函数引用了obj.foo,但实际上引用的是foo函数本身,因此此时的bar函数其实是一个不带任何修饰的函数调用,因此应用了默认绑定。
    参数传递也是一种隐式赋值。传入的回调函数中一般也是隐式丢失,应用默认绑定。

  3. 显式绑定
    使用bind apply call等方法签字改变this指向,我们称为显示绑定

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 119,182评论 16 133
  • 一、作用域是什么? 作用域是一套规则,用于确定去何处以及如何查找变量(标识符)。当一个块或者函数嵌套在另一个快或者...
    橙子猪乖乖阅读 76评论 0 3
  • 变量住在哪里?换句话说,它们储存在哪里?最重要的是,程序需要时如何找到它们?这些问题说明需要一套设计良好的规则来存...
    焉知非鱼阅读 86评论 0 0
  • 今天是这个学期的最后一天了,有很多的感触,觉得应该写一篇文章纪念一下历史性的日子。看似轻描淡写的一个决定其实是...
    优优花香阅读 59评论 0 0
  • 顾客找我订画,说画的不像。我后知后觉,发现该顾客已经找我定过三次画了,并且每次都说画的不像。真是感人的顾客,始终如...
    轶之小义子阅读 226评论 8 3