2021-3-19 前端達(dá)人
JS學(xué)習(xí)筆記
js和java的異同點
變量聲明
函數(shù)聲明
js中的變量提升和函數(shù)提升
為什么有變量提升
總結(jié)
js和java的異同點
首先,js的語法和kottlin的語法有些相似。比如var,方法聲明用
function 方法名稱 (參數(shù)名稱...){
//方法內(nèi)部邏輯
}
還有變量類型聲明 :
數(shù)據(jù)類型 : 變量名=值
區(qū)別:一:js的數(shù)據(jù)類型和java類似。只不過js中的數(shù)據(jù)類型number將java中的int,double,float整合了。
二:js中可以不用聲明變量類型。變量不聲明數(shù)據(jù)類型的話,那么他的類型取決于當(dāng)前的值是什么數(shù)據(jù)類型。舉例:
var num=0;
num-"lyyyyyyyyyyyyyy";
num=[];
num={};
三:js中的類型判斷:
判斷基本類型,返回一個字符串
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ò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的變量聲明其實大體上可以分為三種:var聲明、let與const聲明和函數(shù)聲明。
函數(shù)聲明
doSomething();
function doSomething() {
console.log('doSomething');
}
var foodoSomething= 2;
你覺得上面會輸出什么?TypeError嗎?其實輸出的結(jié)果是foo。這就引出了我們的問題了,當(dāng)函數(shù)聲明與其他聲明一起出現(xiàn)的時候,是以誰為準(zhǔn)呢?答案就是,函數(shù)聲明高于一切,畢竟函數(shù)是js的第一公民。
那么,下面的例子呢?
doSomething();
function doSomething() {
console.log('1');
}
function doSomething() {
console.log('2');
}
當(dāng)出現(xiàn)多個函數(shù)聲明,那怎么辦呢?以上代碼輸出結(jié)果為2。
因為有多個函數(shù)聲明的時候,是由最后面的函數(shù)聲明來替代前面的。
domeSomething();
var domeSomething= function() {
console.log('domeSomething');
}
var domeSomething = function() {}這種格式我們叫做函數(shù)表達(dá)式。
它其實也是分為兩部分,一部分是var foo,而一部分是foo = function() {},參照例2,我們可以知道,這道題的結(jié)果應(yīng)該是報了TypeError(因為foo聲明但未賦值,因此foo是undefined)。
js中的變量提升和函數(shù)提升
在js中對變量進(jìn)行操作后打印值經(jīng)常會出現(xiàn)undefined的現(xiàn)象。其實原因是因為js中有一個叫做變量提升的功能。舉例:
1
var data="lyyyyy";
getData();
function getData(){
//第一次打印
console.log("data值為: ", data);
var data="yyyyyyy";
//第二次打印
console.log("data值為: ", data);
}
打印的值第一個為undefined,而第二個打印的值為yyyyy.
原因:
在執(zhí)行g(shù)etData()方法的時候會在函數(shù)內(nèi)部首先將變量的聲明提升到第一步。
然后再聲明函數(shù)內(nèi)部的函數(shù)(如果函數(shù)內(nèi)部有函數(shù)的話)。
之后才會按照方法內(nèi)部的邏輯先后順序執(zhí)行代碼。前兩步只是聲明?。?!
看到這里應(yīng)該就已經(jīng)知道為什么會有上面那樣的結(jié)果了。
實際的方法內(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é)果也就不迷茫了。
為什么有變量提升
那么為什么會出現(xiàn)變量提升這個現(xiàn)象呢?
其實js和其他語言一樣,都要經(jīng)歷編譯和執(zhí)行階段。而js在編譯階段的時候,會搜集所有的變量聲明并且提前聲明變量,而其他的語句都不會改變他們的順序,因此,在編譯階段的時候,第一步就已經(jīng)執(zhí)行了,而第二步則是在執(zhí)行階段執(zhí)行到該語句的時候才執(zhí)行。
總結(jié)
1.js會將變量的聲明提升到j(luò)s頂部執(zhí)行,因此對于這種語句:var a = 2;其實上js會將其分為var a;和a = 2;兩部分,并且將var a這一步提升到頂部執(zhí)行。
2.變量提升的本質(zhì)其實是由于js引擎在編譯的時候,就將所有的變量聲明了,因此在執(zhí)行的時候,所有的變量都已經(jīng)完成聲明。
3.當(dāng)有多個同名變量聲明的時候,函數(shù)聲明會覆蓋其他的聲明。如果有多個函數(shù)聲明,則是由最后的一個函數(shù)聲明覆蓋之前所有的聲明。
————————————————
版權(quán)聲明:本文為CSDN博主qq_45272690的原創(chuàng)文章,遵循CC 4.0 BY-SA版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接及本聲明。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.sillybuy.com