首先说明一下,对于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
指向的新函数,如果要执行,还需要在后边添加()
来执行。
---(完)---