JavaScript函数this绑定规则

1. this.的绑定规则

a.this到底指向什么

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

  • 定义一个函数，我们采用三种不同的方式对它进行调用，它产生了三种不同的结果
    ```javascript // 定义一个函数 function foo() { console.log(this); }

// 1.调用方式一： 直接调用 foo(); //window

// 2.调用方式二：将foo放到一个对象中，再调用 var obj = { name: ‘ccb’, foo: foo, }; obj.foo(); //obj对象

// 3.调用方式三：通过call/apply调用 foo.call(‘abc’); //String{“abc”}对象

  1.  ◼  **这个的案例可以给我们什么样的启示呢  ?**
  3. -  1.函数在调用时，JavaScript会默认给this绑定一个值；
  4. -  2.this的绑定和定义的位置（编写的位置）没有关系；
  5. -  3.this的绑定和调用方式以及调用的位置有关系； 
  6. -  4.this是在运行时被绑定的；  
  8.  ◼ **那么this到底是怎么样的绑定规则呢？一起来学习一下吧  **
  10. - 绑定一：默认绑定；
  11. - 绑定二：隐式绑定；
  12. - 绑定三：显示绑定；
  13. - 绑定四：new绑定；  
  14. <a name="V3Gy0"></a>
  15. ### 规则一：默认绑定
  16.  ◼ **当函数被独立调用的时候，this使用默认绑定**<br /> ◼ **几种常见的默认绑定**
  17. ```javascript
  18. // 1.案例一
  19. function foo() {
  20.   console.log(this);
  21. }
  22. foo(); // window
  24. // 案例二
  25. function test1() {
  26.   console.log(this);
  27.   test2(); // window
  28. }
  29. function test2() {
  30.   console.log(this);
  31.   test3(); // window
  32. }
  33. function test3() {
  34.   console.log(this);
  35. }
  36. test1(); // window
  38. // 案例三
  39. function foo(func) {
  40.   func(); //window
  41. }
  42. var obj = {
  43.   name: 'ccb',
  44.   bar: function () {
  45.     console.log(this);
  46.   },
  47. };
  48. foo(obj.bar); //传入了函数本身，和obj没啥关系了

规则二：隐式绑定

◼ 另外一种比较常见的调用方式是通过某个对象进行调用的：

  • 也就是它的调用位置中，是通过某个对象发起的函数调用。

    ◼ 几种常见的隐式绑定 ```javascript // 1.通过对象调用 function foo() { console.log(this); }

var obj = { name: ‘why’, foo: foo, }; obj.foo(); //obj对象

  1. ```javascript
  2. // 情景二
  3. function foo() {
  4.   console.log(this);
  5. }
  6. var obj1 = {
  7.   name: 'obj1',
  8.   foo: foo,
  9. };
  10. var obj2 = {
  11.   name: 'obj2',
  12.   obj1: obj1,
  13. };
  14. obj2.obj1.foo(); //obj1对象调用
  1. // 情景三
  2. function foo() {
  3.   console.log(this);
  4. }
  5. var obj1 = {
  6.   name: 'obj1',
  7.   foo: foo,
  8. };
  10. // 将obj1的foo赋值给bar
  11. var bar = obj1.foo;
  12. bar(); //window调用

规则三：显示绑定

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

  • 必须在调用的对象内部有一个对函数的引用（比如一个属性）；
  • 如果没有这样的引用，在进行调用时，会报找不到该函数的错误；

  • 正是通过这个引用，间接的将this绑定到了这个对象上；

    ◼ 如果我们不希望在 对象内部 包含这个函数的引用，同时又希望在这个对象上进行强制调用，该怎么做呢？
    ◼ JavaScript所有的函数都可以使用call和apply方法。

  • 第一个参数是相同的，要求传入一个对象

    • 这个对象的作用是什么呢？就是给this准备的
    • 再调用这个函数时，会将this绑定到这个传入的对象上

  • 后面的参数，apply为数组，call为参数列表

    • func.applu（thisArg，[argsArray])
    • func.call（thisArg，arg1,arg2,....)

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

    call、apply、bind

    ◼ 通过call或者apply绑定this对象

  • 显示绑定后，this就会明确的指向绑定的对象

    1. function foo() {
    2. console.log(this);
    3. }
    4. foo.call(window); //window
    5. foo.call({ name: 'ccb' }); // {name:"ccb"}
    6. foo.call(123); // Number对象，存放时123

    ◼ 如果我们希望一个函数总是显示的绑定到一个对象上，可以怎么做呢？

  • 使用bind方法，bind() 方法创建一个新的绑定函数（bound function，BF）；

  • 绑定函数是一个 exotic function object（怪异函数对象，ECMAScript 2015 中的术语）
  • 在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

