|
|
在前面的课程中我们讲过，普通函数中this的默认指向始终为window，那么如果我们想让函数内部的this指向其它对象该怎么办呢？
JS为我们提供了以下三种方法：
1、fn.apply(obj,[arr])
它做了两件事，先改变fn函数内部的this指向，然后调用fn函数。
该方法的第一个参数为对象，是fn函数内的新this指向对象，第二个参数为数组，fn函数的形参会自动解构该数组，依次接收该数组的成员作为实参。
请看代码：
<!DOCTYPE html>
<html>
<head>
<title>改变函数的this指向的总结 apply</title>
</head>
<body>
<script type="text/javascript">
function fn(m, n){
console.log(this, m, n);
}
fn(3,6);//这样调用时this的指向为window
var obj = {"age":30};
fn.apply(obj, [8, 9]);//这样调用的this指向为obj
</script>
</body>
</html>
2、fn.call(obj,参数1,参数2,,,,,,)
<!DOCTYPE html>
<html>
<head>
<title>改变函数的this指向的总结 call</title>
</head>
<body>
<script type="text/javascript">
function fn(m, n){
console.log(this, m, n);
}
fn(3,6);//这样调用时this的指向为window
var obj = {"age":30};
fn.call(obj, 8, 9);//call同样可以改变this指向，但它不能传入数组
</script>
</body>
</html>
3、fn.bind(obj,参数1,参数2,,,,,)
<!DOCTYPE html>
<html>
<head>
<title>改变函数的this指向的总结 bind</title>
</head>
<body>
<script type="text/javascript">
function fn(m, n){
console.log(this, m, n);
}
fn(3,6);//这样调用时this的指向为window
var obj = {"age":30};
fn.bind(obj, 8, 9);//默认不调用
fn.bind(obj, 8, 9)();//这样调用
fn.bind(obj)(8,9);//还可以在调用时传参
</script>
</body>
</html>
以上就是对改变函数的this指向的总结，三种方法分别为apply、call和bind，它们的共同点是都可以改变this指向，不同点在于传参和调用的区别，如果仅仅是改变this指向，使用任意一种都可以。
附加案例：使用apply方法实现求数组的最大值
<!DOCTYPE html>
<html>
<head>
<title>使用apply方法实现求数组的最大值</title>
</head>
<body>
<script type="text/javascript">
//加入我们已知一个数组如下：
var arr = [3, 6, 5, 100];
// 如果使用Math.max(3, 6, 5)，它只能独立传参，所以每一个值都得从数组取出来
// 如果使用for循环遍历判断更麻烦
console.log( Math.max.apply(null, arr) );
// 总结：如果已知一个数组，需要使用的方法又不允许传入数组，而是由形参独立接收实参时，我们就可以使用apply方法传入数组。
</script>
</body>
</html>
|
|
窥视卡
雷达卡
发表于 2023-1-28 21:34:43
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-21 17:56:08
