首先说明一下，对于ES6新推出的箭头函数(() => {})，是无法改变this指向的，因为箭头函数中的this在函数声明的时候就已经指定好了。此处说的更改this指向，是指在函数(包括匿名函数 function() {})被调用时，可以更改this的指向。
假设有如下的代码：
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box');
let a, b , c;
const obj = {
fn: function() {
console.log(this);
}
};
obj.fn();
</script>
</body>
当执行obj.fn()方法时，this的指向是window对象。
如果我想要把this的指向更改为box对象，要如何做呢？有三种方法可以办到：
- 调用
call()方法，代码如下：
obj.fn.call(box, a, b, c);
其第一个参数为
this要指向的对象，其后的参数是一个列表。
- 调用
apply()方法，代码如下：
obj.fn.apply(box, [a, b, c]);
其第一个参数为
this要指向的对象，第二个参数是一个由参数组成的数组。
- 调用
bind()方法，代码如下：
obj.fn.bind(box, a, b, c)();
bind方法与call方法的参数格式类似，不同的是调用bind方法后，会返回一个更改了this指向的新函数，如果要执行，还需要在后边添加()来执行。
---(完)---
网友评论