JS中的this指向問題(詳細版plus)

LoveyL0201發表於2020-12-01
JS

JS中的this指向問題

  1. 在全域性作用域中

    =>this -> window

    <script>
   console.log(this); //this->window
</script>

  2. 在普通函式中

    =>this取決於誰呼叫，誰呼叫我，this就指向誰，跟如何定義無關

     var obj = {
            fn1:function() {
                console.log(this); 
            },
            fn2:function(){
                fn3() 
            }
        }
        function fn3() {
            console.log(this); 
        }
        fn3();//this->window
        obj.fn1();//this->obj
        obj.fn2();//this->window

  3. 箭頭函式中的this

    =>箭頭函式沒有自己的this，箭頭函式的this就是上下文中定義的this，因為箭頭函式 沒有自己的this所以不能用做建構函式。

     var div = document.querySelector('div'); 
    var o={
        a:function(){
            var arr=[1];
          //就是定義所在物件中的this
          //這裡的this—>o
            arr.forEach(item=>{
              //所以this -> o
                console.log(this);
            })
        },
      //這裡的this指向window o是定義在window中的物件
        b:()=>{
            console.log(this);
        },
        c:function() {
            console.log(this);
        }
    }
    div.addEventListener('click',item=>{
        console.log(this);//this->window 這裡的this就是定義上文window環境中的this
    });
    o.a(); //this->o
    o.b();//this->window
    o.c();//this->o 普通函式誰呼叫就指向誰

  4. 事件繫結中的this

    事件源.onclik = function(){ } //this -> 事件源

    事件源.addEventListener(function(){ }) //this->事件源

    var div = document.querySelector('div'); 
    div.addEventListener('click',function() {
        console.log(this); //this->div
    });
    
    div.onclick = function() {
    console.log(this) //this->div
    }

  5. 定時器中的this

    定時器中的this->window，因為定時器中採用回撥函式作為處理函式，而回撥函式的this->window

      setInterval(function() {
        console.log(this); //this->window 
    },500)
    
    setTimeout(function() {
        console.log(this); //this->window 
    },500)

  6. ES5建構函式中的this

    建構函式配合new使用, 而new關鍵字會將建構函式中的this指向例項化物件，所以建構函式中的this->例項化物件

    new關鍵字會在內部發生什麼

    //第一行，建立一個空物件obj。
var obj  ={};
//第二行，將這個空物件的__proto__成員指向了建構函式物件的prototype成員物件.
obj.__proto__ = CO.prototype;
//第三行，將建構函式的作用域賦給新物件，因此CA函式中的this指向新物件obj，然後再呼叫CO函式。於是我們就給obj物件賦值了一個成員變數p，這個成員變數的值是” I’min constructed object”。
CO.call(obj);
//第四行，返回新物件obj。
return obj;

    => 在例項化方法中或者類中的this都是指向例項化物件

    =>在ES5中如果不使用new 執行函式 ，函式也是可以執行的，但是不會返回例項化物件，當作函式執行

    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    var person1 = new Person();
    person1.name = 'andy';
    person1.age = 18;
    console.log(person1);//Person {name: "andy", age: 18}
    var person2 = new Person();
    person2.name = 'huni';
    person2.age = 20;
    console.log(person2);// Person {name: "huni", age: 20

  7. ES6中建構函式的this

    => 在例項化方法中或者類中的this都是指向例項化物件

    =>在ES6中 static fn( ) 靜態方法中的this是當前類也是建構函式

    ​ 就是當前類名或者constructor

    =>建構函式和類名就是相同的

    const box = new Box() 
//例項化物件中的constructor都是建構函式
box.constructor === Box //true

  8. this指向undefned

    =>在ES6的嚴格模式中，如果呼叫函式中的this，this將會被指向indefined，或者全域性作用域中的this也會指向undefied

    <script type="module"> //注意是嚴格模式下
	function fn() {
		console.log(this) //this->undefined
	}
	console,log(this) //this->undefined
</script>

  9. call,apply,bind

    =>如果使用call，apply，bind時如果帶入null或者undfined，此時this指向window

    =>如果call，apply，bind的第一個引數不是null和undefined，那麼此時該函式的this指向該物件

    fn.call(null)
fn.apply(null)
fn.bind(null) // this -> window

  10. 物件中的this

    =>物件中的this也是上下文環境

    var c = 20;
var obj = {
	c:10
	a:this.c //this->window
	b:function(){
		console.log(this.a) //this-obj
	}
}
obj.b() //20

    var a = 100;
var obj = {
 	a:10,
 	c:50, 
 	b:{
 		a:0,
 		c:this.a,//this->window. 當執行b物件時，b物件還沒有完全建立只能去上一層尋找
 		run:function() {
 			console.log(this.c);//this->b
 		}
 	}
}
obj.b.run() //100

  11. arguments中的this

    =>在函式中使用回撥函式時，利用arguments的引數來執行回撥函式，被執行 的回撥函式中this指向的是當前函式arguments.caller的this

    var a;
function fn() {
	console.log(this === a)
}
function fn1(f) {
	a = arguments
	arguments[0]();
}
fn1(fn);  //this指向fn1中的arguments

  12. 物件函式中的this

    =>this指向當前物件

    var obj = {
	c:10
	a:this.c //this->window
	b:function(){
		console.log(this.a) //this-obj
	}
}
obj.b();

相關文章