js中的this到底是什麼意思
JS裡面總是會用到this,今天就和大家好好的談一下這個容易把人弄糊塗的this到底是個什麼東西，怎樣使用this
this的指向1, 普通函數指向函數的呼叫者:有個簡單的方法就是看函數前面有沒有點,如果有點,那麼就指向點前面的那個值; 2, 箭頭函數指向函數所在的所用域: 注意理解作用域,只有函數的{}構成作用域,物件的{}以及if(){}都不構成作用域;
const obj = {
name: 'objName',
say() {
console.log(this.name);
},
read: () => {
console.log(this.name);
}
}
obj.say(); // objName
obj.read(); // undefined普通函數,呼叫者是obj,所以結果是objname;也是理解say()是普通函數,前面有點,所以this指向obj;
箭頭函數,this指向函數所在的作用域,目前的作用域為全域環境,所以this.name為undefined,
舉下面的例子更清楚的了解一下箭頭函數this的指向,箭頭函數所在的作用域是普通函數say,say()的呼叫者是obj
const obj = {
say: function () {
setTimeout(() => {
console.log(this)
});
}
}#obj.say(); // obj,此時this指的是定義他的obj
補充知識點
瀏覽器預設的this為window
function test() {
console.log(this);
}test( ); //window
node.js中全域環境預設this為{},普通函數預設this為global
console.log(this); // {}
function test() {
console.log(this);
}
test(); //global來兩題檢查你是否掌握了
example1
const length = 10;
function fn() {
console.log(this.length);
}
const obj = {
length: 5,
method: function(fn) {
fn();
arguments[0]();
}
};
obj.method(fn, 1);輸出10, 2
剛開始看到這道題我也是濛濛的,現在也終於理解了,method這個函數傳入了兩個參數,一個參數為fn(),fn()為普通函數,this指向函數的調用者,此時指向全局(也可以看這個函數前面沒有點),所以運行結果為10,arguments是函數的所有參數,是一個類別數組的物件,arguments[0] (),可以看成是arguments.0() ,呼叫這個函數的是arguments,此時this就是指arguments,this.length就是angument.length,就是傳入的參數的總個數2
註:上面範例在node環境中的運行結果為undefined 2, const length = 10改成global.length = 10;是因為node環境下定義在全域的變數不會綁定到global,瀏覽器也會自動綁定到全域環境window
改成下面這樣結果又是什麼呢?
const length = 10;
function fn() {
console.log(this.length);
}
const obj = {
length: 5,
method: function(fn) {
fn();
const fun = arguments[0];
fun()；
}
};
obj.method(fn, 1);
10, 10
example 2
window.val = 1;
var obj = {
val: 2,
dbl: function() {
this.val *= 2
val *= 2;
console.log(val);
console.log(this.val);
}
}
obj.dbl(); // 2 4
var func = obj.dbl;
func(); // 8 8這個就是有點繞了,不過一步步來分析就很容易理解了:
obj.dbl();執行這行程式碼時，this指的是obj，所以this.val === obj.val*=2,最後結果為4 ,val*=2 === window.val *= 2，最後結果是2
func()，執行這行程式碼時，func()沒有任何前綴，this指的是window.func( );所以此時this值得是window，this.val === window.val *= 2,此時window.val 為4，val*=2 === window.val *2,最後結果為8，最後console.log(this.val),與console.log(val),指的都是window.val。
以上就是我對this的一些小理解，如果大家對於我的這篇文章有所疑問，歡迎和我交流。
相關推薦：
#以上是js中的this如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
