如何理解JavaScript預(yù)解析及對(duì)象

本篇文章為大家展示了如何理解JavaScript預(yù)解析及對(duì)象，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

一、預(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ù)解析只會(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語句*/
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 語句用于對(duì)數(shù)組或者對(duì)象的屬性進(jìn)行循環(huán)操作。

其語法如下：

for (變量 in 對(duì)象名字) {
    // 在此執(zhí)行代碼
}

語法中的變量是自定義的，它需要符合命名規(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語句時(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]);
}

上述內(nèi)容就是如何理解JavaScript預(yù)解析及對(duì)象，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。