JS中this的指向

大家好,我是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.參考文獻

參考一:別再為this發愁了----js中的this機制

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 工廠模式類似于現實生活中的工廠可以產生大量相似的商品,去做同樣的事情,實現同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,854評論 2 17
  • 首先必須要說的是,this的指向在函數定義的時候是確定不了的,只有函數執行的時候才能確定this到底指向誰,實際上...
    Mr__王閱讀 738評論 0 3
  • JS中this的指向 【成都小課堂】 1.背景介紹 2.知識剖析 3.常見問題 4.解決方案 5.編碼實戰 6.擴...
    何華颯閱讀 405評論 0 0
  • 大家好,我是IT修真院上海分院第1期的Web學員劉洪利,今天給大家分享一下Js中this的指向 1.背景介紹 JA...
    LHongLi閱讀 1,648評論 0 1
  • 生活就是: 把理想與現實泡在一杯紅酒里, 微熏成浪漫的樣子, 然后一飲而盡……
    天山木蘭閱讀 81評論 0 0