36.[前端开发-JavaScript高级]Day01-this和箭头函数的使用

已于 2025-04-10 15:03:38 修改
阅读量155 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript
于 2025-04-07 16:40:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_55135449/article/details/147046809

1 this的绑定规则

this到底指向什么呢

规则一：默认绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <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>

</body>
</html>

规则二：隐式绑定

规则三：显式绑定
 

2 apply/call/bind

call、apply、bind

3 this绑定优先级

内置函数的绑定思考

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <button>按钮</button>

  <script>
    // 内置函数(第三方库): 根据一些经验
    // 1.定时器
    // setTimeout(function() {
    //   console.log("定时器函数:", this)
    // }, 1000)

    // 2.按钮的点击监听
    // var btnEl = document.querySelector("button")
    // btnEl.onclick = function() {
    //   console.log("btn的点击:", this)
    // }

    // btnEl.addEventListener("click", function() {
    //   console.log("btn的点击:", this)
    // })

    // // 3.forEach
    var names = ["abc", "cba", "nba"]
    names.forEach(function(item) {
      console.log("forEach:", this)
    }, "aaaa")

  </script>

</body>
</html>

new绑定

规则优先级

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

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

    // 比较优先级:

    // 1.显式绑定绑定的优先级高于隐式绑定
    // 1.1.测试一:apply高于默认绑定
    // var obj = { foo: foo }
    // obj.foo.apply("abc")
    // obj.foo.call("abc")

    // 1.2.测试二:bind高于默认绑定
    // var bar = foo.bind("aaa")
    // var obj = {
    //   name: "why",
    //   baz: bar
    // }
    // obj.baz()


    // 2.new绑定优先级高于隐式绑定
    // var obj = {
    //   name: "why",
    //   foo: function() {
    //     console.log("foo:", this)
    //     console.log("foo:", this === obj)
    //   }
    // }
    // new obj.foo()


    // 3.new/显式
    // 3.1. new不可以和apply/call一起使用

    // 3.2. new优先级高于bind
    // function foo() {
    //   console.log("foo:", this)
    // }
    // var bindFn = foo.bind("aaa")
    // new bindFn()


    // 4.bind/apply优先级
    // bind优先级高于apply/call
    function foo() {
      console.log("foo:", this)
    }
    var bindFn = foo.bind("aaa")
    bindFn.call("bbb")

  </script>

</body>
</html>

4 绑定之外的情况

this规则之外 – 忽略显示绑定

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <script>
    // 1.情况一: 显式绑定null/undefined, 那么使用的规则是默认绑定
    // function foo() {
    //   console.log("foo:", this)
    // }

    // foo.apply("abc")
    // foo.apply(null)
    // foo.apply(undefined)


    // 2.情况二: 间接函数引用
    var obj1 = {
      name: "obj1",
      foo: function() {
        console.log("foo:", this)
      }
    }
    var obj2 = {
      name: "obj2"
    };

    // {}[]()

    // obj2.foo = obj1.foo
    // obj2.foo()
    (obj2.foo = obj1.foo)()

  </script>

</body>
</html>

5 箭头函数的使用

箭头函数 arrow function

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <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>

</body>
</html>

箭头函数的编写优化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <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>

</body>
</html>

this规则之外 – ES6箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <script>

    // 1.普通函数中是有this的标识符
    // function foo() {
    //   console.log("foo", this)
    // }

    // foo()
    // foo.apply("aaa")

    // 2.箭头函数中, 压根没有this
    // var bar = () => {
    //   console.log("bar:", this)
    // }
    // bar()
    // 通过apply调用时, 也是没有this
    // bar.apply("aaaa")

    // console.log("全局this:", this)
    // var message = "global message"

    // 3.this的查找规则
    // var obj = {
    //   name: "obj",
    //   foo: () => {
    //     var bar = () => {
    //       console.log("bar:", this)
    //     }
    //     return bar
        
    //   }
    // }
    // var fn = obj.foo()
    // fn.apply("bbb")

    

  </script>

</body>
</html>

ES6箭头函数this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <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>

</body>
</html>

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

m0_zj
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值