最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

JavaScript面向?qū)ο蠡A(chǔ)與this指向問題的具體分析

來源:懂視網(wǎng) 責(zé)編:小OO 時間:2020-11-27 20:12:00
文檔

JavaScript面向?qū)ο蠡A(chǔ)與this指向問題的具體分析

前 言;的程序語言經(jīng)歷了從“面向機(jī)器”、到“面向過程”、再到“面向?qū)ο蟆钡囊粋€過程。而JavaScript是一門基于對象的一門語言,它介于面向過程與面向?qū)ο笾g。在學(xué)習(xí)JavaScript的過程中,OOP是非常重要的一環(huán),下面我們來一起探討一下JS中的面向?qū)ο蟀伞? 、OOP的基礎(chǔ)問題。1.1什么是面向過程和面向?qū)ο?。面向過程:專注于如何去解決一個問題的過程步驟。編程特點(diǎn)是由一個個的函數(shù)去實(shí)現(xiàn)每一步的過程步驟,沒有類和對象的概念。面向?qū)ο螅簩W⒂谟赡囊粋€對象來解決這個問題。編程特點(diǎn)是出現(xiàn)了一個個的類,從類中拿到這個對象,由這個對象去解決具體的問題。
推薦度:
導(dǎo)讀前 言;的程序語言經(jīng)歷了從“面向機(jī)器”、到“面向過程”、再到“面向?qū)ο蟆钡囊粋€過程。而JavaScript是一門基于對象的一門語言,它介于面向過程與面向?qū)ο笾g。在學(xué)習(xí)JavaScript的過程中,OOP是非常重要的一環(huán),下面我們來一起探討一下JS中的面向?qū)ο蟀伞? 、OOP的基礎(chǔ)問題。1.1什么是面向過程和面向?qū)ο?。面向過程:專注于如何去解決一個問題的過程步驟。編程特點(diǎn)是由一個個的函數(shù)去實(shí)現(xiàn)每一步的過程步驟,沒有類和對象的概念。面向?qū)ο螅簩W⒂谟赡囊粋€對象來解決這個問題。編程特點(diǎn)是出現(xiàn)了一個個的類,從類中拿到這個對象,由這個對象去解決具體的問題。

下面小編就為大家?guī)硪黄仙U凧avaScript面向?qū)ο蠡A(chǔ)與this指向問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

前 言

我們的程序語言經(jīng)歷了從“面向機(jī)器”、到“面向過程”、再到“面向?qū)ο蟆钡囊粋€過程。而JavaScript是一門基于對象的一門語言,它介于面向過程與面向?qū)ο笾g。在學(xué)習(xí)JavaScript的過程中,OOP是非常重要的一環(huán),下面我們來一起探討一下JS中的面向?qū)ο蟀桑。。?/p>

1 、OOP的基礎(chǔ)問題

1.1什么是面向過程和面向?qū)ο螅?/p>

面向過程:專注于如何去解決一個問題的過程步驟。編程特點(diǎn)是由一個個的函數(shù)去實(shí)現(xiàn)每一步的過程步驟,沒有類和對象的概念。

面向?qū)ο螅簩W⒂谟赡囊粋€對象來解決這個問題。編程特點(diǎn)是出現(xiàn)了一個個的類,從類中拿到這個對象,由這個對象去解決具體的問題。

對于調(diào)用者來說,面向過程需要調(diào)用者自己去實(shí)現(xiàn)各種函數(shù)。而面向?qū)ο?,只需要告訴調(diào)用者對象中具體方法的功能,而不需要調(diào)用者了解方法中的實(shí)現(xiàn)細(xì)節(jié)。

1.2面向?qū)ο蟮娜筇卣?/p>

繼承、封裝、多態(tài)

1.3類和對象的關(guān)系

① 類:一類具有相同特征(屬性)和行為(方法)的集合。

比如:人類-->屬性:身高、體重、性別 方法:吃飯、說話、走路

