JavaScript預(yù)解析,對(duì)象詳解
一、預(yù)解析
1、變量預(yù)解析和函數(shù)預(yù)解析
JavaScript 代碼是由瀏覽器中的 JavaScript 解析器來執(zhí)行的。JavaScript 解析器在運(yùn)行 JavaScript 代碼的時(shí)候分為兩步:預(yù)解析和代碼執(zhí)行。
- 預(yù)解析:在當(dāng)前作用域下, JS 代碼執(zhí)行之前,瀏覽器會(huì)默認(rèn)把帶有 var 和 function 聲明的變量在內(nèi)存中進(jìn)行提前聲明或者定義。
- 代碼執(zhí)行: 從上到下執(zhí)行JS語(yǔ)句。
預(yù)解析只會(huì)發(fā)生在通過 var 定義的變量和 function 上。學(xué)習(xí)預(yù)解析能夠讓我們知道為什么在變量聲明之前訪問變量的值是 undefined,為什么在函數(shù)聲明之前就可以調(diào)用函數(shù)。預(yù)解析也叫做變量、函數(shù)提升。
1、變量預(yù)解析
變量預(yù)解析: 變量的聲明會(huì)被提升到當(dāng)前作用域的最上面,變量的賦值不會(huì)提升。
例如:
/*先解析var變量num 然后執(zhí)行console輸出 最后把10賦給num*/ console.log(num); // 結(jié)果是多少? var num = 10; // ?
2、函數(shù)預(yù)解析
函數(shù)預(yù)解析: 函數(shù)的聲明會(huì)被提升到當(dāng)前作用域的最上面,但是不會(huì)調(diào)用函數(shù)。
/*先解析fn函數(shù)的定義 然后執(zhí)行console語(yǔ)句*/ console.log("1+2+3+...+100=",fn()); function fn(){ var s = 0; for(var i=1;i<=100;i++){ s += i; } return s; }
2、預(yù)解析案例
來做一個(gè)小練習(xí),看一下輸出的結(jié)果是多少?
console.log((a)); var a = 1; console.log((a)); function a(){ return a; }
結(jié)果為:
二、對(duì)象
在 JavaScript 中,對(duì)象是一組無序的相關(guān)屬性和方法的集合,所有的事物都是對(duì)象,例如字符串、數(shù)值、數(shù)組、函數(shù)等。
對(duì)象是由屬性和方法組成的。
- 屬性:事物的特征,在對(duì)象中用屬性來表示(常用名詞)
- 方法:事物的行為,在對(duì)象中用方法來表示(常用動(dòng)詞)
1、創(chuàng)建對(duì)象的三種方式
1、利用字面量創(chuàng)建對(duì)象
對(duì)象字面量:就是花括號(hào) { } 里面包含了表達(dá)這個(gè)具體事物(對(duì)象)的屬性和方法。{ } 里面采取鍵值對(duì)的形式表示 。
- 鍵:相當(dāng)于屬性名
- 值:相當(dāng)于屬性值,可以是任意類型的值(數(shù)字類型、字符串類型、布爾類型,函數(shù)類型等)
var star = { name : 'xl', age : 18, sex : '女', sayStudy : function(){ console.log('好好學(xué)習(xí)啊'); } };
對(duì)象里面的屬性調(diào)用 : 對(duì)象.屬性名 ,這個(gè)小點(diǎn) . 就理解為“ 的 ” 。例如:star.name
對(duì)象里面屬性的另一種調(diào)用方式 : 對(duì)象[‘屬性名'],注意方括號(hào)里面的屬性必須加引號(hào)。例如:star['age']
2、利用new Object創(chuàng)建對(duì)象
和前面學(xué)習(xí)的new Array() 創(chuàng)建數(shù)組原理一致
var andy = new Object(); andy.name = 'xl'; andy.age = 18; andy.sex = '女'; andy.sayStudy = function(){ console.log('好好學(xué)習(xí)啊'); }
- Object() :第一個(gè)字母大寫
- new Object() :需要 new 關(guān)鍵字
- 使用的格式:對(duì)象.屬性 = 值;
3、利用構(gòu)造函數(shù)創(chuàng)建對(duì)象
構(gòu)造函數(shù) :是一種特殊的函數(shù),主要用來初始化對(duì)象,即為對(duì)象成員變量賦初始值,它總與 new 運(yùn)算符一起使用。我們可以把對(duì)象中一些公共的屬性和方法抽取出來,然后封裝到這個(gè)函數(shù)里面。
在 js 中,使用構(gòu)造函數(shù)要時(shí)要注意以下兩點(diǎn):
- 構(gòu)造函數(shù)用于創(chuàng)建某一類對(duì)象,其首字母要大寫
- 構(gòu)造函數(shù)要和 new 一起使用才有意義
例如:
function MyName(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } var xl = new MyName('熊柳','18','女'); var huan = new MyName('王歡','16','女'); console.log('xl.name='+xl.name); console.log('huan:'); console.log(huan);
打印結(jié)果為:
注意
- 構(gòu)造函數(shù)約定首字母大寫。
- 函數(shù)內(nèi)的屬性和方法前面需要添加 this ,表示當(dāng)前對(duì)象的屬性和方法。
- 構(gòu)造函數(shù)中不需要 return 返回結(jié)果。
- 當(dāng)我們創(chuàng)建對(duì)象的時(shí)候,必須用 new 來調(diào)用構(gòu)造函數(shù)。
4、構(gòu)造函數(shù)和對(duì)象
- 構(gòu)造函數(shù),抽象了對(duì)象的公共部分,封裝到了函數(shù)里面,它泛指某一大類(class)
- 創(chuàng)建對(duì)象,特指某一個(gè),通過 new 關(guān)鍵字創(chuàng)建對(duì)象的過程我們也稱為對(duì)象實(shí)例化。
2、new關(guān)鍵字
new 在執(zhí)行時(shí)會(huì)做四件事情:
1.在內(nèi)存中創(chuàng)建一個(gè)新的空對(duì)象。
2.讓 this 指向這個(gè)新的對(duì)象。
3.執(zhí)行構(gòu)造函數(shù)里面的代碼,給這個(gè)新對(duì)象添加屬性和方法。
4.返回這個(gè)新對(duì)象(所以構(gòu)造函數(shù)里面不需要return)。
3、遍歷對(duì)象屬性
for…in 語(yǔ)句用于對(duì)數(shù)組或者對(duì)象的屬性進(jìn)行循環(huán)操作。
其語(yǔ)法如下:
for (變量 in 對(duì)象名字) { // 在此執(zhí)行代碼 }
語(yǔ)法中的變量是自定義的,它需要符合命名規(guī)范,通常我們會(huì)將這個(gè)變量寫為 k 或者 key。
for (var k in obj) { console.log(k); // 這里的 k 是屬性名 console.log(obj[k]); // 這里的 obj[k] 是屬性值 }
例如構(gòu)建了如下對(duì)象
function Hero(name,type,blood,attack){ this.name = name; this.type = type; this.blood = blood; this.attack = attack; } var lianpo = new Hero('廉頗','力量型','500血量','近戰(zhàn)'); var houyi = new Hero('后羿','射手型','100血量','遠(yuǎn)程');
當(dāng)執(zhí)行for..in語(yǔ)句時(shí),打印k和obj[k]會(huì)分別得到如下結(jié)果:
function Hero(name,type,blood,attack){ this.name = name; this.type = type; this.blood = blood; this.attack = attack; } var lianpo = new Hero('廉頗','力量型','500血量','近戰(zhàn)'); var houyi = new Hero('后羿','射手型','100血量','遠(yuǎn)程');
for(k in lianpo){ console.log(lianpo[k]); }
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
教你JavaScript利用charAt()統(tǒng)計(jì)出現(xiàn)次數(shù)最多的字符和次數(shù)
這篇文章主要介紹了JavaScript利用charAt()統(tǒng)計(jì)出現(xiàn)次數(shù)最多的字符和次數(shù)的操作方法,本文以判斷一個(gè)字符串'aabcdobdackoppz'中出現(xiàn)次數(shù)最多的字符,并統(tǒng)計(jì)其次數(shù)為例,通過實(shí)例代碼給大家詳細(xì)介紹,需要的朋友參考下吧2021-08-08解決bootstrap中下拉菜單點(diǎn)擊后不關(guān)閉的問題
今天小編就為大家分享一篇解決bootstrap中下拉菜單點(diǎn)擊后不關(guān)閉的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08JS實(shí)現(xiàn)audio音頻剪裁剪切復(fù)制播放與上傳(步驟詳解)
這篇文章主要介紹了JS實(shí)現(xiàn)audio音頻剪裁剪切復(fù)制播放與上傳,本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07淺析JavaScript訪問對(duì)象屬性和方法及區(qū)別
這篇文章主要介紹了淺析JavaScript訪問對(duì)象屬性和方法及區(qū)別的相關(guān)資料,需要的朋友可以參考下2015-11-11詳解template標(biāo)簽用法(含vue中的用法總結(jié))
這篇文章主要介紹了template標(biāo)簽用法(含vue中的用法總結(jié)),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-01-01JavaScript使用canvas實(shí)現(xiàn)手寫簽名功能
最近遇到一個(gè)h5手寫簽名的需求,按理說這種功能網(wǎng)上隨便一搜一大把現(xiàn)成的源碼和組件,但是像這種比較經(jīng)典又很簡(jiǎn)單的功能,還是要弄清楚到底怎么實(shí)現(xiàn)的,所以接下來本文就給大家介紹一下如何用canvas實(shí)現(xiàn)手寫簽名功能2023-08-08微信小程序 websocket 實(shí)現(xiàn)SpringMVC+Spring+Mybatis
這篇文章主要介紹了 微信小程序websocket實(shí)現(xiàn)SpringMVC+Spring+Mybatis的相關(guān)資料,這里提供實(shí)現(xiàn)思路及實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-08-08JS實(shí)現(xiàn)簡(jiǎn)單的選擇題測(cè)評(píng)系統(tǒng)代碼思路詳解(demo)
本文給大家分享js實(shí)現(xiàn)簡(jiǎn)單的選擇題測(cè)評(píng)系統(tǒng)實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-09-09