this
this:上下文,會根據(jù)執(zhí)行環(huán)境變化而發(fā)生指向的改變.
1.單獨的this颂碘，指向的是window這個對象
alert(this) // this -> window
2.全局函數(shù)中的this
function demo() {
alert(this); // this -> window
}
demo();
在嚴格模式下猫态，this是undefined.
function demo() {
use strict;
alert(this);// undefined
}
demo();
3.函數(shù)調用的時候，前面加上new關鍵字
所謂構造函數(shù)巨缘，就是通過這個函數(shù)生成一個新對象，這時，this就指向這個對象调窍。
function demo() {
//alert(this); // this -> object`
this.testStr =this is a test;
}
let a = new demo();
alert(a.testStr);// 'this is a test
4.用call與apply的方式調用函數(shù)
function demo() {
alert(this);
}
demo.call('abc');// abc
demo.call(null);// this -> window
demo.call(undefined);// this -> window
5.定時器中的this，指向的是window
setTimeout(function() {
alert(this);// this -> window 张遭，嚴格模式 也是指向window`
},500)
6.元素綁定事件邓萨，事件觸發(fā)后，執(zhí)行的函數(shù)中的this菊卷，指向的是當前元素
window.onload = function() {
let $btn = document.getElementById(btn);
$btn.onclick = function(){
alert(this);// this -> 當前觸發(fā)
}
}
7.函數(shù)調用時如果綁定了bind缔恳，那么函數(shù)中的this指向了bind中綁定的元素
window.onload = function() {
let $btn = document.getElementById(btn);
$btn.addEventListener(click,function() {
alert(this); // window
}.bind(window))
}
8.對象中的方法，該方法被哪個對象調用了洁闰，那么方法中的this就指向該對象
let name = finget
let obj = {
name: FinGet,
getName: function() {
alert(this.name);
}
}
obj.getName(); // FinGet
---------------------------分割線----------------------------
let fn = obj.getName;
fn(); //finget this -> window
面試題
var x = 20;
var a = {
x: 15,
fn: function() {
var x = 30;
return function() {
return this.x
}
}
}
console.log(a.fn());
console.log((a.fn())());
console.log(a.fn()());
console.log(a.fn()() == (a.fn())());
console.log(a.fn().call(this));
console.log(a.fn().call(a));
答案
1.console.log(a.fn());
對象調用方法歉甚，返回了一個方法。
function() {return this.x}
2.console.log((a.fn())());
a.fn()返回的是一個函數(shù)扑眉，()()這是自執(zhí)行表達式纸泄。this -> window
20
3.console.log(a.fn()());
a.fn()相當于在全局定義了一個函數(shù)，然后再自己調用執(zhí)行腰素。this -> window
20
4.console.log(a.fn()() == (a.fn())());
true
5.console.log(a.fn().call(this));
這段代碼在全局環(huán)境中執(zhí)行聘裁，this -> window
20
6.console.log(a.fn().call(a));
this -> a
15
