this绑定规则细节和面试题分析

---

theme: channing-cyan

跟着coderwhy学习

1.实现apply、call、bind

• 实现一下apply、call、bind函数：

  • 注意：实现是练习函数、this、调用关系，不会过度考虑一些边界情况

• 实现pkcall ```js // 给所有的函数添加一个 pkcall 的方法 Function.prototype.pkapply = function (thisArg, ...args) {

  // arguments 这里用ES6的 ...

  // 在这里可以去指向调用的那个函数 foo // 问题：得可以获取到是哪一个函数执行了 pkapply var fn = this

  // 2.对thisArg转成对象类型(防止它传入的是非对象类型) thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window

  // 3.调用需要被执行的函数 thisArg.fn = fn var result = thisArg.fn(...args) delete thisArg.fn

  // 4.将最终的结果返回出去 return result }

function foo() { console.log('foo函数被执行', this) }

function sum(num1, num2) { console.log("sum函数被执行", this, num1, num2) return num1 + num2 }

// 系统的函数的call方法 var result = sum.call({}, 20, 30) // console.log("系统调用的结果:", result)

// 实现自己的函数apply方法 // 默认进行隐式绑定 // foo.pkapply({name: 'mint'}) foo.pkapply(null) var result2 = sum.pkapply("abc", 20, 30) console.log("pkcall的调用:", result2)

// var num = {name: 'mint'} // console.log(Object(num)) ```

• 实现pkapply

```js // 自己实现pkapply Function.prototype.pkapply = function (thisArg, argArray) { // 1.获取搭配执行的函数 var fn = this

// 2.处理绑定的thisArg
thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

// 3.执行函数
thisArg.fn = fn
var result;
// if (!argArray) { // argArray是没有值(没有传参数)
//   result = thisArg.fn()
// } else { // 有传参数
//   result = thisArg.fn(...argArray)
// }

// argArray = argArray ? argArray: []
argArray = argArray || []

result = thisArg.fn(...argArray)
delete thisArg.fn

// 4.返回结果
return result

}

function sum(num1, num2) { console.log("sum被调用", this, num1, num2) return num1 + num2 }

function foo(num) { return num }

function bar() { console.log("bar函数被执行", this) }

// 系统调用 var result = sum.apply("abc", 20) console.log(result)

// 自己实现的调用 var result = sum.pkapply("abc", [20, 30]) console.log(result)

var result2 = foo.pkapply("abc", [20]) console.log(result2)

// edge case bar.pkapply(0) ```

• 实现pkbind

```js Function.prototype.pkbind = function (thisArg, ...argArray) { // 1.获取到真实需要调用的函数 var fn = this

// 2.绑定this
thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window

function proxyFn(...args) {
    // 3.将函数放到thisArg中进行调用
    thisArg.fn = fn
    // 特殊: 对两个传入的参数进行合并
    var finalArgs = [...argArray, ...args]
    var result = thisArg.fn(...finalArgs)
    delete thisArg.fn

    // 4.返回结果
    return result
}

return proxyFn

}

function foo() { console.log("foo被执行", this) return 20 }

function sum(num1, num2, num3, num4) { console.log(num1, num2, num3, num4) }

// 系统的bind使用 var bar = foo.bind("abc") bar()

// var newSum = sum.bind("aaa", 10, 20, 30, 40) // newSum()

// var newSum = sum.bind("aaa") // newSum(10, 20, 30, 40)

// var newSum = sum.bind("aaa", 10) // newSum(20, 30, 40)

// 使用自己定义的bind var bar = foo.pkbind("abc") var result = bar() console.log(result)

var newSum = sum.pkbind("abc", 10, 20) var result2 = newSum(30, 40) ```

2.认识arguments

• arguments 是一个 对应于 传递给函数的参数 的 类数组(array-like) 对象。

```js function foo(num1, num2, num3) { // 类数组对象中(长的像是一个数组, 本质上是一个对象): arguments console.log(arguments) }

foo(10, 20, 30) ``` + array-like意味着它不是一个数组类型，而是一个对象类型： + 但是它却拥有数组的一些特性，比如说length，比如可以通过index索引来访问； + 但是它却没有数组的一些方法，比如forEach、map等；

```js // 常见的对arguments的操作是三个 // 1.获取参数的长度 console.log(arguments.length)

// 2.根据索引值获取某一个参数 console.log(arguments[0]) console.log(arguments[1]) console.log(arguments[2]) ```

