()=＞{}箭头函数this

叮咚前端

已于 2022-02-10 10:22:53 修改

阅读量616

点赞数

分类专栏：高级js

于 2022-02-09 21:25:12 首次发布

本文链接：https://blog.csdn.net/qq_43033748/article/details/122846271

版权

JavaScript this指向箭头函数函数调用作用域

关键词由CSDN通过智能技术生成

高级js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.箭头函数是没有绑定this，到上层作用域找this

参数（）
箭头=》
函数执行体{}


var obj = {
    data: [],
    getData: function () {
      // setTimeout(function (){
      //   //this 指向window
      //   this.data=[1,2,3]
      //         console.log(this)
      //       }, 1000);
      setTimeout(()=> {
  //箭头函数没有绑定this，只能向上级作用域this
  this.data=[1,2,3]
        console.log(this)
      }, 1000);
    }
  
  }
  obj.getData()

3.this指向 1.this指向

 var name = 'window'
    var person = {
      name: 'person',
      sayName: function () {
        console.log(this.name)
      },
    }
    function sayName() {
      var sss = person.sayName
      sss()
      person.sayName()
      person.sayName()
      ;(b = person.sayName)()
    }
    sayName()

4.this指向

 var name = 'window'
    var person1 = {
      name: 'person1',
      foo1: function () {
        console.log(this.name)
      },
      foo2: () => console.log(this.name),
      foo3: function () {
        return function () {
          console.log(this.name)
        }
      },
      foo4: function () {
        return () => {
          console.log(this.name)
        }
      },
    }
    var person2 = { name: 'person2' }
    person1.foo1() //隐式绑定person1
    person1.foo1.call(person2) //显示绑定person2
    person1.foo2() //箭头函数没有绑定this，上级作用this是window
    person1.foo2.call(person2) //箭头函数没有绑定this，上级作用this是window
    person1.foo3()() //function () {console.log(this.name)}() 独立行数指向window
    person1.foo3.call(person2)() //function () {console.log(this.name)}() 独立行数指向window
    person1.foo3().call(person2) //person2
    person1.foo4()() //person1.foo4()隐式绑定thsi指向person1，返回箭头函数查找上级作用域是person1
    person1.foo4.call(person2)() //person1.foo4.call(person2)显示绑定改变this的指向成person2返回 箭头函数上层作用域是person2
    person1.foo4().call(person2) //person1.foo4()返回 箭头函数上层作用域是person1
    // 隐式绑定，肯定是person1person1.foo1();
     // person1
     // 隐式绑定和显示绑定的结合，显示绑定生效，所以是person2person1.foo1.call(person2);
     // person2
     // foo2()是一个箭头函数，不适用所有的规则person1.foo2()
     // window
     // foo2依然是箭头函数，不适用于显示绑定的规则person1.foo2.call(person2)
      // window
      // 获取到foo3，但是调用位置是全局作用于下，所以是默认绑定windowperson1.foo3()()
      // window
      // foo3显示绑定到person2中
      // 但是拿到的返回函数依然是在全局下调用，所以依然是windowperson1.foo3.call(person2)()
      // window
      // 拿到foo3返回的函数，通过显示绑定到person2中，所以是person2person1.foo3().call(person2)
      // person2
      // foo4()的函数返回的是一个箭头函数
      // 箭头函数的执行找上层作用域，是person1person1.foo4()()
      // person1
      // foo4()显示绑定到person2中，并且返回一个箭头函数
      // 箭头函数找上层作用域，是person2person1.foo4.call(person2)()
      // person2
      // foo4返回的是箭头函数，箭头函数只看上层作用域person1.foo4().call(person2)
      // person1
       {# person1
      this面题.html:16 person2
      this面题.html:18 window
      this面题.html:18 window
      this面题.html:21 window
      this面题.html:21 window
      this面题.html:21 person2
      this面题.html:26 person1
      this面题.html:26 person2
      this面题.html:26 person1 #}

3.this指向

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div id="app"></div>
  </body>

  <script>
    var name = 'window'
    function Person(name) {
      this.name = name
      ;(this.foo1 = function () {
        console.log(this.name)
      }),
        (this.foo2 = () => console.log(this.name)),
        (this.foo3 = function () {
          return function () {
            console.log(this.name)
          }
        }),
        (this.foo4 = function () {
          return () => {
            console.log(this.name)
          }
        })
    }
    var person1 = new Person('person1')
    var person2 = new Person('person2')
    person1.foo1() //person1
    person1.foo1.call(person2) person2
    person1.foo2() //person1
    person1.foo2.call(person2) //person2
    person1.foo3()() //window
    person1.foo3.call(person2)() //window
    person1.foo3().call(person2) //person2
    person1.foo4()() //person1
    person1.foo4.call(person2)() //person2
    person1.foo4().call(person2) //person1
    // 隐式绑定person1.foo1()
    // peron1
    // 显示绑定优先级大于隐式绑定person1.foo1.call(person2)
    // person2
    // foo是一个箭头函数，会找上层作用域中的this，那么就是person1person1.foo2()
    // person1
    // foo是一个箭头函数，使用call调用不会影响this的绑定，和上面一样向上层查找person1.foo2.call(person2)
    // person1
    // 调用位置是全局直接调用，所以依然是window(默认绑定)person1.foo3()()
    // window
    // 最终还是拿到了foo3返回的函数，在全局直接调用(默认绑定)person1.foo3.call(person2)()
    // window
    // 拿到foo3返回的函数后，通过call绑定到person2中进行了调用person1.foo3().call(person2)
    // person2// foo4返回了箭头函数，和自身绑定没有关系，上层找到person1person1.foo4()()
    // person1// foo4调用时绑定了person2，返回的函数是箭头函数，调用时，找到了上层绑定的person2person1.foo4.call(person2)()
    // person2
    // foo4调用返回的箭头函数，和call调用没有关系，找到上层的person1person1.foo4().call(person2)
    // person1
  </script>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div id="app"></div>
  </body>

  <script>
    var name = 'window'
    function Person(name) {
      this.name = name
      this.obj = {
        name: 'obj',
        foo1: function () {
          return function () {
            console.log(this.name)
          }
        },
        foo2: function () {
          return () => {
            console.log(this.name)
          }
        },
      }
    }
    var person1 = new Person('person1')
    var person2 = new Person('person2')
    person1.obj.foo1()() //window
    person1.obj.foo1.call(person2)() //window
    person1.obj.foo1().call(person2) //person2
    person1.obj.foo2()() //obj
    person1.obj.foo2.call(person2)() //person2
    person1.obj.foo2().call(person2) //obj
    // obj.foo1()返回一个函数
    // 这个函数在全局作用于下直接执行(默认绑定)person1.obj.foo1()()
    // window// 最终还是拿到一个返回的函数(虽然多了一步call的绑定)
    // 这个函数在全局作用于下直接执行(默认绑定)person1.obj.foo1.call(person2)()
    // windowperson1.obj.foo1().call(person2)
    // person2// 拿到foo2()的返回值，是一个箭头函数
    // 箭头函数在执行时找上层作用域下的this，就是objperson1.obj.foo2()()
    // obj
    // foo2()的返回值，依然是箭头函数，但是在执行foo2时绑定了person2
    // 箭头函数在执行时找上层作用域下的this，找到的是person2person1.obj.foo2.call(person2)()
    // person2
    // foo2()的返回值，依然是箭头函数
    // 箭头函数通过call调用是不会绑定this，所以找上层作用域下的this是objperson1.obj.foo2().call(person2)
    // obj
  </script>
</html>