JavaScript高级之一JavaScript函数this指向详解

1. JavaScript函数this指向

1.0 this 到底指向什么呢

• 我们先来看一个让人困惑的问题：

  • 定义一个函数，我们采用三种不同的方式对它进行调用，它产生了三种不同的结果

• 这个的案例可以给我们什么样的启示呢？

  • 1.函数在调用时，JavaScript会默认给this绑定一个值；
  • 2.this的绑定和定义的位置，编写的位置没有关系；
  • 3.this的绑定和调用方式以及调用的位置有关系；
  • 4.this是在运行时被绑定的；

• 那么this到底是怎么样的绑定规则呢？一起来学习一下吧

  • 绑定一：默认绑定；
  • 绑定二：隐式绑定；
  • 绑定三：显示绑定；
  • 绑定四：new绑定；

1.1 规则一：默认绑定

• 什么情况下使用默认绑定呢？独立函数调用。
  • 独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用；
• 我们通过几个案例来看一下，常见的默认绑定
  

<script>
    // "use strict"
    // 定义函数
    // 1.普通的函数被独立的调用
    function foo() {
      console.log("foo:", this)
    }
    foo()   //this----》window
    // 2.函数定义在对象中, 但是独立调用
    var obj = {
      name: "why",
      bar: function() {
        console.log("bar:", this)
      }
    }
    var baz = obj.bar   //将函数赋值给另外一个变量然后再由变量调用仍然属于独立调用
    baz()  //this----》window
    // 3.高阶函数
    function test(fn) {
      fn()  //this----》window
    }
    test(obj.bar)   //传入函数后，函数自己独立调用
    // 4.严格模式下, 独立调用的函数中的this指向的是undefined
  </script>

1.2 规则二：隐式绑定

• 另外一种比较常见的调用方式是通过某个对象进行调用的：
  • 也就是它的调用位置中，是通过某个对象发起的函数调用。
• 我们通过几个案例来看一下，常见的默认绑定

<script>
    // 你不知道的JavaScript(上中下)
    // 隐式绑定
    function foo() {
      console.log("foo函数:", this)
    }
    var obj = {
      bar: foo
    }
    obj.bar()//需要通过对象调用
  </script>

1.3 规则三：显示绑定

• 隐式绑定有一个前提条件：

  • 必须在调用的对象内部有一个对函数的引用（比如一个属性）；
  • 如果没有这样的引用，在进行调用时，会报找不到该函数的错误；
  • 正是通过这个引用，间接的将this绑定到了这个对象上；

• 如果我们不希望在 对象内部 包含这个函数的引用，同时又希望在这个对象上进行强制调用，该怎么做呢？

• JavaScript所有的函数都可以使用call和apply方法。

  • 第一个参数是相同的，要求传入一个对象；
    • 这个对象的作用是什么呢？就是给this准备的。
    • 在调用这个函数时，会将this绑定到这个传入的对象上。
  • 后面的参数，apply为数组，call为参数列表；

• 因为上面的过程，我们明确的绑定了this指向的对象，所以称之为 显式绑定。

<script>
    // 显式绑定
    var obj = {
      name: "why"
    }
    function foo() {
      console.log("foo函数:", this)
    }
    // 执行函数, 并且函数中的this指向obj对象
    // obj.foo = foo
    // obj.foo()
    // 执行函数, 并且强制this就是obj对象
    foo.call(obj)
   
  </script>

1.4 call apply bind

• 通过call或者apply绑定this对象
  • 显示绑定后，this就会明确的指向绑定的对象

 <script>
    // call/apply
    function foo(name, age, height) {
      console.log("foo函数被调用:", this)
      console.log("打印参数:", name, age, height)
    }
    // ()调用
    // foo("why", 18, 1.88)
    // apply
    // 第一个参数: 绑定this
    // 第二个参数: 传入额外的实参, 以数组的形式
    // foo.apply("apply", ["kobe", 30, 1.98])
    // call
    // 第一个参数: 绑定this
    // 参数列表: 后续的参数以多参数的形式传递, 会作为实参
    foo.call("call", "james", 25, 2.05)
  </script>

• 如果我们希望一个函数总是显示的绑定到一个对象上，可以怎么做呢？
  • 使用bind方法，bind() 方法创建一个新的绑定函数（bound function，BF）；
  • 绑定函数是一个 exotic function object（怪异函数对象，ECMAScript 2015 中的术语）
  • 在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

 <script>
    function foo(name, age, height, address) {
      console.log("foo:", this)
      console.log("参数:", name, age, height, address)
    }
    var obj = { name: "why" }
    // 需求: 调用foo时, 总是绑定到obj对象身上(不希望obj对象身上有函数)
    // 1.bind函数的基本使用
    // var bar = foo.bind(obj)//绑定obj对象
    // bar() // this -> obj
    // 2.bind函数的其他参数(了解)
    var bar = foo.bind(obj, "kobe", 18, 1.88)
    bar("james")
  </script>