function.bind(thisArg,arg1,arg2,....)

内置函数的绑定思考

◼ 有些时候，我们会调用一些JavaScript的内置函数，或者一些第三方库中的内置函数。

  • 这些内置函数会要求我们传入另一个函数； （call back）
  • 我们自己并不会显示的调用这些函数，而且JavaScript内部或者第三方库内会帮助我们执行；
  • 这些函数中的this又是如何绑定的呢？

◼ setTimeout、数组的forEach、div的点击

  1. // setTimeout
  2. setTimeout(function () {
  3.   console.log(this); //window
  4. }, 1000);
  1. // 数组的forEach
  2. var names = ['abc', 'cba', 'nba'];
  3. var obj = { name: 'why' };
  4. names.forEach(function (item) {
  5.   console.log(this); //三次obj对象
  6. }, obj);
  1. var box = document.querySelector(".box")
  2. box.onclick = function(){
  3.     console.log(this === box)
  4. }

规则四:new绑定

◼ JavaScript中的函数可以当作一个类的构造函数来使用，也就是可以使用new关键字。
◼ 使用new关键字来调用函数，会执行如下的操作：

  1. 创建一个全新的对象
  2. 这个对象会被执行prototype连接
  3. 这个新对象会绑定到函数调用的this上（this的绑定再这个步骤完成）
  4. 如果函数没有返回其他对象，表达式会返回这个新对象。 ```javascript // 创建 Person function Person(name) { console.log(this); //Person{} this.name = name; //Person{name:”why”} } var p = new Person(‘why’); console.log(p);
  1. <a name="qIRGm"></a>
  2. ## 规则优先级
  3.  ◼ 学习了四条规则，接下来开发中我们只需要去查找函数的调用应用了哪条规则即可，但是如果一个函数调用位置应用了多 条规则，优先级谁更高呢？ <br />◼ **1.默认规则的优先级最低 **
  5. -  毫无疑问，默认规则的优先级是最低的，因为存在其他规则时，就会通过其他规则的方式来绑定this 
  7. ◼ **2.显示绑定优先级高于隐式绑定 **<br />◼ **3.new绑定优先级高于隐式绑定**<br />◼ **4.new绑定优先级高于bind **
  9. - new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高 
  10. -  new绑定可以和bind一起使用，new绑定优先级更高
  12. <a name="B6AyV"></a>
  13. ### this规则之外 - 忽略显示绑定
  14. ** ◼ 我们讲到的规则已经足以应付平时的开发，但是总有一些语法，超出了我们的规则之外。（神话故事和动漫总是有类似这样的人物）**<br />**◼ 情况一：如果在显示绑定中，我们传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则：**
  15. ```javascript
  16. function foo() {
  17.   console.log(this);
  18. }
  19. var obj = {
  20.   name: 'why',
  21. };
  22. foo.call(obj); //obj对象
  23. foo.call(null); // window
  24. foo.call(undefined); //window
  26. var bar = foo.bind(null);
  27. bar(); //window

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

◼ 情况二：创建一个函数的 间接引用，这种情况使用默认绑定规则。

  • 赋值 （obj2.foo = obj1.foo)的结果是foo函数
  • foo的函数被直接调用，那么是默认绑定
    1. function foo() {
    2. console.log(this);
    3. }
    4. var obj1 = {
    5. name: 'obj1',
    6. foo: foo,
    7. };
    8. var obj2 = {
    9. name: 'obj2',
    10. };
    11. obj1.foo(); // obj1对象
    12. (obj2.foo = obj1.foo)(); //obj1对象