• arguments转成array ```js // 1.转化方式一： var length = arguments.length var arr = [] for (var i =0; i < length; i++) { arr.push(arguments[i]) } console.log(arr)

// 2.转化方式二： var arr1 = Array.prototype.slice.call(arguments) var arr2 = [].slice.call(arguments) console.log(arr1) console.log(arr2)

//3.转化方式三： const arr3 = Array.from(arguments) const arr4 = [...arguments] console.log(arr3); console.log(arr4); ```

3.箭头函数不绑定arguments

• 箭头函数是不绑定arguments的，所以我们在箭头函数中使用arguments会去上层作用域查找：

```js console.log(argument)

var foo = (x, y, z) => { console.log(arguments) }

foo(10, 20, 30) ```

```js foo(10, 20, 30)

function bar(m, n) { return (x, y, z) => { console.log(arguments); } }

var fn = bar(20, 30) fn(10, 20, 30) ```

4.理解JavaScript纯函数

• 函数式编程中有一个非常重要的概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念；

  • 在react开发中纯函数是被多次提及的；

  • 比如react中组件就被要求像是一个纯函数(为什么是像，因为还有class组件)，redux中有一个reducer的概念，也是要求必须是一个纯函数；

  • 所以掌握纯函数对于理解很多框架的设计是非常有帮助的；

• 纯函数的维基百科定义：

  • 在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数：

  • 此函数在相同的输入值时，需产生相同的输出。

  • 函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关。
  • 该函数不能有语义上可观察的函数副作用，诸如“触发事件”，使输出设备输出，或更改输出值以外物件的内容等。
• 当然上面的定义会过于的晦涩，所以我简单总结一下：
  • 确定的输入，一定会产生确定的输出；
  • 函数在执行过程中，不能产生副作用；

5.副作用的理解

• 那么这里又有一个概念，叫做副作用，什么又是副作用呢？

  • 副作用(side effect)其实本身是医学的一个概念，比如我们经常说吃什么药本来是为了治病，可能会产生一些其他的副作用；

  • 在计算机科学中，也引用了副作用的概念，表示在执行一个函数时，除了返回函数值之外，还对调用函数产生了附加的影响，比如修改了全局变量，修改参数或者改变外部的存储；

• 纯函数在执行的过程中就是不能产生这样的副作用：
  • 副作用往往是产生bug的 “温床”。

6.纯函数的案例

• 我们来看一个对数组操作的两个函数：

  • slice：slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组；
  • splice：splice截取数组, 会返回一个新的数组, 也会对原数组进行修改；
  • slice就是一个纯函数，不会修改传入的参数；

```js var names = ['abc', 'cba', 'nba', 'dna']

// slice只要给它传入一个start/end, 那么对于同一个数组来说, 它会给我们返回确定的值 // slice函数本身它是不会修改原来的数组 // slice -> this // slice函数本身是一个纯函数 var newNames1 = names.slice(0, 3) console.log(newNames1);//[ 'abc', 'cba', 'nba' ] console.log(names);//[ 'abc', 'cba', 'nba', 'dna' ]

// ["abc", "cba", "nba", "dna"] // splice在执行时, 有修改掉调用的数组对象本身, 修改的这个操作就是产生的副作用 // splice不是一个纯函数 var newNames2 = names.splice(2) console.log(newNames2);//[ 'nba', 'dna' ] console.log(names);//[ 'abc', 'cba' ] ```

7.来自己编写几个案例，来看一下它们是否是纯函数

8.纯函数的优势

• 为什么纯函数在函数式编程中非常重要呢？

  • 因为你可以安心的编写和安心的使用；

  • 你在写的时候保证了函数的纯度，只是单纯实现自己的业务逻辑即可，不需要关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改；

  • 你在用的时候，你确定你的输入内容不会被任意篡改，并且自己确定的输入，一定会有确定的输出；
• React中就要求我们无论是函数还是class声明一个组件，这个组件都必须像纯函数一样，保护它们的props不被修改：

9.JavaScript柯里化

• 柯里化也是属于函数式编程里面一个非常重要的概念。

• 先来看一下维基百科的解释：

  • 在计算机科学中，柯里化(英语：Currying)，又译为卡瑞化或加里化；
  • 是把接收多个参数的函数，变成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数，而且返回结果的新函数的技术；
  • 柯里化声称 “如果你固定某些参数，你将得到接受余下参数的一个函数”；
• 维基百科的结束非常的抽象，我们这里做一个总结：
  • 只传递给函数一部分参数来调用它，让它返回一个函数去处理剩余的参数；
  • 这个过程就称之为柯里化；

