前端筆記——JavaScript——對象、函數、作用域

JavaScript 對象

JavaScript 對象是擁有屬性和方法的數據。

對象可以說是一個變量,但對象可以包含多個值(多個變量)。
var car = {type:"Fiat", model:500, color:"white"};

也可以使用字符來定義和創建 JavaScript 對象:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>創建 JavaScript 對象。</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
	person.firstName + " 現在 " + person.age + " 歲.";
</script>

</body>
</html>

訪問對象屬性

<p>
有兩種方式可以訪問對象屬性:
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
    firstName : "John",
    lastName : "Doe",
    id : 5566
};
document.getElementById("demo").innerHTML =
	person.firstName + " " + person.lastName;
</script>
<p>
有兩種方式可以訪問對象屬性: 
</p>
<p>
你可以使用 .property 或 ["property"]。
</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566
};
document.getElementById("demo").innerHTML =
	person["firstName"] + " " + person["lastName"];
</script>
訪問對象方法
你可以使用以下語法創建對象方法:

methodName : function() { code lines }
你可以使用以下語法訪問對象方法:

objectName.methodName()
通常 fullName() 是作爲 person 對象的一個方法, fullName 是作爲一個屬性。

有多種方式可以創建,使用和修改 JavaScript 對象。

同樣也有多種方式用來創建,使用和修改屬性和方法。

JavaScript 函數

函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試實例</title>
<script>
function myFunction()
{
    alert("Hello World!");
}
</script>
</head>
 
<body>
<button onclick="myFunction()">點我</button>
</body>
</html>

調用帶參數的函數
在調用函數時,您可以向其傳遞值,這些值被稱爲參數。

這些參數可以在函數中使用。

可以發送任意多的參數,由逗號 (,) 分隔:

myFunction(argument1,argument2)

帶有返回值的函數

有時,我們會希望函數將值返回調用它的地方。

通過使用 return 語句就可以實現。

在使用 return 語句時,函數會停止執行,並返回指定的值。

function myFunction()
{
    var x=5;
    return x;
}
輸出myFunction()會輸出5

局部 JavaScript 變量

在 JavaScript 函數內部聲明的變量(使用 var)是局部變量,所以只能在函數內部訪問它。(該變量的作用域是局部的)。

您可以在不同的函數中使用名稱相同的局部變量,因爲只有聲明過該變量的函數才能識別出該變量。

只要函數運行完畢,本地變量就會被刪除。

全局 JavaScript 變量

在函數外聲明的變量是全局變量,網頁上的所有腳本和函數都能訪問它。

JavaScript 變量的生存期
JavaScript 變量的生命期從它們被聲明的時間開始。

局部變量會在函數運行以後被刪除。

全局變量會在頁面關閉後被刪除。

JavaScript 作用域

在 JavaScript 中, 對象和函數同樣也是變量。

在 JavaScript 中, 作用域爲可訪問變量,對象,函數的集合。

JavaScript 函數作用域: 作用域在函數內修改

JavaScript 變量生命週期

JavaScript 變量生命週期在它聲明時初始化。

局部變量在函數執行完畢後銷燬。

全局變量在頁面關閉後銷燬。

JavaScript 局部作用域

變量在函數內聲明,變量爲局部作用域。

局部變量:只能在函數內部訪問

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>局部變量在聲明的函數外不可以訪問。</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML = "carName 的類型是:" +  typeof carName;
function myFunction() 
{
    var carName = "Volvo";
}
</script>

</body>
</html>

因爲局部變量只作用於函數內,所以不同的函數可以使用相同名稱的變量。

局部變量在函數開始執行時創建,函數執行完後局部變量會自動銷燬。

JavaScript 全局變量

變量在函數外定義,即爲全局變量。

全局變量有 全局作用域: 網頁中所有腳本和函數均可使用

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>全局變量在任何腳本和函數內均可訪問。</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
myFunction();
function myFunction() 
{
    document.getElementById("demo").innerHTML =
		"我可以顯示 " + carName;
}
</script>

</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章