this指向箭頭函式詳解

2021-09-25 18:57:52 字數 3009 閱讀 5414

本文參考

this 指的是你的函式執行時所在的環境(作用域)

全域性環境下

console.log(this.document === document) //true

在全域性環境下this始終指向全域性物件,無論是否嚴格模式

在瀏覽器中,this指向window物件

console.log(this === window) //true

this.a = 888

console.log(window.a) //888

函式上下文呼叫,函式自呼叫

普通函式內部的this分為兩種情況,嚴格模式和非嚴格模式

非嚴格模式下this指向window, 嚴格模式下this指向undefined

function fn() 

console.log(fn()) // window

function fn()

console.log(fn()) //undefined

物件中的this

物件內部的this指向呼叫這些方法的物件,函式定義的位置不影響this指向,this指向只和呼叫函式的物件有關

var fn = 

}console.log(fn.getage); //18

var age = 19

var obj = fn.getage;

console.log(obj) //19

原型鏈中的this

var fn2 =

} var obj2 = object.create(fn2);

//建立乙個新物件

obj2.a = 3;

obj2.b = 5;

console.log(obj2.say())

可以看出obj2中沒有方法 say,但執行obj2.say()時,會查詢obj2的原型鏈,

找到say函式並執行, 但是這與函式內部this指向和物件obj2沒有任何關係,

只需記住呼叫誰this指向誰

建構函式中的this

function func1 () 

}var obj6 = new func1()

console.log(obj6.title) //標題一

建構函式中的this指向例項化物件,當建構函式返回的預設值是乙個this引用的物件時,

可以手動設定返回的其他物件,如果返回值不是乙個物件,返回this

dom事件處理函式中的this

var ele = document.getelementsbytagname('*');

var li1 = array.prototype.slice.call(document.getelementsbytagname('li'));

console.log(li1)

//獲取文件中所有元素

function cli1(e)

for (var i = 0;i內聯事件

當**被內聯處理函式呼叫時,this指向所在的dom元素

當**被包括在函式內部執行時,即自呼叫,非嚴格模式下this指向window,嚴格模式下this 指向undefined

1 當前元素

2 window

3 undefined

settimeout和setinterval

定時器中的this指向window

//通過bind繫結

function person() ).bind(this),3000)

}var p = new person();//3秒後返回建構函式新生成的物件 person

箭頭函式中的this

function person() ,1000)

//由於箭頭函式不繫結this, 作為自己的this,

// 考慮到 this 是詞法層面上的,嚴格模式中與 this 相關的規則都將被忽略。

(可以忽略是否在嚴格模式下的影響)

}var p = new person();

var adder = ,

addthrucall: function infun(a) ;

return f.call(b, a);

}};console.log(adder.add(1)); //2

console.log(adder.addthrucall(1)); //2

箭頭函式中的call改變this指向不起作用,因為箭頭函式中的this就是指向當前物件

var f = () => ;

var p = () => ;

console.log(1,f() === window);

console.log(2,f() === p());

//1 true

//2 true

作為方法的箭頭函式指向window,而普通函式指向呼叫它的物件

var obj = 

}obj.b(); // undefined window

最後總結一下this指向問題;

元素繫結事件,事件觸發後,執行函式中的this指向當前元素

addeventlinstener函式下的this直線當前元素,

**被內聯函式呼叫時this指向當前元素

例項化物件時,this指向當前例項化物件

箭頭函式中的this,作為自己的this

內聯函式自呼叫,非嚴格模式下指向window,嚴格指向undefined

普通函式內部的this分兩種情況,非嚴格模式下指向window,嚴格指向undefined

箭頭函式this指向問題

前言 線下筆試碰到的題目,發現學習掌握的不透徹,所以回來填坑 const obj1 const obj2 console.log obj1.func.bind obj2 輸出結果為 剛開始很疑惑結果,於是做了個對比 const obj1 const obj2 console.log obj1.fun...

this指向及箭頭函式

this 指向問題 一般情況下this的最終指向的是那個呼叫它的物件。1 全域性作用域或者普通函式中this指向全域性物件window 注意定時器裡面的this指向window 全域性作用域或者普通函式中this指向全域性物件window 注意定時器裡面的this指向window console.l...

箭頭函式this的指向

什麼是箭頭函式,箭頭函式是es6的新特性,其出現就是為了更好的表示 代替 函式 箭頭函式 arg1,arg2 當箭頭函式只有乙個引數 arg1 console.log arg1 箭頭函式隱式return arg1 arg1 等價於 arg1 return arg1箭頭函式的this不同於以上所有情況...