在javascript中,this指针指向问题是一个重要的知识点。在不同情况下,this指针指向的方向也会有所不同。
1.函数名直接加小括号调用函数,则this指向全局对象window
var a = 100;
function getA() {
var a = 10;
console.log(this.a);
};
getA();
2.标签事件绑定的函数被调用时,this指向触发事件的标签
// HTML:<button class="button">确定</button>
// js
var a = 100;
document.querySelector('.button').onclick = function() {
var a = 200;
console.log(this); // <button class="button">确定</button>
};
3.通过对象点来调用对象的某个函数,this指向调用对象
var a = 100;
var obj = {
a: 20,
b: function() {
var a = 30;
console.log(this.a);
}
};
obj.b(); // 20
4.通过对象点来调用对象的某个箭头函数,this指向调用对象
var a = 100;
var obj = {
a: 20,
b: () => {
var a = 30;
console.log(this.a);
}
};
obj.b(); // 100
注意:箭头函数在声明时就已经确定了this指针指向,以后不能在更改了。
5.被new出来的函数,this指针指向空对象
Function.prototype.b = function() {
var a = 20;
console.log(this);
console.log(this.a);
};
var getA = new Function();
getA.b(); // ƒ anonymous() {}
// undefined
6.使用call或apply时,this指针指向情况:
var a = 100;
var obj2 = {
a: 1111
}
var obj1 = {
a: 100,
b: 10,
// 箭头函数在声明时就已经确立了this指针的指向,后续无法更改
fun: () => { console.log(this.a); },
// 使用bind声明创建的函数,声明创建完后就已经确立了this指针的指向,后续无法更改
fun2: (function() { console.log(this.a); }).bind(obj2)
};
obj1.fun.call(obj2); // 100
obj1.fun2.call(obj2); // 1111
使用bind声明创建的函数,声明创建完后就已经确立了this指针的指向,后续无法更改。
7.在类中的函数,this指针指向:
class Foo {
name = "Foo";
a() { console.log(this.name); };
b = function() { console.log(this.name) };
c = () => { console.log(this.name); };
};
let f = new Foo();
f.c(); // Foo
let b = { name: "bar", a: f.a, b:f.b, c: f.c };
b.a(); // bar
b.b(); // bar
b.c(); // Foo // ES6箭头函数在定义时this指向就绑定了,无法修改。在类中无法穿透
以上就是常见的this指针指向问题,但并不全面。