补充知识

bind()函数是很经典的问题但是能掰扯清楚的文章确实不算多于是笔者才决定写下本文希望能给读者带来一些启发如有错误欢迎指正。

补充知识

函数中的this指向是在函数被调用的时候确定的也就是执行上下文被创建时确定的。

在一个执行上下文中this由调用者提供由调用函数的方式来决定。

1.方法调用模式

哪个对象调用函数object.method()this就指向哪个对象

let

输出结果为111说明此时test1的this指向是全局的window//

例子2

a333;console.log(this.a,第一个)let

funcfunction(){console.log(this.a,第二个)}func()

}obj.test2()

说明this指向是window因为func是独立调用3.构造函数模式

js中,我们通过new关键词来调用构造函数此时this会绑定在该实例对象上

window.a111

//结果为‘444’说明this指向的是windows因为上面test3的调用模式是独立调用let

newObj

结果为‘444’说明this指向的是newObj因为上面的test3的调用是作为构造函数的形式调用

类数组对象arguments

arguments只在函数中存在(箭头函数除外)的伪数组具有length可以通过下标访问但是不具有数组的方法,

比如push(),pop()等数组常用的方法存储了我们传入的所有形参。

function

testArgu(){console.log(arguments);

testArgu(a,b,123)

当函数执行call方法的时候实际上是把函数放到call()的第一个参数的某个属性上然后再通过合格属性来执行函数

func.call(ctx,arg1,...)//等价于以下代码

ctx.fnfunc;

Function.prototype.myCallfunction(context,...args){//对this进行类型判断如果不是function类型就报错//this应该指向的是调用myCall函数的对象function也属于对象object类型//因为myCall的调用模式是上文提到的‘方法调用模式’if(typeof

this

给context创建一个fn属性并将值设置为需要调用的函数即thiscontext.fn

this//调用函数const

test(a,b,c,d){console.log(this.num,test参数,a,b,c,d)

}//

说明手写的myCall方法可以修改this指向并且obj本身的fn未被修改

apply()

call方法接受的参数是一个参数列表而apply方法接受的是一个包含多个参数的数组。

这里我们就可以用到上文说的类数组对象arguments来处理参数了

详细实现

Function.prototype.myApplyfunction(context){if(typeof

this!

context.fn(...arguments[1])}else{res

context.fn()}//

test(a,b,c,d){console.log(this.num,test参数,a,b,c,d)

}//

bind需要考虑一种情况就是bind返回的函数作为构造函数使用的时候bind绑定的this失效但是参数依旧有效。

如何区分bind是正常使用还是当构造函数使用呢根据this判断就行了。

因为函数的this指向取决于如何调用上文讲到过。

1.当构造函数的时候this指向新建的实例对象此时this的prototype在该构造函数上。

2.正常使用this指向window

Function.prototype.myBindfunction(context){if(typeof

this!

保存this,如果作为构造函数使用此时this会指向实例fnthis;//返回更改this指向的函数return

function

Fn(...args){//如果是new的形式来使用绑定函数的if(this

instanceof

...args0,...args)//如果是普通函数的形式来使用绑定函数的else

return

此时之前绑定的指向testObj的this会失效会重新指向新的对象实例但是参数会继续有效

let