箭头函数 arrow function

◼ 箭头函数是ES6之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁：

  • 箭头函数不会绑定this、arguments属性；

  • 箭头函数不能作为构造函数来使用（不能和new一起来使用，会抛出错误）；

    ◼ 箭头函数的基础形式

  • (): 函数的参数

  • {}: 函数的执行体
    1. nums.forEach((item,index,arr) => {
    2.  //函数体
    3. })

    箭头函数优化写法

  1. 只有一个参数时()可以省略
    1. nums.forEach(item => {})
  2. 如果函数执行体只有一行代码，那么可以省略大括号{}
    1. nums.forEach(item => console.log(item))
  3. 如果函数执行体只有返回一个对象，那么需要给这个对象加上()
    1. var bar = () => ({name:"abc"})

      箭头函数的this规则

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

  • 在setTimeout的回调函数中使用_this就代表了obj对象 

    1. var obj = (
    2. data:[],
    3. getData:function(){
    4.   var _this = this; //理解这边
    5.     setTimeout(function(){
    6.     var res = ["abc","bcd"];
    7.     _this.data.push(...res)
    8.   },1000)
    9. }
    10. )

    ◼ 之前的代码在ES6之前是我们最常用的方式，从ES6开始，我们会使用箭头函数：

  • 为什么在setTimeout的回调函数中可以直接使用this呢？

  • 因为箭头函数并不绑定this对象，那么this引用就会从上层作用于中找到对应的this 
    1. var obj = {
    2. data:[],
    3. getData:function(){
    4.  setTimeout(()=>{
    5.    var res = ["abc","bcd"]
    6.    this.data.push(...res)
    7.  },100)
    8. }
    9. }
    ◼ 思考为什么下面的this是window 
    1. var obj = {
    2. data:[],
    3. getData:()=>{
    4.  setTimeout(()=>{
    5.    console.log(this) //window
    6.  },100)
    7. }
    8. }

this - 面试题

  1. var name = "window";
  2. var person = {
  3.   name: "person",
  4.   sayName: function () {
  5.     console.log(this.name);
  6.   }
  7. };
  8. function sayName() {
  9.   var sss = person.sayName;
  10.   sss(); // 默认调用 window
  11.   person.sayName();  // 隐式调用 person对象
  12.   (person.sayName)(); // 隐式调用 person对象
  13.   (b = person.sayName)();   //默认调用 window
  14. }
  15. sayName();

解析：

  1. var name = 'window'
  2. var person1 = {
  3.   name: 'person1',
  4.   foo1: function () {
  5.     console.log(this.name)
  6.   },
  7.   foo2: () => console.log(this.name),
  8.   foo3: function () {
  9.     return function () {
  10.       console.log(this.name)
  11.     }
  12.   },
  13.   foo4: function () {
  14.     return () => {
  15.       console.log(this.name)
  16.     }
  17.   }
  18. }
  20. var person2 = { name: 'person2' }
  22. person1.foo1(); // person1
  23. person1.foo1.call(person2);  // person2
  25. person1.foo2(); // window  (箭头函数不能绑定this)
  26. person1.foo2.call(person2); // winodw  (箭头函数不能绑定this)
  28. person1.foo3()(); // window
  29. person1.foo3.call(person2)();  // window
  30. person1.foo3().call(person2); // person2
  32. person1.foo4()(); //person1 向外层作用域寻找this.name
  33. person1.foo4.call(person2)(); // person2 向外层作用域寻找this.name
  34. person1.foo4().call(person2);  // person1 向外层作用域寻找this.name

解析：

  1. var name = 'window'
  2. function Person (name) {
  3.   this.name = name
  4.   this.foo1 = function () {
  5.     console.log(this.name)
  6.   },
  7.   this.foo2 = () => console.log(this.name),
  8.   this.foo3 = function () {
  9.     return function () {
  10.       console.log(this.name)
  11.     }
  12.   },
  13.   this.foo4 = function () {
  14.     return () => {
  15.       console.log(this.name)
  16.     }
  17.   }
  18. }
  19. var person1 = new Person('person1')
  20. var person2 = new Person('person2')
  22. person1.foo1()// person1
  23. person1.foo1.call(person2)// perons2
  25. person1.foo2() //person1
  26. person1.foo2.call(person2) //person1
  28. person1.foo3()() // window
  29. person1.foo3.call(person2)() // window
  30. person1.foo3().call(person2) //perons2
  32. person1.foo4()() //person1
  33. person1.foo4.call(person2)() //person2
  34. person1.foo4().call(person2) //person1

