JS學(xué)習(xí)筆記

js和java的異同點(diǎn)

變量聲明

函數(shù)聲明

js中的變量提升和函數(shù)提升

為什么有變量提升

總結(jié)

js和java的異同點(diǎn)

首先，js的語(yǔ)法和kottlin的語(yǔ)法有些相似。比如var，方法聲明用



  function 方法名稱 (參數(shù)名稱...){

  //方法內(nèi)部邏輯

  }



還有變量類型聲明 :



數(shù)據(jù)類型 : 變量名=值



區(qū)別：一：js的數(shù)據(jù)類型和java類似。只不過(guò)js中的數(shù)據(jù)類型number將java中的int，double，float整合了。

二：js中可以不用聲明變量類型。變量不聲明數(shù)據(jù)類型的話，那么他的類型取決于當(dāng)前的值是什么數(shù)據(jù)類型。舉例：



var num=0;

num-"lyyyyyyyyyyyyyy";

num=[];

num={};



三：js中的類型判斷：



判斷基本類型，返回一個(gè)字符串

1

console.log(typeof '');//string

console.log(typeof []);//object

console.log(typeof {});//object

console.log(typeof 1);//number

console.log(typeof null);//object

console.log(typeof undefined);//undefined

console.log(typeof true);//boolean

console.log(typeof function(){});//function

console.log(typeof /\d/);//object





檢查某個(gè)對(duì)象屬于哪個(gè)構(gòu)造函數(shù)，返回true/false

1

function A(){};

function B(){};

let a = new A();

console.log(a instanceof A);

console.log(a instanceof B);

console.log([] instanceof Array);//true

console.log({} instanceof Object);//true

console.log(/\d/ instanceof RegExp);//true

console.log(function(){} instanceof Object);//true

console.log(function(){} instanceof Function);//true





變量聲明

js的變量聲明其實(shí)大體上可以分為三種：var聲明、let與const聲明和函數(shù)聲明。



函數(shù)聲明

doSomething();

 

function doSomething() {

    console.log('doSomething');

}

var foodoSomething= 2;



你覺得上面會(huì)輸出什么？TypeError嗎？其實(shí)輸出的結(jié)果是foo。這就引出了我們的問(wèn)題了，當(dāng)函數(shù)聲明與其他聲明一起出現(xiàn)的時(shí)候，是以誰(shuí)為準(zhǔn)呢？答案就是，函數(shù)聲明高于一切，畢竟函數(shù)是js的第一公民。



那么，下面的例子呢？



doSomething();

 

function doSomething() {

    console.log('1');

}

 

function doSomething() {

    console.log('2');

}



當(dāng)出現(xiàn)多個(gè)函數(shù)聲明，那怎么辦呢？以上代碼輸出結(jié)果為2。

因?yàn)橛卸鄠€(gè)函數(shù)聲明的時(shí)候，是由最后面的函數(shù)聲明來(lái)替代前面的。



domeSomething();

 

var domeSomething= function() {

    console.log('domeSomething');

}



var domeSomething = function() {}這種格式我們叫做函數(shù)表達(dá)式。



它其實(shí)也是分為兩部分，一部分是var foo,而一部分是foo = function() {}，參照例2，我們可以知道，這道題的結(jié)果應(yīng)該是報(bào)了TypeError(因?yàn)閒oo聲明但未賦值，因此foo是undefined)。



js中的變量提升和函數(shù)提升

在js中對(duì)變量進(jìn)行操作后打印值經(jīng)常會(huì)出現(xiàn)undefined的現(xiàn)象。其實(shí)原因是因?yàn)閖s中有一個(gè)叫做變量提升的功能。舉例：

1

var data="lyyyyy";

getData();

function getData(){

//第一次打印

console.log("data值為: ", data);

var data="yyyyyyy";

//第二次打印

console.log("data值為: ", data);

}



打印的值第一個(gè)為undefined，而第二個(gè)打印的值為yyyyy.



原因：

在執(zhí)行g(shù)etData()方法的時(shí)候會(huì)在函數(shù)內(nèi)部首先將變量的聲明提升到第一步。

然后再聲明函數(shù)內(nèi)部的函數(shù)（如果函數(shù)內(nèi)部有函數(shù)的話）。

之后才會(huì)按照方法內(nèi)部的邏輯先后順序執(zhí)行代碼。前兩步只是聲明?。。?br />
看到這里應(yīng)該就已經(jīng)知道為什么會(huì)有上面那樣的結(jié)果了。



實(shí)際的方法內(nèi)部代碼執(zhí)行順序應(yīng)該是這樣的：



function getData(){

//一。聲明變量

var data;

//二。聲明函數(shù)（如果函數(shù)內(nèi)部有函數(shù)的話）



//三。按照代碼的順序執(zhí)行

console.log("data值為: ", data);

data="yyyyyyy";

//第二次打印

console.log("data值為: ", data);

}



看到拆分后的代碼執(zhí)行順序?qū)Y(jié)果也就不迷茫了。



為什么有變量提升

那么為什么會(huì)出現(xiàn)變量提升這個(gè)現(xiàn)象呢?



其實(shí)js和其他語(yǔ)言一樣，都要經(jīng)歷編譯和執(zhí)行階段。而js在編譯階段的時(shí)候，會(huì)搜集所有的變量聲明并且提前聲明變量，而其他的語(yǔ)句都不會(huì)改變他們的順序，因此，在編譯階段的時(shí)候，第一步就已經(jīng)執(zhí)行了，而第二步則是在執(zhí)行階段執(zhí)行到該語(yǔ)句的時(shí)候才執(zhí)行。



總結(jié)

1.js會(huì)將變量的聲明提升到j(luò)s頂部執(zhí)行，因此對(duì)于這種語(yǔ)句:var a = 2;其實(shí)上js會(huì)將其分為var a;和a = 2;兩部分，并且將var a這一步提升到頂部執(zhí)行。



2.變量提升的本質(zhì)其實(shí)是由于js引擎在編譯的時(shí)候，就將所有的變量聲明了，因此在執(zhí)行的時(shí)候，所有的變量都已經(jīng)完成聲明。

3.當(dāng)有多個(gè)同名變量聲明的時(shí)候，函數(shù)聲明會(huì)覆蓋其他的聲明。如果有多個(gè)函數(shù)聲明，則是由最后的一個(gè)函數(shù)聲明覆蓋之前所有的聲明。

————————————————
版權(quán)聲明：本文為CSDN博主qq_45272690的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)