JavaScript相关知识点集锦(四)：this 、箭头函数、以及apply、call与bind

本文分为两部分：

• 正确判断 this
• 手写 apply、call、bind

正确判断 this

this 是个容易让人混淆的概念，但只要我们理清了思路就会很容易理解。

对于单个规则来说，我们可以按照下面的流程来进行判断：

• 首先，判断函数类型
  • 若是箭头函数，this 就是包裹箭头函数的第一个普通函数的 this
  • 若是apply、call、bind，this 是第一个参数
  • 普通函数的话，要判断函数是如何被调用的
    • new 的方式，this 被固化在实例上面
    • 除了 new 方式以外，判断函数是直接调用（ foo() ）还是通过对象调用 （ obj.foo() ）
      • foo() 方式，this 为 window
      • obj.foo() 方式，this 为 obj

通过这个流程，我们可以准确判断 this。当然，如果我们向改变 this，就可以采用以下方式：

1. 使用箭头函数
2. 使用 apply、call、bind 方法
3. 当然，构造函数也可以改变 this，通过对象调用也行

手写 apply、call、bind

关于 apply、call、bind，都可以改变 this 的指向，但稍稍有些不同。

1. apply 和 call 的区别
   其实 apply 和 call 基本类似，他们的区别主要是传参不同

   call 的语法：
   fun.call(thisArg[, arg1[, arg2[, …]]])
   apply 的语法：
   fun.apply(thisArg, [argsArray])
   所以 apply 和 call 的区别是 call 方法接受的是若干个参数列表，而 apply 接收的是一个包含多个参数的数组。

2. bind 和 apply、call 区别

   bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。
   从这句话，我们可以看出，bind 是创建一个新的函数，需要我们手动去执行。
   这是 bind 与 apply 、call 的主要区别。

3. 手写 apply、call、bind

       Function.prototype.myCall = function(context) {
       if (typeof this !== 'function') {
           throw new TypeError('Error')
       }
       context = context || window
       context.fn = this
       const args = [...arguments].slice(1)
       const result = context.fn(...args)
       delete context.fn
       return result
   }
   
   Function.prototype.myApply = function(context) {
       if (typeof this !== 'function') {
           throw new TypeError('Error')
       }
       context = context || window
       context.fn = this
       let result
       if (arguments[1]) {
           result = context.fn(...arguments[1])
       } else {
           result = context.fn()
       }
       return result
   }
   
   Function.prototype.myBind = function(context) {
       if (typeof this !== 'function') {
           throw new TypeError('Error')
       }
       const _this = this
       const args = [...arguments].slice(1)
   
       return function F() {
           if (this instanceof F) {
               return new _this(...args, ...arguments)
           }
           return _this.apply(context, args.concat(...arguments))
       }
   }
   
   var obj = {
       name: '这是'
   }
   
   function printName (fname, lname) {
       console.log(this)
       console.log(`${this.name} ${fname}${lname}`)
   }
   
   printName('liao', 'rui')
   printName.myCall(obj, 'liao', 'rui')
   printName.myApply(obj, ['liao', 'rui'])
   printName.myBind(obj, 'liao', 'rui')()

   本文完， 感谢阅读。