解析：

  1. var name = 'window'
  2. function Person (name) {
  3.   this.name = name
  4.   this.obj = {
  5.     name: 'obj',
  6.     foo1: function () {
  7.       return function () {
  8.         console.log(this.name)
  9.       }
  10.     },
  11.     foo2: function () {
  12.       return () => {
  13.         console.log(this.name)
  14.       }
  15.     }
  16.   }
  17. }
  18. var person1 = new Person('person1')
  19. var person2 = new Person('person2')
  21. person1.obj.foo1()() 
  22. person1.obj.foo1.call(person2)()
  23. person1.obj.foo1().call(person2) 
  25. person1.obj.foo2()() 
  26. person1.obj.foo2.call(person2)() 
  27. person1.obj.foo2().call(person2)

解析：

作业和总结

一.this的绑定规则

◼ this一般指向一个对象，要明白this在什么情况下会被赋予什么值

  • 对于一般函数来说，函数执行的时候，this会根据函数的调用情况被赋予不同的值，分别有以下四种调用情况 ```javascript var fn = function(){ console.log(this) } var obj = { fn1 = function(){ console.log(this) } }

// 情况1 : 直接调用函数 => 默认绑定 fn(); // winodw

// 情况2 : 对象调用函数 => 隐式绑定 obj.fn1(); // obj对象

// 情况3 : call/apply/bind调用函数 => 显示绑定 fn.call(obj); // obj对象

// 情况4 : new调用函数 => new绑定 var newObj = new obj.fn1(); //fn1函数对象

  2. - this绑定有优先级，new绑定 > 显示绑定 > 隐式绑定 > 默认绑定
  4. **特殊的函数:箭头函数的this**<br />**箭头函数没有自己的this**，它会根据自己的**执行期上下文**向**外层作用域**寻找变量
  5. ```javascript
  6. var name = 'window'
  7. var person1 = {
  8.   name: 'person1',
  9.   foo4: function () {
  10.     return () => {
  11.       console.log(this.name)
  12.     }
  13.   }
  14. }
  16. var person2 = { name: 'person2' }
  19. person1.foo4()(); //person1 向外层作用域寻找this.name
  20. person1.foo4.call(person2)(); // person2 向外层作用域寻找this.name
  21. person1.foo4().call(person2);  // person1 向外层作用域寻找this.name

二.说出apply/call/bind函数的用法和区别

apply和call的作用相同，两者唯一的不同就是传递参数方式的不同。call传递的是参数列表，apply已数组的方式传递参数。
bind函数调用会返回一个默认绑定了this（显示绑定）的函数，并且可以传递参数，参数通过参数列表的形式传递。

用法：

  • apply
    第一个参数: 绑定this
    第二个参数: 传入额外的实参, 以数组的形式
  • call
    第一个参数: 绑定this
    参数列表: 后续的参数以多参数的形式传递, 会作为实参

  • bind(不希望obj对象身上有函数) 

    1.   var bar = foo.bind(obj)
    2.   bar() // this -> obj


    区别：

  • call、apply和bind都可以改变函数的this指向

  • call、apply和bind第一个参数的是this要指向的对象
  • call、apply和bind都可以后续为函数传参，apply是将参数并成一个数组，call和bind是将参数依次列出
  • call、apply都是直接调用，bind生成的this指向改变函数需要手动调用。

    三.说出箭头函数的各种用法和简写

    ```javascript // 基本语法 const fn = (arg1,arg2) => { console.log(“函数体”) }

// 简写一:函数传递参数只有一个的时候,可以省略括号 const fn = arg2 => { console.log(arg2) }

// 简写二:函数体只有一句语句的时候,且此语句的执行结果为返回值时可以省略大括号 const fn = arg2 => console.log(arg2)

```