大家好,我是IT修真院成都分院第一期的學員常開洋,一枚正直純潔善良的web前端程序員
今天給大家分享一下,修真院官網JS(職業)任務,
深度思考中的知識點——JS中this的指向
大家好,我是IT修真院成都分院第一期的學員常開洋,一枚正直純潔善良的web前端程序員
1.背景介紹
this是什么?
this最開始起源于C#,當做右指針來用的只能在class,struct, 和union類型中的非靜態成員函數/函數模版class指針訪問, 指向被調成員所屬的對象。靜態成員中無法使用this指針。在js中,同樣也是關鍵字,它代表函數運行時, 自動生成的一個函數內部對象,只能在函數內部使用
2.知識剖析
this主要有4方面的應用
1.默認綁定到全局變量
function demo1(){
console.log(this.c);
}
var c=2;
demo1();//2
2.隱式綁定(也稱隱式調用)是指函數調用的時候屬于某個對象,比如說
function demo2(){
console.log(this.a);
}
var obj={
a:5,
demo2:demo2
}
var a=15;
obj.demo2();//5
如果在這過程中出現帶有this的函數被引用,可能會是全局變量
function demo3(){
console.log(this.a);
}
var obj={
a:5,
demo:demo3
}
var b=obj.demo;//函數引用傳遞
var a="abc";
b();//abc
3.顯示綁定 學過bind()\apply()\call()函數的都應該知道,它接收的第一個參數就是將上下文的對象賦給this,看這個demo
function demo4(){
console.log(this.a);
}
var obj={
a:2
}
demo4.call(obj);//2
如果我們傳遞的第一個值是簡單值的話,那么后臺會自動轉化為對應的封裝對象,如果傳遞為null,那么結果就默認綁定到全局變量
function demo5(){
console.log(this.a);
}
var obj={
a:10
}
var a=2;
demo5.call(null);//2
4.new新對象綁定 如果是一個構造函數,則需要使用new來調用,那么綁定的將是新創建的對象。
function demo5(a){
this.a=a;
}
var obj=new demo5(2);
var a=10;
console.log(obj.a);//2
3.常見問題
關于很多人對于this使用的誤解
相信有些人在其他語言中接觸過this,會將this誤解為引用function本身,下面我舉個例子看看到底是不是這樣
function demo6(num){
this.count++;
}
demo6.count=0;
for(var i=0;i<10;i++){
if(i>5){
demo6(i);
}
}
console.log(demo6.count);//結果是0,為什么不是4?
4.解決方案
其實在上面這個demo6中的this指的是一個全局對象,所以this.count并沒有定義,更別說賦值了,如果這時候要打印this.count的話,只能為NaN了。 但是如果給count定義并賦值為0,則this.count最終結果為4;
function demo6(num){
this.count++;
console.log(this.count);//1,2,3,4
}
demo6.count=0;var count=0;
for(var i=0;i<10;i++){
if(i>5){
demo6(i);
}
}
console.log(demo6.count);
5.編碼實戰
6.擴展思考
說了那么多this方面的知識,那么this到底有哪方面的應用?
隨著代碼的增加,函數嵌套、各級調用等變得越來越復雜,那么傳遞一個對象的引用將變得越來越不明智,它會把你的代碼弄得非常亂,甚至你自己都無法理解清楚。而this機制提供了一個更加優雅而靈便的方案,傳遞一個隱式的對象引用讓代碼變得更加簡潔和復用。
7.參考文獻
8.更多討論
如果this應用在嚴格模式(use strict)中,上面提到的this指向哪些不能使用?
如果在嚴格模式的情況下執行純粹的函數調用,那么這里的的 `this` 并不會指向全局,而是 `undefined`,這樣的做法是為了消除 js 中一些不嚴謹的行為
'use strict';
function test() {
console.log(this.a);
};
var a=2;
小課堂視頻鏈接:https://v.qq.com/x/page/m0540rtxyl4.html
下期不見不散~
今天的分享就到這里啦,歡迎大家點贊、轉發、留言、拍磚~
test();//嚴格模式下會報錯,正常模式下為2