javascript知識點

時間：2022-10-05 18:24:02 學習方法

javascript知識點

　　學習javascript要掌握哪些知識點?下面是小編整理的一些javascript知識點，希望對你有幫助。

javascript知識點

　　ECMAScirpt中的變量，函數名，操作符都區分大小寫。

　　標識符

　　標識符指的可能是：

　　變量名

　　函數名

　　屬性名

　　函數的參數

　　標識符的名稱：

　　第一個字符只能是字母，下劃線_，或者美元符號$;

　　其他的可以是字母，數字，下劃線_，或者美元符號$。

　　按照慣例，標識符名稱應使用駝峰法，即首字母小寫，剩下的每個單詞首字母大寫。

　　不能把關鍵字、保留字、TRUE、FALSE、NULL作為標識符名稱。

　　注釋：

　　//單行注釋

　　多行注釋

　　嚴格模式：

　　ES5引入了嚴格模式，嚴格模式下，某些舊版本(ES3)的一些不確定行為將得到處理，而對某些不安全的操作也會拋出錯誤。支持嚴格模式的瀏覽器：IE10+ Firefox 4+ Safari 5.1+ Opera 12+ Chrome

　　//在整個腳本中引入嚴格模式，則在script標簽頂部或者*.js文件頂部添加如下代碼即可。

　　"use strict";

　　//在指定函數中引入嚴格模式：

　　function f1(){

　　"use strict";

　　//TODO...

　　};

　　TODO : 引入了嚴格模式與沒引入嚴格模式的js文件如何解決沖突以及共存?

　　語句：

　　ES中的語句以一個分號結尾，省略分號雖然有效但不推薦。

　　var sum = 1 + 2;

　　關鍵字與保留字：

　　// 關鍵字

　　break case catch continue debugger default delete do instanceof else new finally return for switch function this if throw in try typeof var void while with

　　// ES3定義的保留字

　　abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile

　　//ES5中非嚴格模式下的保留字縮減為這些：

　　class enum extends super const export import

　　//ES5中嚴格模式下的相對非嚴格模式增加的保留字，其中let與yield是新增的。

　　implements interface let package private protected public static yield

　　//實際開發中，建議將ES3定義的保留字外加新增的let與yield作為參考。

　　需要注意的是，ES5的嚴格模式下， eval 與 arguments 也不能作為標識符與屬性名，否則會拋出錯誤。

　　變量：

　　ES中的變量是松散類型的，即變量可以保存任何類型的數據。

　　定義變量使用 var 操作符，后跟變量名(即一個標識符)，

　　使用 var 操作符定義的變量會成為該作用域下的局部變量，該變量在函數退出之后就會被銷毀：

　　var a; //定義一個名為a的變量，值是undefined

　　var b = null; //定義一個名為b的變量，值為null(空)

　　var c = 'percy'; //定義一個名為c的變量，值為字符串“percy”

　　function f1(){

　　var name = 'jon'; //函數f1()下的局部變量

　　alert(name);

　　}

　　f1(); //jon

　　alert(name); //外部不能直接訪問函數的內部變量

　　//使用一條語句定義多個變量，用逗號分隔即可。

　　var name='jon', age=25, isMarried=false;

　　數據類型：

　　ES中有

　　5種簡單數據類型(基本數據類型)： Undefined 、 Null 、 Boolean 、 Number 、 String

　　1種復雜數據類型： Object

　　檢測給定變量的數據類型 —— typeof 操作符

　　返回值：

　　undefined ——給定的值未定義;

　　boolean ——給定的值是布爾值;

　　string ——給定的值是字符串;

　　number ——給定的值是數值;

　　object ——給定的值是對象或者 null ;

　　function ——給定的是函數;

　　function f2(){

　　console.log('Hi!');

　　}

　　var name = 'jon';

　　var age = 25;

　　alert(typeof f2); //function

　　alert(typeof name); //string

　　alert(typeof age); //number

　　ES數據類型之 Undefined 類型

　　只有一個值： undefined

　　var name;

　　/*var name = undefined;*/ //無需把變量顯式設置undefined值

　　alert(name == undefined); //true

　　變量的值為undefined與未聲明的變量并不一樣，但使用 typeof 操作符均會返回undefined，但輸出值時未聲明的變量會產生錯誤：

　　var job; //該變量已聲明但未賦值，默認值為undefined

　　// var name2; 該變量并未聲明

　　alert(typeof job); //測試變量類型，輸出undefined

　　alert(typeof name2); //測試變量類型，即使變量未聲明也會輸出undefined

