前言
这些 this 的指向,是当我们调用函数的时候确定的。 调用方式的不同决定了this 的指向不同
一般指向我们的调用者.
一、this指向
二、改变this指向的方法
1.call 方法
fun.call(thisArg, arg1, arg2, ...)
- thisArg:在 fun 函数运行时指定的 this 值
- arg1,arg2:传递的其他参数
- 返回值就是函数的返回值,因为它就是调用函数
- 因此当我们想改变 this 指向,同时想调用这个函数的时候,可以使用 call,比如继承
<script>
// 改变函数内this指向 js提供了三种方法 call() apply() bind()
// 1. call()
var o = {
name: 'andy'
}
function fn(a, b) {
console.log(this);
console.log(a + b);
};
fn.call(o, 1, 2);
// call 第一个可以调用函数 第二个可以改变函数内的this 指向
// call 的主要作用可以实现继承
function Father(uname, age, sex) {
this.uname = uname;
this.age = age;
this.sex = sex;
}
function Son(uname, age, sex) {
Father.call(this, uname, age, sex);
}
var son = new Son('刘德华', 18, '男');
console.log(son);
</script>
2.apply 方法
fun.apply(thisArg, [argsArray])
- thisArg:在fun函数运行时指定的 this 值
- argsArray:传递的值,必须包含在数组里面
- 返回值就是函数的返回值,因为它就是调用函数
- 虽然这个函数的语法与 call() 几乎相同,但根本区别在于,
call()
接受一个参数列表,而apply()
接受一个参数的单数组。
const array = ['a', 'b'];
const elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]
3.bind 方法
fun.bind(thisArg, arg1, arg2, ...)
- bind() 方法不会调用函数。
- 但是能改变函数内部this 指向返回由指定的 this 值和初始化参数改造的原函数拷贝
- 因此当我们只是想改变 this 指向,并且不想调用这个函数的时候,可以使用 bind
var btn1 = document.querySelector('button');
btn1.onclick = function() {
this.disabled = true; // 这个this 指向的是 btn 这个按钮
// var that = this;
setTimeout(function() {
// that.disabled = false; // 定时器函数里面的this 指向的是window
this.disabled = false; // 此时定时器函数里面的this 指向的是btn
}.bind(this), 3000); // 这个this 指向的是btn 这个对象
}
三、call apply bind 总结
相同点:
都可以改变函数内部的this指向.
区别点:
1.
c
all
和
apply
会调用函数
,
并且改变函数内部
this
指向
.
2.
c
all
和
apply
传递的参数不一样
, call
传递参数
aru1, aru2..
形式
apply
必须数组形式
[
arg
]
3.
b
ind
不会调用函数
,
可以改变函数内部
this
指向.
主要应用场景:
1.
c
all
经常做继承
.
2.
apply
经常跟数组有关系
.
比如借助于数学对象实现数组最大值最小值
3.
b
ind
不调用函数
,
但是还想改变
this
指向
.
比如改变定时器内部的
this
指向
.