this的指向
函数中this
想要知道this的指向,就要看是谁直接调用了这个函数
函数
<script>
var a = 10;
function fun() {
var a = 100
console.log(this.a); // 10 因为fun是在全局中调用的,指向全局window
}
fun()
</script>
对象
<script>
var a = 10;
var obj = {
a: 100,
name: 'zs',
say: function () {
console.log(this); // 指向obj对象
}
}
obj.say()
</script>
构造函数
使用new操作符创建的实例,this会指向这个实例
<script>
function Person(name, age) {
console.log(this); // 指向p1这个实例对象 Object { name: "zs", age: 16 }
this.name = name;
this.age = age;
}
var p1 = new Person('zs', 16)
</script>
箭头函数
箭头函数this指向的是上一个函数的this
<script>
function fun() {
let bar = () => {
console.log('bar', this); // 所以这里是 this指向obj Object { name: "zs" }
}
bar(); // 2.这里调用了箭头函数,按照谁调用指向谁来说window,
// 但是箭头函数的this是和上一个函数的this一样,而我们通过call改变了this的指向
}
let obj = {
name: 'zs'
}
fun.call(obj); // 1.通过call来改变this的指向
</script>
修改this的指向
call
call的参数有两个,当不需要实参时,可以省略,call(改变的对象,实参列表)
<script>
let obj = {
name: 'zs',
sayName: function (a, b) {
console.log(this.name); // newZS,此时this指向的是newObj对象
console.log(a, b); // 1,2
}
}
let newObj = {
name: 'newZS'
}
let b = obj.sayName;
b.call(newObj, 1, 2); // call改变this指向
</script>
apply
apply(改变的对象,实参数组),没有实参时第二个参数可以没有
<script>
let obj = {
name: 'zs',
sayName: function () {
console.log(this.name); // newZS 此时this指向newObj
}
}
let newObj = {
name: 'newZS'
}
let b = obj.sayName;
b.apply(newObj); // 通过apply改变this
</script>
bind
bind(改变的对象)(实参列表)
<script>
let obj = {
name: 'zs',
sayName: function (a, b) {
console.log(this.name); // newZS
console.log(a, b); // 1,2
}
}
let newObj = {
name: 'newZS'
}
let b = obj.sayName;
b.bind(newObj)(1, 2) // bind改变this指向
</script>
如有错误,麻烦指正