　　//輸出值時

　　alert(job); //undefined

　　alert(name2); //產生錯誤：Uncaught ReferenceError: name2 is not defined

　　ES數據類型之 Null 類型

　　只有一個值： null ;

　　undefined 值派生自 null 值，所以用 == 測試兩者時會返回 true ;

　　null 值表示一個空對象指針，所以使用 typeof 操作符時會返回 object ;

　　如果創建的變量將來用于保存對象，那么初始聲明該變量時應把值設置為 null ;

　　var name = null;

　　alert(typeof name); //object

　　ES數據類型之 Boolean 類型

　　有兩個值： true 、 false ;

　　//注意Boolean類型字面值是區分大小寫的，True、False以及其他大小寫混合的形式均不屬于Boolean類型值;

　　var isBoy = true;

　　var isGirl = false;

　　使用 Boolean() 函數把其他值轉為Boolean值

　　var name = 'jon';

　　var nameBool = Boolean(name); //true

　　轉換規則如下表：

　　數據類型轉為true的值轉為false的值

　　Boolean true false

　　String 任何非空字符串 “”(空字符串)

　　Number 任何非零數值(包括無窮大) 0，NaN

　　Object 任何對象 null

　　Undefined 不適用 undefined

　　轉換規則對于流程控制語句自動執行相應的Boolean轉換非常重要：

　　var name = 'jon';

　　if(name){ //name轉換為true，執行下面的語句

　　alert('name is defined!');

　　}

　　ES數據類型之 Number 類型

　　TODO

　　ES數據類型之 String 類型

　　TODO

　　ES數據類型之 Object 類型

　　TODO

　　變量, 作用域, 垃圾收集(內存問題)

　　基本類型和引用類型

　　ES中的變量包含基本類型值和引用類型值

　　基本類型值指的是簡單的數據段

　　引用類型值值那些可能有多個值構成的對象

　　五種基本數據類型( Undefined, Null, Boolean, Number, String )的值即基本類型值是按值訪問的, 因此操作的是保存在變量中實際的值

　　引用類型值是保存在內存中的對象,ES不允許直接訪問內存中的位置, 即不能直接操作對象的內存空間. 在操作對象時, 實際上是在操作對象的引用而不是實際的對象.

　　當復制保存在對象中的某個變量時, 操作的是對象的引用 . 但在為對象添加屬性時, 操作的是實際的對象 .

　　動態的屬性

　　定義基本類型的值和引用類型的值方式是基本一樣的, 就是創建一個變量, 然后為該變量賦值 .

　　創建變量以后,基本類型的值和引用類型的值執行的操作有很大不同.

　　//引用類型可以為其添加或刪除屬性和方法

　　var p = new Object();

　　p.name = "Jon";

　　console.log(p.name); //Jon

　　delete p.name;

　　console.log(p.name); //undefined

　　//基本類型不能添加屬性, 因為即使添加了也不能訪問

　　var n = "Jon"; //一個string字符串類型

　　n.age = 25;

　　console.log(n.age); //undefined

　　復制變量值

　　復制基本類型值的變量值與復制引用類型值的變量值也存在不同.

　　復制基本類型值時, 是直接創建新值, 占據不同的內存(棧)空間, 復制之后兩個變量可以參與任何操作而不互相影響

　　var n1 = 5;

　　var n2 = n1; //復制n1

　　復制引用類型值時, 同樣也會把儲存在變量對象中的值復制一份到新變量分配的空間中, 但這個新變量的值其實是一個指針, 指向儲存在堆中的一個對象. 所以兩者引用的是同一個對象. 所以, 改變其中一個變量, 另一個變量也會受到影響.

　　var o1 = new Object();

　　var o2 = o1;

　　o1.name = 'Jon';

　　console.log(o2.name); //o1和o2指向的是堆內存中的同一個對象, 所以同樣會輸出Jon

　　參數傳遞

　　ES中所有函數的參數都是按值傳遞的,不存在引用傳遞的參數

　　函數外部的值復制給函數內部的參數, 就等于把值從一個變量復制到另一個變量一樣.

　　基本類型值的傳遞就像基本類型變量的復制一樣, 向參數傳遞基本類型值的時候, 被傳遞的值會被復制給一個局部變量(即命名參數, 用ES的概念來說, 就是arguments中的一個元素)

　　引用類型值的傳遞就像引用類型變量的復制一樣, 向參數傳遞引用類型值的時候, 會把這個值在內存中的地址復制給一個變量 , 因此這個局部變量的變化會反映在函數的外部

