01-JavaScript-this到底指向什么和箭头函数的使用

最新推荐文章于 2024-10-11 17:39:47 发布

不闲聊~Cyc

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量786

点赞数 23

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_50012753/article/details/142204573

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

https://www.yuque.com/g/buxianliaocyc/qzbz79/sro3kd/collaborator/join?token=sWcE3GghPX26sWxk&source=doc_collaborator# 《01-JavaScript-Senior》

一.this到底指向什么

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

:::tips
1.函数在调用时，JavaScript会默认给this绑定一个值；

2.this的绑定和定义的位置（编写的位置）没有关系；

3.this的绑定和调用方式以及调用的位置有关系；

4.this是在运行时被绑定的；

:::

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

:::tips
绑定一：默认绑定；

绑定二：隐式绑定；

绑定三：显示绑定；

绑定四：new绑定；

绑定优先级

new(优先级最高)
bind

* apply/call

隐式绑定
默认绑定

:::

使用new关键字来调用函数是，会执行如下的操作：(重要)

:::tips
1.创建一个全新的对象；

2.这个新对象会被执行prototype连接；

3.这个新对象会绑定到函数调用的this上（this的绑定在这个步骤完成）；

4.如果函数没有返回其他对象，表达式会返回这个新对象；

:::

  <script>
    // 1.Object.create()方法创建一个新对象，
    // 2.使用现有的对象来提供新创建的对象的__proto__。 （请打开浏览器控制台以查看运行结果。）
    function _new (obj, ...rest) {
      // 基于obj的原型创建一个新的对象
      // 子类续承父类
      const newObj = Object.create(obj.prototype)

      // 添加属性到新创建的newObj上 并获取obj函数执行结果
      const result = obj.apply(newObj,rest)

      // 如果执行结果有返回值并且是一个对象, 返回执行的结果, 否则, 返回新创建的对象
      // return typeof result === 'object' ? result : newObj;
      return (typeof result === 'object' && result !== null ) ? result : newObj
    }

      const tb = new Person('Chen', 'Tianbao');
      console.log(tb);

      const tb2 = _new(Person, 'Chen', 'Tianbao');
      console.log(tb2)


      // Object.create()
      /**
       * Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
       * 通俗说，传进入一个目标对象作为create的参数，会生成一个新对象。而这个新对象的__proto__是由目标对象提供的。
       */ 
      // Shape - 父类 (superclass)
      function Shape () {
        this.x = 0
        this.y = 0
      }
      // 父类的方法
      Shape.prototype.move = function(x,y) {
        this.x = x
        this.y = y
        // console.log(first)
      }
      // Rectangle - 子类(subclass)
      function Rectangle() {
        Shape.call(this); // call super constructor.
      }
      // 子类续承父类
      Rectangle.prototype = Object.create(Shape.prototype);

  </script>

this指向的分析

 <script>

    // 定义函数
    function foo(name) {
      console.log("foo函数:", this)
    }

    // 1.方式一: 直接调用
    // foo()

    // 2.方式二: 通过对象调起
    var obj = { name: "why" }
    obj.aaa = foo
    
    obj.aaa()

  </script>

this绑定规则一-默认绑定

<script>
    // "use strict"

    // 定义函数
    // 1.普通的函数被独立的调用
    function foo() {
      console.log("foo:", this)
    }
    foo()


    // 2.函数定义在对象中, 但是独立调用
    var obj = {
      name: "why",
      bar: function() {
        console.log("bar:", this)
      }
    }

    var baz = obj.bar
    baz()


    // 3.高阶函数
    function test(fn) {
      fn()
    }

    test(obj.bar)

    // 4.严格模式下, 独立调用的函数中的this指向的是undefined

  </script>

this绑定规则二-隐式绑定

  <script>
    // 你不知道的JavaScript(上中下)
    // 隐式绑定
    function foo() {
      console.log("foo函数:", this)
    }

    var obj = {
      bar: foo
    }

    obj.bar()

  </script>

this绑定规则三-new绑定

  <script>

    /*
      1.创建新的空对象
      2.将this指向这个空对象
      3.执行函数体中的代码
      4.没有显示返回非空对象时, 默认返回这个对象
    */
    function foo() {
      this.name = "why"
      console.log("foo函数:", this)
    }

    new foo()

  </script>

this绑定规则四-显式绑定

  <script>
    // 显式绑定
    var obj = {
      name: "why"
    }

    function foo() {
      console.log("foo函数:", this)
    }

    // 执行函数, 并且函数中的this指向obj对象
    // obj.foo = foo
    // obj.foo()

    // 执行函数, 并且强制this就是obj对象
    foo.call(obj)
    foo.call(123)
    foo.call("abc")

  </script>

call、apply、bind

:::tips
**call/apply**区别:

apply:1.第一个参数:绑定this

2.第二个参数:传入额外的实参,以数组的形式

3.<font style="color:#61afef;background-color:#23272e;">foo</font><font style="color:#abb2bf;background-color:#23272e;">.</font><font style="color:#61afef;background-color:#23272e;">apply</font><font style="color:#abb2bf;background-color:#23272e;">(</font><font style="color:#98c379;background-color:#23272e;">"apply"</font><font style="color:#abb2bf;background-color:#23272e;">, [</font><font style="color:#98c379;background-color:#23272e;">"kobe"</font><font style="color:#abb2bf;background-color:#23272e;">, </font><font style="color:#d19a66;background-color:#23272e;">30</font><font style="color:#abb2bf;background-color:#23272e;">, </font><font style="color:#d19a66;background-color:#23272e;">1.98</font><font style="color:#abb2bf;background-color:#23272e;">])</font>

call: 1.第一个参数:绑定this

2.参数列表:后续的参数以多参数的形式传递,会作为实参