② 對象:從類中,拿出具有確定屬性值和方法的個體。

比如:張三-->屬性:身高180、體重180 方法:說話-->我叫張三,身高180

③ 類和對象的關(guān)系

類是抽象的,對象是具體的(類是對象的抽象化,對象是類的具體化)

解釋一下:

類是一個抽象的概念,只能說類有屬性和方法,但是不能給屬性賦具體的值。比如說人類有姓名,但是不能說人類的姓名叫啥。。

對象是一個具體的個例,是將類中的屬性進(jìn)行具體賦值而來的個體。比如說張三是人類的一個個體,可以說張三的姓名叫張三。也就是張三對人類的每一個屬性進(jìn)行了具體的賦值,那么張三就是由人類產(chǎn)生的一個對象。

2、 JavaScript中的面向?qū)ο?/p>

2.1創(chuàng)建類和對象的步驟

①創(chuàng)建一個類(構(gòu)造函數(shù)):類名必須使用大駝峰法則,即每個單詞的首字母必須大寫。

function 類名(屬性1){
 this.屬性1 = 屬性1;
 this.方法 = function(){
 //方法中要調(diào)用自身屬性,必須要使用this.屬性
 }
}

②通過類,實(shí)例化(new)出一個對象。

var obj = new 類名(屬性1的具體值);

obj.屬性; 調(diào)用屬性

obj.方法(); 調(diào)用方法

③注意事項(xiàng)

>>>通過類名,new出一個對象的過程,叫做“類的實(shí)例化”

>>>類中的this,會在實(shí)例化的時候,指向新new出的對象。所以,this.屬性 this.方法,實(shí)際上是將屬性和方法綁定在即將new出的對象上面。

>>>在類中,要調(diào)用自身屬性,必須使用this.屬性名、如果直接使用變量名,則無法訪問對應(yīng)的屬性。

>>>類名必須使用大駝峰法則,注意與普通函數(shù)的區(qū)別。

2.2兩個重要屬性constructor和instanceof

①constructor:返回當(dāng)前對象的構(gòu)造函數(shù)

>>>zhangsan.constructor = Person; √

②instanceof:檢測一個對象,是不是一個類的實(shí)例;

>>>lisi instanceof Person √ lisi是通過Person類new出的

>>>lisi instanceof Object √ 所有對象都是Object的實(shí)例

>>>Person instanceof Object √ 函數(shù)本身也是對象

3、 JavaScript中的this指向問題

在上一部分中,我們創(chuàng)建了一個類,并通過這個類new出了一個對象。 但是,這里面出現(xiàn)了大量的this。 很多同學(xué)就要懵逼了,this不是“這個”的意思嗎?為什么我在函數(shù)里面寫的this定義的屬性,最后到了函數(shù)new出的對象呢??

3.1誰最終調(diào)用函數(shù),this就指向誰!

① this指向誰,不應(yīng)該考慮函數(shù)在哪聲明,而應(yīng)該考慮函數(shù)在哪調(diào)用??!

② this指向的,永遠(yuǎn)只可能是對象,不可能是函數(shù)!!

③ this指向的對象,叫做函數(shù)的上下文context,也叫函數(shù)的調(diào)用者。

3.2this指向的規(guī)律(與函數(shù)的調(diào)用方式息息相關(guān)!)

① 通過函數(shù)名()調(diào)用的,this永遠(yuǎn)指向window

func(); // this--->window
//【解釋】 我們直接用一個函數(shù)名()調(diào)用,函數(shù)里面的this,永遠(yuǎn)指向window。

② 通過對象.方法調(diào)用的,this指向這個對象

// 狹義對象
 var obj = {
 name:"obj",
 func1 :func
 };
 obj.func1(); // this--->obj