　　function addTen(n){ //參數(這里是n)其實是函數的局部變量

　　n += 10;

　　return n;

　　}

　　var c = 20;

　　var r = addTen(c); //調用時,c作為一個局部變量傳遞給n,函數體內又會自増10然后返回

　　console.log(c); //外部的c變量不會被影響,還是20

　　console.log(r); //30

　　function setName(obj){

　　obj.name = "Jon";

　　}

　　var p = new Object(); //創建了一個對象并保存在變量p中

　　setName(p); //隨即被傳遞到setName()中,p復制給了obj

　　console.log(p.name); //所以obj的屬性name也能被p訪問到,所以這里輸出Jon

　　//證明對象是按值傳遞的例子

　　function setName(obj){

　　obj.name = 'Jon';

　　obj = new Object(); //為obj重新定義了一個對象

　　obj.name = 'Percy'; //然后為obj定義了另一個name屬性

　　}//如果p是引用傳遞的話, 那么p就會自動被修改為指向其name屬性值為Percy的對象,但下面的例子輸出的仍然是Jon. 說明即使函數內部修改了參數的值, 但原始的引用仍然保持不變.

　　var p = new Object();

　　setName(p);

　　console.log(p.name); //Jon

　　可以吧ES函數的參數想象成局部變量.

　　檢測類型

　　typeof — 檢測變量是哪種基本數據類型 . string , number , boolean , undefined , object (如果變量的值是一個對象或null, 則返回object)

　　console.log(typeof "Jon"); //string

　　console.log(typeof true); //boolean

　　console.log(typeof 1); //number

　　var a;

　　console.log(typeof a); //undefined

　　console.log(typeof null); //object

　　var o = new Object();

　　console.log(typeof o); //object

　　instanceof — 檢測引用數據類型值時, 檢測其引用數據類型值是什么類型的對象

　　result = variable instanceof constructor

　　如果變量是給定引用類型的實例, 那么instanceof操作符就會返回true

　　console.log(person instanceof Object); //變量person是Object嗎?

　　console.log(colors instanceof Array); //變量colors是Array嗎?

　　console.log(pattern instanceof RegExp); //變量pattern是RegExp嗎?

　　所有引用類型的值都是Object的實例, 所以檢測一個引用類型的值和Object構造函數時會始終返回true

　　使用instanceof操作符檢測基本類型的值會始終返回false, 因為基本類型不是對象

　　執行環境, 作用域

　　執行環境定義了變量或函數是否有權訪問的其他數據.

　　全局執行環境是最外圍的執行環境(Web瀏覽器中指的是window對象),因此所以全局變量和函數都是作為window對象的屬性和方法創建的.

　　每個函數都有自己的執行環境, 當執行流進入一個函數時, 函數的環境就會被推入一個環境棧中, 函數執行之后, 棧將其環境彈出, 把控制權返回給之前的執行環境.

　　代碼在一個環境中執行時, 會創建變量對象的一個作用域鏈 , 它保證了對執行環境有權訪問的所有變量和函數的有序訪問.

　　全局執行環境的變量對象始終都是作用域鏈中的最后一個對象

　　var color = "blue";

