ES5中改变this指向的三种方法

ES5中提供了三种改变函数中this指针指向的方法,分别如下

1.call()

var obj = {username:"孙悟空"};
//没有任何修饰的调用函数，函数中的this指向全局对象,此处为window
function foo(para1,para2){
    console.log(this,para1,para2)
}
//利用call()改变foo函数中this的指向，让它指向obj
foo.call(obj,"传递的第一个参数","传递的第二个参数")
————————————————
版权声明：本文为CSDN博主「隐世半仙」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42560017/article/details/91904929

2.apply()

apply()的用法与call()相似，唯一的不同在于传参的形式

foo.apply(obj,["传递的第一个参数","传递的第二个参数"])

此时控制台也会打印出

3.bind()

call()和apply()都是立即执行函数,而bind()并不会立即执行，而是先返回改变this指向后的函数

var bar = foo.bind(obj);
bar("传入的第一个参数","传入的第二个参数");

运行结果如下：

可见this指向已经改变，并且bind()传参的形式与call()相同

.tb_button { padding: 1px; cursor: pointer; border-right: 1px solid rgba(139, 139, 139, 1); border-left: 1px solid rgba(255, 255, 255, 1); border-bottom: 1px solid rgba(255, 255, 255, 1) }
.tb_button.hover { borer: 2px outset #def; background-color: rgba(248, 248, 248, 1) !important }
.ws_toolbar { z-index: 100000 }
.ws_toolbar .ws_tb_btn { cursor: pointer; border: 1px solid rgba(85, 85, 85, 1); padding: 3px }
.tb_highlight { background-color: rgba(255, 255, 0, 1) }
.tb_hide { visibility: hidden }
.ws_toolbar img { padding: 2px; margin: 0 }