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

曾经终败给现在 2022-11-21 09:41 110阅读 0赞

--------------------

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

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