学习笔记——JS中的this指针指向问题

---

在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指针指向情况：

扫描二维码关注公众号，回复： 12699860 查看本文章

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指针指向问题，但并不全面。