如何使用50行javaScript代码实现简单版的call,apply,bind

在实现自己的call,apply,bind前，需要复习一下this.

所谓的this其实可以理解成一根指针：

其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象,这就是精髓。最关键所在

this的四种指向：

当this所在的函数被普通调用时，指向window，如果当前是严格模式，则指向undefined

function test() { console.log(this);};test();指向window 输出下面的代码：// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

严格模式'use strict';function test() { console.log(this);};test();// undefined

当this所在当函数被以obj.fn()形式调用时，指向obj

var obj = { name: 'segmentFault', foo: function() {  console.log(this.name); }}obj.foo();// 'segmentFault'

还可以这么做

function test() { console.log(this.name);}var obj = { name: 'qiutc', foo: test}obj.foo();// 'qiutc'

当call,apply加入后，this的指向被改变了

 function a(a,b,c) {    console.log(this.name);    console.log(a,b,c)  }  const b = {    name: "segmentFault"  }  a.call(b,1,2,3)      //输出 segmentFault和 1,2,3  function a(a,b,c) {    console.log(this.name);    console.log(a,b,c)  }  a.apply(b,[1,2,3])  //输出segmentFault和1,2,3

遇到bind后 ：

  function a() {    console.log(this.name);  }  const b = {    name: "segmentFault"  }  a.bind(b, 1, 2, 3)

此时控制台并没有代码输出，因为bind会重新生成并且返回一个函数，这个函数的this指向第一个参数

  function a() {    console.log(this.name);  }  const b = {    name: "segmentFault"  }  const c = a.bind(b, 1, 2, 3)  c()  //此时输出segmentFault

正式开始自己实现call :

在函数原型上定义自己的myCall方法：

 Function.prototype.myCall = function (context, ...arg) {    const fn = Symbol('临时属性')    context[fn] = this    context[fn](...arg)    delete context[fn]  }

四行代码实现了简单的call，思路如下：

为了简化，今天都不做类型判断和错误边际处理，只把原理讲清楚。

自己实现apply

在函数原型上定义自己的myApply方法：