JS高階教程之JavaScript物件
宣告
該文部分程式碼和內容節選自菜鳥教程，僅用作個人學習，特此宣告
JavaScript物件
JavaScript 中的所有事物都是物件：字串、數值、陣列、函式...此外，JavaScript 允許自定義物件。
JavaScript 提供多個內建物件，比如 String、Date、Array 等等。 物件只是帶有屬性和方法的特殊資料型別。
- 布林型可以是一個物件。
- 數字型可以是一個物件。
- 字串也可以是一個物件
- 日期是一個物件
- 數學和正則表示式也是物件
- 陣列是一個物件
- 甚至函式也可以是物件
物件只是一種特殊的資料。物件擁有屬性和方法。
1、訪問物件的屬性
屬性是與物件相關的值。訪問物件屬性的語法是：
objectName.propertyName
比如下邊這個簡單的例子：使用 String 物件的 length 屬性來獲得字串的長度：
var message="Hello World!";
var x=message.length; //12
2、訪問物件的方法
方法是能夠在物件上執行的動作。通過以下語法來呼叫方法：
objectName.methodName()
比如下邊這個簡單的例子：使用 String 物件的 toUpperCase() 方法來將文字轉換為大寫：
var message="Hello world!"; var x=message.toUpperCase(); //HELLO WORLD!
3、建立 JavaScript 物件
建立新物件有兩種不同的方法：
- 使用 Object 定義並建立物件的例項。
- 使用函式來定義物件，然後建立新的物件例項。
3.1 使用 Object
在 JavaScript 中，幾乎所有的物件都是 Object 型別的例項，它們都會從 Object.prototype 繼承屬性和方法。
Object 建構函式建立一個物件包裝器。
Object 建構函式，會根據給定的引數建立物件，具體有以下情況：
- 如果給定值是 null 或 undefined，將會建立並返回一個空物件。
- 如果傳進去的是一個基本型別的值，則會構造其包裝型別的物件。
- 如果傳進去的是引用型別的值，仍然會返回這個值，經他們複製的變數保有和源物件相同的引用地址。
- 當以非建構函式形式被呼叫時，Object 的行為等同於 new Object()。
語法格式：
// 以建構函式形式來呼叫
new Object([value])
value 可以是任何值。
以下例項使用 Object 生成布林物件：
// 等價於 o = new Boolean(true);
var o = new Object(true);
比如下邊這個例項：用兩種方式建立了物件的一個新例項，並向其添加了四個屬性：
方式一：
person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
方式二：以使用物件字面量來建立物件，語法格式如下：
{ name1 : value1, name2 : value2,...nameN : valueN }
//比如說
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
其實就是大括號裡面建立 name:value 對，然後 name:value 對之間以逗號 , 隔開。
JavaScript 物件就是一個 name:value 集合。
練習例項
練習程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>物件的建立練習</title>
</head>
<body>
建立方式一:
<p id="demo1"></p>
建立方式二:
<p id="demo2"></p>
<script>
var person = new Object();
person.firstname = "Sam";
person.lastname = "Winchester";
person.age = 20;
person.eyecolor = "brown";
document.getElementById("demo1").innerHTML = (person.firstname + " is " + person.age + " years old, " + " he had "
+ person.eyecolor + " eyes. ")
people = {firstname:"Dean",lastname:"Winchester",age:26,eyecolor:"blue"}
document.getElementById("demo2").innerHTML = (people.firstname + " is " + people.age + " years old, " + " he had "
+ people.eyecolor + " eyes. ")
</script>
</body>
</html>
生成頁面效果
3.2 使用物件構造器
- 學習之前首先要清楚這一點：在JavaScript中， this ** 通常指向的是我們正在執行的函式本身，或者是指向該函式所屬的物件（執行時**）
直接上例子
練習程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用構造器建立物件練習</title>
</head>
<body>
<script>
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
//John is 50 years old.
</script>
</body>
</html>
4、建立物件例項
一旦有了物件構造器，就可以建立新的物件例項，就像這樣:
var myFather = new person("John","Doe",50,"blue");
var myMother = new person("Sally","Rally",48,"green");
5、新增物件屬性方法
5.1 新增屬性
可以通過為物件賦值，向已有物件新增新屬性：
例如： person 物件已存在，可以為其新增這些新屬性：firstname、lastname、age 以及 eyecolor：
person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";
x=person.firstname;//John
5.2 新增方法
方法只不過是附加在物件上的函式。
在構造器函式內部定義物件的方法：
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
changeName() 函式 name 的值賦給 person 的 lastname 屬性。
光說不練假把式，來個例子伺候
練習例項
練習程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方法新增練習</title>
</head>
<body>
<script>
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name){
this.lastname=name;
}
}
myMother = new person("Sally","Rally",48,"green");
myMother.changeName("Doe");
document.write(myMother.lastname);
</script>
</body>
</html>
6、遍歷屬性
JavaScript for...in 語句迴圈遍歷物件的屬性。
語法
for (variable in object)
{
執行的程式碼……
}
注意： for...in 迴圈中的程式碼塊將針對每個屬性執行一次。
例項：迴圈遍歷物件的屬性：
練習程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for...in 迴圈練習</title>
</head>
<body>
<p>點選下面的按鈕，迴圈遍歷物件 "person" 的所有屬性。</p>
<button onclick="myFunction()">點選這裡</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>
生成頁面效果
7、改變物件
有一個問題，如何改變物件？
物件是可變的，它們是通過引用來傳遞的。
那麼問題來了，什麼叫引用呢？
var x = person;這行程式碼不會建立 person 的副本，是引用
來個例項講解一下如何通過引用來傳遞改變物件
練習程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引用傳遞練習</title>
</head>
<body>
<p>JavaScript 物件是可變的。</p>
<p>拷貝的物件改變了，原始的也會跟著改變。</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
var x = person;
x.age = 10;
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
document.getElementById("demo").innerHTML =
person.firstName + " is " + x.age + " years old.";
</script>
</body>
</html>
生成頁面效果
很明顯，物件 person 和引用 x 的 age 屬性均被修改為10
補充知識
new 和不 new 的區別：
- 如果 new 了函式內的 this 會指向當前這個 person 並且就算函式內部不 return 也會返回一個物件。
- 如果不 new 的話函式內的 this 指向的是 window。
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
return [this.firstname,this.lastname,this.age,this.eyecolor,this]
}
var myFather = new person("John","Doe",50,"blue");
var myMother = person("Sally","Rally",48,"green");
console.log(myFather) // this 輸出一個 person 物件
console.log(myMother) // this 輸出 window 物件
如下圖所示：