this:上下文,會根據執行環境變化而發生指向的改變.
1.單獨的this,指向的是window這個對象
alert(this); // this -> window
2.全局函數中的this
function demo() { alert(this); // this -> window } demo();
在嚴格模式下,this是undefined.
function demo() { 'use strict'; alert(this); // undefined } demo();
3.函數調用的時候,前面加上new關鍵字
所謂構造函數,就是通過這個函數生成一個新對象,這時,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的方式調用函數
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.元素綁定事件,事件觸發後,執行的函數中的this,指向的是當前元素
window.onload = function() { let $btn = document.getElementById('btn'); $btn.onclick = function(){ alert(this); // this -> 當前觸發 } }
7.函數調用時如果綁定了bind,那麼函數中的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()返回的是一個函數, ()() 這是自執行表達式。this -> window
# 20
3.console.log(a.fn()());
a.fn()相當於在全局定義了一個函數,然後再自己調用執行。this -> window
# 20
4.console.log(a.fn()() == (a.fn())());
# true
5.console.log(a.fn().call(this));
這段代碼在全局環境中執行,this -> window
# 20
6.console.log(a.fn().call(a));
this -> a
# 15
本次給大家推薦一個免費的學習羣,裏面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。 對web開發技術感興趣的同學,歡迎加入Q羣:943129070,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視頻資料。 最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峯。