理解this小題目(想完再到最下方看答案)
"use strict";
function log() {
console.log(this);
}
var a = { a: 1, log: log };
var b = { a: 2, log: log };
log();
a.log();
b.log.apply(a)
強制綁定 this:bind
"use strict";
const obj = {
a: 1,
test: function() {
console.log(this)
}
}
obj.test() //{ a: 1, test: [Function: test] }
const func = obj.test
func() //undefined
以上面這個例子來看,func會找不到this值,可以用bind直接將this值綁定住。
"use strict";
const obj = {
a: 1,
test: function() {
console.log(this)
}
}
const func = obj.test.bind(obj)
func() //{ a: 1, test: [Function: test] }
加上
.bind(obj)
可以直接將this綁到obj.test()
"use strict";
const obj = {
a: 1,
test: function() {
console.log(this)
}
}
const func = obj.test.bind("aaa")
func() //aaa
bind可以直接賦值this值。
"use strict";
const obj = {
a: 1,
test: function() {
console.log(this)
}
}
const func = obj.test.bind("aaa")
func.call(123) //aaa
就算用
.call
直接給this值也不會被再次改到。
arrow function 的 this,一樣的function寫成arrow function讓this的回傳不一樣。
class Test {
run() {
console.log("run this:", this)
setTimeout(function() {
console.log(this)
}, 1000);
}
}
const t = new Test()
t.run()
寫成 arrow function
class Test {
run() {
console.log("run this:", this)
setTimeout( () => {
console.log(this)
}, 1000);
}
}
const t = new Test()
t.run()
結果附圖:紅框處
arrow function裡面的this跟怎麼呼叫沒有關係,跟scope比較像,跟定義在哪裡比較有關係,這種情形比較像是特例。
理解this小題目(答案)
"use strict";
function log() {
console.log(this);
}
var a = { a: 1, log: log };
var b = { a: 2, log: log };
log(); // undefined
a.log(); // { a: 1, log: [Function: log] }
b.log.call(a); // { a: 1, log: [Function: log] }
// b.log.call(a)括號內的a就是this的值,不用管.call前面是誰。