1.5 内置函数的绑定思考

• 有些时候，我们会调用一些JavaScript的内置函数，或者一些第三方库中的内置函数。
  • 这些内置函数会要求我们传入另外一个函数；
  • 我们自己并不会显示的调用这些函数，而且JavaScript内部或者第三方库内部会帮助我们执行；
  • 这些函数中的this又是如何绑定的呢？
• setTimeout、数组的forEach、div的点击
• 

1.6 new绑定

• JavaScript中的函数可以当做一个类的构造函数来使用，也就是使用new关键字。
• 使用new关键字来调用函数是，会执行如下的操作：
  • 1.创建一个全新的对象；
  • 2.这个新对象会被执行prototype连接；
  • 3.这个新对象会绑定到函数调用的this上（this的绑定在这个步骤完成）；
  • 4.如果函数没有返回其他对象，表达式会返回这个新对象；

1.7 规则优先级

• 学习了四条规则，接下来开发中我们只需要去查找函数的调用应用了哪条规则即可，但是如果一个函数调用位置应用了多条规则，优先级谁更高呢？
• 1.默认规则的优先级最低
  • 毫无疑问，默认规则的优先级是最低的，因为存在其他规则时，就会通过其他规则的方式来绑定this
• 2.显示绑定优先级高于隐式绑定

    function foo() {
      console.log("foo:", this)
    }
    // 比较优先级:
    // 1.显式绑定绑定的优先级高于隐式绑定
    // 1.1.测试一:apply高于默认绑定
    var obj = { foo: foo }
    obj.foo.apply("abc")  // this->String
    obj.foo.call("abc")   //this ->string
    
    
 // 1.2.测试二:bind高于默认绑定
    var bar = foo.bind("aaa")
    var obj = {
      name: "why",
      baz: bar
    }
    obj.baz()  //this->String

• 3.new绑定优先级高于隐式绑定

    var obj = {
      name: "why",
      foo: function() {
        console.log("foo:", this)
        console.log("foo:", this === obj)
      }
    }
    new obj.foo()

• 4.new绑定优先级高于bind
  • new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高
  • new绑定可以和bind一起使用，new绑定优先级更高

  function foo() {
      console.log("foo:", this)
    }
    var bindFn = foo.bind("aaa")
    new bindFn()   this-->foo

1.8 this 规则之外-忽略显示绑定

• 我们讲到的规则已经足以应付平时的开发，但是总有一些语法，超出了我们的规则之外。（神话故事和动漫中总是有类似这样的人物）
• 情况一：如果在显示绑定中，我们传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则：

1.9 this规则之外-间接函数引用

• 情况二：创建一个函数的 间接引用，这种情况使用默认绑定规则。
  • 赋值(obj2.foo = obj1.foo)的结果是foo函数；
  • foo函数被直接调用，那么是默认绑定；
    

1.10 箭头函数 arrow function

• 箭头函数是ES6之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁：
  • 箭头函数不会绑定this、arguments属性；
  • 箭头函数不能作为构造函数来使用（不能和new一起来使用，会抛出错误）；
• 箭头函数如何编写呢？
  • (): 函数的参数
  • {}: 函数的执行体

1.11箭头函数的编写优化

• 优化一: 如果只有一个参数()可以省略

• 优化二: 如果函数执行体中只有一行代码, 那么可以省略大括号

  • 并且这行代码的返回值会作为整个函数的返回值

• 优化三: 如果函数执行体只有返回一个对象, 那么需要给这个对象加上()
  

1.12 this规则之外-ES6箭头函数

• 箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this。
• 我们来看一个模拟网络请求的案例：
  • 这里我使用setTimeout来模拟网络请求，请求到数据后如何可以存放到data中呢？
  • 我们需要拿到obj对象，设置data；
  • 但是直接拿到的this是window，我们需要在外层定义：var _this = this
  • 在setTimeout的回调函数中使用_this就代表了obj对象

1.13 ES6箭头函数this

• 之前的代码在ES6之前是我们最常用的方式，从ES6开始，我们会使用箭头函数：
  • 为什么在setTimeout的回调函数中可以直接使用this呢？
  • 因为箭头函数并不绑定this对象，那么this引用就会从上层作用于中找到对应的this

  <script>
    // 网络请求的工具函数
    function request(url, callbackFn) {
      var results = ["abc", "cba", "nba"]
      callbackFn(results)
    }
    // 实际操作的位置(业务)
    var obj = {
      names: [],
      network: function() {
        // 1.早期的时候
        // var _this = this  //this-->obj
        // request("/names", function(res) {
        //   console.log("回调方法",this)   //this--->window
        //   _this.names = [].concat(res)
        // })
        // 2.箭头函数写法
        request("/names", (res) => {
          console.log("箭头函数",this)   //this--->obj  
          this.names = [].concat(res)
        })
      }
    }
    obj.network()
    console.log(obj)
  </script>

1.14 面试题一

1.15 面试题二

1.16 面试题三

1.17 面试题四