//【解釋】我們將func函數(shù)名,當(dāng)做了obj這個對象的一個方法,然后使用對象名.方法名, 這時候函數(shù)里面的this指向這個obj對象。

 // 廣義對象
 document.getElementById("p").onclick = function(){
 this.style.backgroundColor = "red";
}; // this--->p
//【解釋】對象打點(diǎn)調(diào)用還有一個情況,我們使用getElementById取到一個p控件,也是一種廣義的對象,用它打點(diǎn)調(diào)用函數(shù),則函數(shù)中的this指向這個p對象。

③ 函數(shù)作為數(shù)組的一個元素,用數(shù)組下標(biāo)調(diào)用,this指向這個數(shù)組

var arr = [func,1,2,3];
arr[0](); // this--->arr
//【解釋】這個,我們把函數(shù)名,當(dāng)做數(shù)組中的一個元素。使用數(shù)組下標(biāo)調(diào)用,則函數(shù)中的this將指向這個數(shù)組arr。

④ 函數(shù)作為window內(nèi)置函數(shù)的回調(diào)函數(shù)使用,this指向window。比如setTimeout、setInterval等

setTimeout(func,1000);// this--->window
//setInterval(func,1000);
//【解釋】使用setTimeout、setInterval等window內(nèi)置函數(shù)調(diào)用函數(shù),則函數(shù)中的this指向window。

⑤ 函數(shù)作為構(gòu)造函數(shù),使用new關(guān)鍵字調(diào)用,this指向新new出的對象

var obj = new func(); //this--->new出的新obj
//【解釋】這個就是第二部分我們使用構(gòu)造函數(shù)new對象的語句,將函數(shù)用new關(guān)鍵字調(diào)用,則函數(shù)中的this指向新new出的對象。

3.3關(guān)于this問題的面試題

var fullname = 'John Doe';
var obj = {
  fullname: 'Colin Ihrig',
  prop: {
    fullname: 'Aurelio De Rosa',
    getFullname: function() {
      return this.fullname;
    }
  }
};
console.log(obj.prop.getFullname()); 
// 函數(shù)的最終調(diào)用者 obj.prop 
 
var test = obj.prop.getFullname;
console.log(test()); 
// 函數(shù)的最終調(diào)用者 test() this-> window
 
obj.func = obj.prop.getFullname;
console.log(obj.func()); 
// 函數(shù)最終調(diào)用者是obj
 
var arr = [obj.prop.getFullname,1,2];
arr.fullname = "JiangHao";
console.log(arr[0]());
// 函數(shù)最終調(diào)用者數(shù)組

好了,這篇博客,我們了解了什么是面向?qū)ο?、類和對象的關(guān)系、JS中聲明類與對象的步驟,以及重點(diǎn)講解的this指向問題! 希望能夠幫助大家真正的理解了this的認(rèn)知,下面我會繼續(xù)給大家分享關(guān)于面向?qū)ο蠓矫娴膯栴}。多謝大家的支持?。?!

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

文檔

JavaScript面向?qū)ο蠡A(chǔ)與this指向問題的具體分析

前 言;的程序語言經(jīng)歷了從“面向機(jī)器”、到“面向過程”、再到“面向?qū)ο蟆钡囊粋€過程。而JavaScript是一門基于對象的一門語言,它介于面向過程與面向?qū)ο笾g。在學(xué)習(xí)JavaScript的過程中,OOP是非常重要的一環(huán),下面我們來一起探討一下JS中的面向?qū)ο蟀伞? 、OOP的基礎(chǔ)問題。1.1什么是面向過程和面向?qū)ο?。面向過程:專注于如何去解決一個問題的過程步驟。編程特點(diǎn)是由一個個的函數(shù)去實(shí)現(xiàn)每一步的過程步驟,沒有類和對象的概念。面向?qū)ο螅簩W⒂谟赡囊粋€對象來解決這個問題。編程特點(diǎn)是出現(xiàn)了一個個的類,從類中拿到這個對象,由這個對象去解決具體的問題。
推薦度:
標(biāo)簽: js 具體的 javascript
  • 熱門焦點(diǎn)
專題
Top
fffffffffffff

抖音扫码关注

手机端二维码

每天分享百科知识!