10.柯里化的结构

• 那么柯里化到底是怎么样的表现呢？ ```js function add(x, y, z) { return x + y + z }

var result = add(10, 20, 30) console.log(result)

function sum1(x) { return function(y) { return function(z) { return x + y + z } } }

var result1 = sum1(10)(20)(30) ```

11.让函数的职责单一

• 那么为什么需要有柯里化呢？

  • 在函数式编程中，我们其实往往希望一个函数处理的问题尽可能的单一，而不是将一大堆的处理过程交给一个函数来处理；

  • 那么我们是否就可以将每次传入的参数在单一的函数中进行处理，处理完后在下一个函数中再使用处理后的结果；

• 比如上面的案例我们进行一个修改：传入的函数需要分别被进行如下处理

• 第一个参数 + 2

• 第二个参数 * 2
• 第三个参数 ** 2

js function add2(x) { x = x + 2 return function (y) { y = y * 2 return function (z) { z = z**2 } } }

12.柯里化的复用

• 另外一个使用柯里化的场景是可以帮助我们可以复用参数逻辑：

  • makeAdder函数要求我们传入一个num(并且如果我们需要的话，可以在这里对num进行一些修改)；

  • 在之后使用返回的函数时，我们不需要再继续传入num了；

```js function makeAdder(count) { count = count * count

return function(num) {
    return count + num
}

}

var adder5 = makeAdder(5) adder5(10) adder5(100)

var add10 = makeAdder(10) add10(10) add10(100) ```

13.打印日志的柯里化

• 这里我们在演示一个案例，需求是打印一些日志：

  • 日志包括时间、类型、信息；
• 普通函数的实现方案如下：

``js function log(date, type, message) { console.log([${date.getHours()}:${date.getMinutes()}][${type}]: [${message}]`) }

nowLog(new Date(), "DEBUG", "修复问题") nowLog(new Date(), "FUTURE", "新功能") ```

``js var log = date => type => message => { console.log([${date.getHours()}:${date.getMinutes()}][${type}]: [${message}]`) }

var nowLog = log(new Date()) nowLog("DEBUG")("查找到轮播图的bug") nowLog("FUTURE")("新增了添加用户的功能")

var nowAndDebugLog = log(new Date())("DEBUG") nowAndDebugLog("轮播图bug") nowAndDebugLog("点击无效bug") ```

14.自动柯里化函数

• 目前我们有将多个普通的函数，转成柯里化函数：

```js // 柯里化函数的实现pkCurrying function pkCurrying(fn) { function curried(...args) { // 判断当前已经接收的参数的个数, 可以参数本身需要接受的参数是否已经一致了 // 1.当已经传入的参数 大于等于 需要的参数时, 就执行函数 if (args.length >= fn.length) { // fn(...args) // fn.call(this, ...args) return fn.apply(this, args) } else { // 没有达到个数时, 需要返回一个新的函数, 继续来接收的参数 function curried2(...args2) { // 接收到参数后, 需要递归调用curried来检查函数的个数是否达到 return curried.apply(this, args.concat(args2)) } return curried2 } } return curried }

console.log(curryAdd(10, 20, 30)) //60 console.log(curryAdd(10, 20)(30)) //60 console.log(curryAdd(10)(20)(30)) //60 ```

15.理解组合函数

• 组合(Compose)函数是在JavaScript开发过程中一种对函数的使用技巧、模式：

  • 比如我们现在需要对某一个数据进行函数的调用，执行两个函数fn1和fn2，这两个函数是依次执行的；

  • 那么如果每次我们都需要进行两个函数的调用，操作上就会显得重复；

  • 那么是否可以将这两个函数组合起来，自动依次调用呢？
  • 这个过程就是对函数的组合，我们称之为组合函数(Compose Function)；

16.实现组合函数

刚才我们实现的compose函数比较简单，我们需要考虑更加复杂的情况：比如传入了更多的函数，在调用compose函数时，传入了更多的参数：

```js function pkCompose(...fns) { var length = fns.length for (var i = 0; i < length; i++) { if (typeof fns[i] !== 'function') { throw new TypeError("Expected arguments are functions") } }

function compose(...args) { var index = 0 var result = length ? fns[index].apply(this, args): args while(++index < length) { result = fns[index].call(this, result) } return result } return compose }

function double(m) { return m * 2 }

function square(n) { return n ** 2 }

var newFn = pkCompose(double, square) console.log(newFn(10)) ```