　　function changeColor(){

　　if(color === "blue"){

　　color = "red";

　　}else{

　　color = "blue";

　　}

　　changeColor();

　　console.log("Now color is : " + color);

　　//Now color is : red

　　//函數changeColor()的作用域鏈包含兩個對象,它自己的變量對象和全局環境的變量對象.

　　//內部環境可以通過作用域鏈訪問所有的外部環境, 但外部環境相反不能訪問內部環境的任何變量和函數

　　var color = "blue";

　　function changeColor(){

　　var anotherColor = "red";

　　function swapColors(){

　　var tempColor = anotherColor;

　　anotherColor = color;

　　color = tempColor;

　　//這里可以訪問color, anotherColor, tempColor

　　}

　　swapColors();

　　//這里只可以訪問color, anotherColor

　　}

　　changeColor();

　　////這里只可以訪問color

　　alert("Color is now " + color);

　　沒有塊級作用域

　　if(true){

　　var color = "blue";

　　}

　　console.log(color); //ES中, 在外部依然能訪問塊級作用域內的變量和函數

　　for (var i=0; i < 10; i++){

　　doSomething(i);

　　}

　　alert(i); //可以訪問塊級作用域內的變量,輸出10

　　//ES中查詢標識符會從正在執行的局部環境查找, 如果當前局部環境查找不到, 就會沿著作用域鏈一級一級向上查找. 如果在全局環境都找不到需要查找的標識符, 說明該變量未聲明

　　var color = "blue";

　　function getColor(){

　　return color;

　　}

　　console.log(getColor()); //這里會先搜索getColor()內部有沒有color變量, 如果沒有就向上一級查找, 直到查找到位置, 這里在上一級已經找到, 所以會輸出blue

　　var color = "blue";

　　function getColor(){

　　var color = "red";

　　return color;

　　}

　　console.log(getColor()); //red , 同級找到就不會再向上查找

　　垃圾收集

　　標記清除

　　ES中, 當變量進入環境(例如, 在函數中聲明一個變量時), 就把這個變量標記為"進入環境", 這種進入環境的變量從邏輯上講不能釋放其內存, 因為有可能用到它們. 而當變量離開環境時, 就將其標記為"離開環境".

　　過程 :

　　垃圾收集器運行的時候會給儲存在內存中的所有變量都加上標記(可以使用任意可使用的標記方式)

　　接著會去掉環境中的變量, 以及被環境中的變量引用的變量的標記(個人理解就是當前執行環境的變量以及被環境中變量引用的變量的標記)

　　在此之后再被加上標記的變量, 就是被視為準備刪除的變量(因為它們之前用的時候已經被標記一次了, 再次(第二次)標記說明已經使用完畢), 環境中的變量已經無法訪問這些變量了

　　垃圾收集器完成內存清除工作, 銷毀那些帶標記的值并回收它們所占用的內存空間

　　引用計數

　　引用計數的含義是跟蹤記錄每個值被引用的次數

　　聲明了一個變量并將一個引用類型值賦值給該變量時, 則這個值的引用次數就是1

　　該引用類型值又賦值給另一個變量, 則引用次數加1

　　相反, 如果包含對這個值的引用的變量(如 a 變量)又取得了另一個引用類型值, 則前一個引用類型值的引用次數減1

　　當這個引用類型值的引用次數變成0時, 則說明沒辦法再訪問這個值了, 因而可以將其回收, 釋放內存空間

　　該垃圾收集機制早期的循環引用問題

　　function problem(){

　　var oA = new Object();

　　var oB = new Object();

　　//oA與oB通過各自的屬性互相引用, 在標記清除的回收機制中, 它們的引用次數永遠不可能是0, 并且如果這個函數重復多次調用, 會導致大量內存得不到回收

　　//所以這種方式已經被摒棄, 而采用標記清除來實現其垃圾回收

　　oA.someOtherObject = oB;

　　oB.anotherObject = oA;

　　}

　　IE中的BOM與DOM使用引用計數來作為垃圾收集機制的問題

　　var element = document.getElementById("some_element");

　　var myObject = new Object();

　　//DOM元素(element)與一個原生JS對象(myObject)之間創建了循環引用

　　myObject.element = element; //myObject的element屬性指向element對象

　　element.someObject = myObject; //變量element也有一個屬性名叫someObject回指myObject

　　//基于上述問題, 即使將力爭中的DOM從頁面中移除, 它也永遠不會被回收

　　//解決方案是在他們不使用時手動斷開原生JS對象與DOM元素之間的鏈接

　　//把變量設置為null意味著斷開變量與它之前引用的值之間的鏈接, 當下一次的垃圾回收執行時, 就會刪除這些值并回收他它們占用的內存

　　myObject.element = null;

　　element.someObject = null;

　　//IE9以上已經把DOM和BOM轉換成了真正的JavaScript對象, 所以避免了上述問題

　　性能問題及內存管理

　　性能問題

　　早期的瀏覽器按內存分配量運行的, 達到一個臨界值就會觸發垃圾回收機制, 這個問題在于, 如果一個腳本中包含大量的變量, 那么會在其生命周期也保持有那么多變量, 導致長時間處于垃圾回收機制的臨界值, 從而使垃圾回收機制頻繁運行, 造成嚴重的性能問題.

　　新版本的瀏覽器已經將其垃圾回收機制的工作方式改變, 會動態的調整觸發的臨界值.

　　內存管理

　　優化內存占用的方式, 就是為執行中的代碼只保存必要的數據. 一旦數據不再有用, 就通過將其值設置為null來釋放引用 — 即解除引用

　　function createPerson(){

　　var localPerson = new Object();

　　localPerson.name = name;

　　return localPerson;

　　}

　　var globalPerson = createPerson("Jon");

　　//手動解除globalPerson的引用

　　globalPerson = null;

【javascript知識點】相關文章：

物理知識點11-15