3.<font style="color:#61afef;background-color:#23272e;">foo</font><font style="color:#abb2bf;background-color:#23272e;">.</font><font style="color:#61afef;background-color:#23272e;">call</font><font style="color:#abb2bf;background-color:#23272e;">(</font><font style="color:#98c379;background-color:#23272e;">"call"</font><font style="color:#abb2bf;background-color:#23272e;">, </font><font style="color:#98c379;background-color:#23272e;">"james"</font><font style="color:#abb2bf;background-color:#23272e;">, </font><font style="color:#d19a66;background-color:#23272e;">25</font><font style="color:#abb2bf;background-color:#23272e;">, </font><font style="color:#d19a66;background-color:#23272e;">2.05</font><font style="color:#abb2bf;background-color:#23272e;">)</font>

:::

  <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>

  <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)
    // bar() // this -> obj

    // 2.bind函数的其他参数(了解)
    var bar = foo.bind(obj, "kobe", 18, 1.88)
    bar("james")

  </script>

this指向面试题

var name = "window";

var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};

function sayName() {
  var sss = person.sayName;

  sss(); // 绑定: 默认绑定, window -> window

  person.sayName(); // 绑定: 隐式绑定, person -> person

  (person.sayName)(); // 绑定: 隐式绑定, person -> person

  (b = person.sayName)(); // 术语: 间接函数引用, window -> window
}

sayName();

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 () {
    // console.log(this) // 第一个表达式this -> person1
    // console.log(this) // 第二个表达式this -> person2
    // console.log(this) // 第三个表达式this -> person1
    
    return () => {
      console.log(this.name)
    }
  }
}

var person2 = { name: 'person2' }


// 开始题目:
person1.foo1(); // 隐式绑定: person1
person1.foo1.call(person2); // 显式绑定: person2

person1.foo2(); // 上层作用域: window
person1.foo2.call(person2); // 上层作用域: window

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

var name = 'window'

/*
  1.创建一个空的对象
  2.将这个空的对象赋值给this
  3.执行函数体中代码
  4.将这个新的对象默认返回
*/
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)
    }
  }
}

// person1/person都是对象(实例instance)
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) // 上层作用域查找: person1

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(隐式绑定)

var name = 'window'

/*
  1.创建一个空的对象
  2.将这个空的对象赋值给this
  3.执行函数体中代码
  4.将这个新的对象默认返回
*/
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(隐式绑定)

二.箭头函数的使用

箭头函数的写法

:::tips

基本写法
优化写法
- 只有一个参数时, 可以省略()
- 只有一行代码时, 可以省略{}
- 只要一行代码时, 表达式的返回值会作为箭头函数默认返回值, 所以可以省略return
- 如果箭头函数默认返回的是对象, 在省略{}的时候, 对象必须使用()包裹 () => ({name: “why”})

:::

箭头函数中的this

:::tips

箭头函数是没有绑定this
this的查找规则:
- 去上层作用域中查找this
- 直到找到全局this

:::

代码展示

  <script>

    // 1.之前的方式
    function foo1() {}
    var foo2 = function(name, age) {
      console.log("函数体代码", this, arguments)
      console.log(name, age)
    }

    // 2.箭头函数完整写法
    var foo3 = (name, age) => {
      console.log("箭头函数的函数体")
      console.log(name, age)
    }

    // 3.箭头函数的练习
    // 3.1. forEach
    var names = ["abc", "cba", "nba"]
    names.forEach((item, index, arr) => {
      console.log(item, index, arr)
    })
    // 3.2. setTimeout
    setTimeout(() => {
      console.log("setTimeout")
    }, 3000)


  </script>

箭头函数的简写

  <script>

    var names = ["abc", "cba", "nba"]
    var nums = [20, 30, 11, 15, 111]

    // 1.优化一: 如果箭头函数只有一个参数, 那么()可以省略
    // names.forEach(item => {
    //   console.log(item)
    // })
    // var newNums = nums.filter(item => {
    //   return item % 2 === 0
    // })

    // 2.优化二: 如果函数体中只有一行执行代码, 那么{}可以省略
    // names.forEach(item => console.log(item))

    // 一行代码中不能带return关键字, 如果省略, 需要带return一起省略(下一条规则)
    // var newNums = nums.filter(item => {
    //   return item % 2 === 0
    // })

    // 3.优化三: 只有一行代码时, 这行代码的表达式结果会作为函数的返回值默认返回的
    // var newNums = nums.filter(item => item % 2 === 0)
    // var newNums = nums.filter(item => item % 2 === 0)


    // 4.优化四: 如果默认返回值是一个对象, 那么这个对象必须加()
    // 注意: 在react中我会经常使用 redux

    // var arrFn = () => ["abc", "cba"]
    // var arrFn = () => {} // 注意: 这里是{}执行体
    // var arrFn = () => ({ name: "why" })
    // console.log(arrFn())

    // 箭头函数实现nums的所有偶数平方的和
    var nums = [20, 30, 11, 15, 111]
    var result = nums.filter(item => item % 2 === 0)
                     .map(item => item * item)
                     .reduce((prevValue, item) => prevValue + item)
    console.log(result)

  </script>

箭头函数中的this应用

  <script>

    // 网络请求的工具函数
    function request(url, callbackFn) {
      var results = ["abc", "cba", "nba"]
      callbackFn(results)
    }

    // 实际操作的位置(业务)
    var obj = {
      names: [],
      network: function() {
        // 1.早期的时候
        // var _this = this
        // request("/names", function(res) {
        //   _this.names = [].concat(res)
        // })

        // 2.箭头函数写法
        request("/names", (res) => {
          this.names = [].concat(res)
        })
      }
    }

    obj.network()
    console.log(obj)

  </script>