當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript 基础转

發布時間：2023/12/18 javascript 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript 基础转小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近面試過一些人, 發現即使經驗豐富的開發人員, 對于一些基礎的理論和細節也常常會模糊. 寫本文是因為就我自己而言第一次學習下面的內容時發現自己確實有所收獲和感悟. 其實我們容易忽視的javascript的細節還有更多, 本文僅是冰山一角. 希望大家都能通過本文有所斬獲.

一. Javascript面向對象

Javascript是一門面向對象的語言, 雖然很多書上都有講解,但還是有很多初級開發者不了解.

創建對象

ps: 以前寫過一篇詳細的創建對象的文章(原型方法, 工廠方法等)但是找不到了, 回頭如果還能找到我再添加進來.下面僅僅簡單介紹.

在C#里我們使用new關鍵字創建對象, 在javascript中也可以使用new關鍵字:

var?objectA?=?new?Object();?

但是實際上"new"可以省略:

var?objectA?=?Object();?

但是我建議為了保持語法一直,?總是帶著new關鍵字聲明一個對象.

創建屬性并賦值

在javascript中屬性不需要聲明, 在賦值時即自動創建:

objectA.name?=?"my?name";?

訪問屬性

一般我們使用"."來分層次的訪問對象的屬性:

alert(objectA.name);?

嵌套屬性

對象的屬性同樣可以是任何javascript對象:

var?objectB?=?objectA; ?

objectB.other?=?objectA; ?

//此時下面三個值相當,?并且改變其中任何一個值其余兩個值都改變 ?

objectA.name; ?

objectB.name; ?

objectB.other.name;?

使用索引

如果objectA上有一個屬性名稱為"school.college", 那么我們沒法通過"."訪問,因為"objectA.school.college"語句是指尋找objectA的school屬性對象的college屬性.

這種情況我們需要通過索引設置和訪問屬性:

objectA["school.college"]?=?"BITI"; ?

alert(objectA["school.college"]);?

下面幾個語句是等效的:

objectA["school.college"]?=?"BITI"; ?

?var?key?=?"school.college"?

alert(objectA["school.college"]); ?

alert(objectA["school"?+?"."?+?"college"]);???????? ?

alert(objectA[key]);?

JSON 格式語法

JSON是指Javascript Object Notation, 即Javascript對象表示法.

我們可以用下面的語句聲明一個對象,同時創建屬性:

//JSON ?

????????var?objectA?=?{ ?

????????????name:?"myName", ?

????????????age:?19, ?

????????????school: ?

????????????{ ?

????????????????college:?"大學", ?

????????????????"high?school":?"高中"? ?

????????????}, ?

????????????like:["睡覺","C#","還是睡覺"] ?

????????}?

JSON的語法格式是使用"{"和"}"表示一個對象, 使用"屬性名稱:值"的格式來創建屬性, 多個屬性用","隔開.

上例中school屬性又是一個對象. like屬性是一個數組. 使用JSON格式的字符串創建完對象后, 就可以用"."或者索引的形式訪問屬性:

objectA.school["high?school"]; ?

objectA.like[1];?

靜態方法與實例方法

靜態方法是指不需要聲明類的實例就可以使用的方法.

實例方法是指必須要先使用"new"關鍵字聲明一個類的實例, 然后才可以通過此實例訪問的方法.

function?staticClass()?{?};?//聲明一個類 ?

???staticClass.staticMethod?=?function()?{?alert("static?method")?};?//創建一個靜態方法 ?

???staticClass.prototype.instanceMethod?=?function()?{?"instance?method"?};?//創建一個實例方法?

上面首先聲明了一個類staticClass, 接著為其添加了一個靜態方法staticMethod 和一個動態方法instanceMethod. 區別就在于添加動態方法要使用prototype原型屬性.

對于靜態方法可以直接調用:

staticClass.staticMethod();?

但是動態方法不能直接調用:

staticClass.instanceMethod();?//語句錯誤,?無法運行.?

需要首先實例化后才能調用:

var?instance?=?new?staticClass();//首先實例化 ?

instance.instanceMethod();?//在實例上可以調用實例方法 ?

二. 全局對象是window屬性

通常我們在??

然而我們還應該知道, 實際上全局變量objectA是創建在window對象上, 可以通過window對象訪問到:

window.objectA?

三. 函數究竟是什么

我們都知道如何創建一個全局函數以及如何調用:

function?myMethod() ?

{ ?

alert("Hello!"); ?

} ??

myMethod();??

其實同全局對象一樣, 使用function關鍵字創建的方法(也可以創建類)的名稱, 實際上是為window對象創建了myMethod屬性, 并且值是一個匿名方法, 上面的語句等同于:

window.myMethod?=?function() ?

{ ?

alert("Hello!"); ?

無論使用哪種方式聲明, 實際保存時都是使用函數名創建window對象的屬性. 并且值只有函數體沒有函數名稱.

所以,下面三種聲明方式是等效的:

function?myMethod() ?

{ ?

alert("Hello!"); ?

} ?

window.myMethod?=?function() ?

{ ?

alert("Hello!"); ?

} ?

myMethod?=?function() ?

{ ?

alert("Hello!"); ?

四. "this"究竟是什么

在C#中,this變量通常指類的當前實例. 在javascript則不同, javascript中的"this"是函數上下文,不是由聲明決定,而是由如何調用決定.因為全局函數其實就是window的屬性, 所以在頂層調用全局函數時的this是指window對象.

下面的例子可以很好的說明這一切:

var?o1?=?{?name:?"o1?name"?}; ?

????????window.name?=?"window?name"; ?

????????function?showName() ?

????????{ ?

????????????alert(this.name); ?

????????}???????? ?

???????? ?

????????o1.show?=?showName; ?

????????window.show?=?showName; ?

????????showName(); ?

????????o1.show(); ?

????????window.show();?

結果

window name

o1 name

window name?

結果證明在頂層調用函數和使用window對象調用函數時, this都指向window對象. 而在對象中調用函數時this指向當前對象.

五. javascript中的閉包

閉包的概念比較難以理解, 先看閉包的定義:

閉包是一個擁有許多變量和綁定了這些變量的環境的表達式(通常是一個函數)，因而這些變量也是該表達式的一部分。

簡單表達:

閉包就是function實例以及執行function實例時來自環境的變量.

先看下面的例子:

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ?

<html?xmlns="http://www.w3.org/1999/xhtml"> ?

<head> ?

????<title></title> ?

</head> ?

<body> ?

????<div?id="divResult"></div> ?

????<script?type="text/javascript"> ?

????????function?start() ?

????????{ ?

????????????var?count?=?0; ?

????????????window.setInterval(function() ?

????????????{ ?

????????????????document.getElementById("divResult").innerHTML?+=?count?+?"<br/>"; ?

????????????????count++; ?

????????????},?3000); ?

????????}; ?

????????start(); ?

????</script> ?

</body> ?

</html>?

count是start函數體內的變量, 通常我們理解count的作用于是在start()函數內, 在調用start()函數結束后應該也會消失.但是此示例的結果是count變量會一直存在,并且每次被加1:

因為count變量是setInterval中創建的匿名函數(就是包含count++的函數)的閉包的一部分!

再通俗的講, 閉包首先就是函數本身, 比如上面這個匿名函數本身, 同時加上在這個函數運行時需要用到的count變量.

javascript中的閉包是隱式的創建的, 而不像其他支持閉包的語言那樣需要顯式創建. 我們在C#語言中很少碰到是因為C#中無法在方法中再次聲明方法. 而在一個方法中調用另一個方法通常使用參數傳遞數據.

轉載于:https://www.cnblogs.com/kevinge/archive/2011/10/20/2218639.html

總結

以上是生活随笔為你收集整理的javascript 基础转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：下一代CC++测试框架TestNG++入
下一篇：事物Spring boot @Trans

javascript

javascript 基础 转

總結

javascript 基础转