Javascript除了內置對象之外，還可以自定義對象，下面就將介紹JS創建對象的幾種方式以及怎麼動態添加對象的屬性和方法(函數)。關於一些常用內置對象也會在最後介紹。
JS創建對象方式
1.function創建對象的構造函數
- function除了創建普通函數，還能用於創建對象的構造函數。
//創建無參構造函數
function Person(){}
//創建有參構造函數
function Animal(type, weight){
this.type = type;
this.weight = weight;
}
//實例化對象，調用構造函數
var a = new Person();
var b = new Animal("老虎", "100kg");
//使用匿名函數形式創建構造函數
var c = new function(){
}- function創建構造函數和普通函數沒什麼兩樣，但如果不使用new操作符，使用的就是普通函數。而使用new 操作符調用構造函數，就會創建對象。
- 最後使用匿名函數形式創建構造函數，注意：這裏的是new function(){} ，而使用new Function(){}是使用Function對象，兩者不相同。
2.通過Object對象的構造函數
- 通過所有對象的頂級對象Object來創建對象，和Java一樣，對象都是唯一的。
var a = new Object();
var b = new Object();
console.log(a === b); //false3.使用字面量形式創建對象
//這裏創建的是空對象，還未賦予屬性和方法
var c = {};
var d = {};關於字面量形式：個人理解就是一種簡寫，在JS中一切都是對象，但總不能給變量簡單賦個值也用對象形式，太過麻煩。所以爲了簡單直觀，一些地方可以採用字面量形式來書寫，如下：
var str = new String("Hello, world");
var strs = "Hello, worlds"; //字面量形式
var num = new Number(110);
var nums = 111; //字面量形式
var arr = new Array(1,2,5,4,5);
var arrs = [1,2,5,4,5]; //字面量形式上面說完了怎麼去創建對象，但對象沒有屬性和方法(函數)，那有什麼用呢？接下來會說到給對象動態添加屬性和方法的幾種方式。
JS對象添加屬性和方法
添加方法和調用方法都使用點的形式，而對象存取屬性可以用如下兩種方式：
- objectName.property = value
- objectName[property] = value
- 兩者區別：點後面的屬性是作爲標識符，而[]中的屬性是作爲一個字符串。
實例
//創建構造函數
function Person() { }
var p = new Person(); //創建對象
//動態添加屬性
p.name = "AAA";
p.age = 15;
//添加函數
p.info = function () {
alert(p.name + "|" + p.age);
}
p.info(); //執行 //創建構造函數,給對象賦予屬性和方法
function Person(name, age) {
this.name = name;
this.age = age;
//使用匿名函數形式添加函數
this.info = function(){
alert(name + "|" + age);
}
}使用Object對象的實例
var a = new Object();
a.name = "青陽";
a.age = 26;
//a對象添加方法
a.info1 = infoFunc;
a.info2 = infoFunc2;
//.形式
function infoFunc(obj) {
console.log(this.name + "|" + this.age);
}
//[]形式
function infoFunc2() {
console.log("[]形式：" + this['name'] + "|" + this['age']);
}
a.info1();
a.info2();字面量形式對象添加屬性和方法與其他兩種不一樣，以key-value形式添加屬性和方法，這種創建對象形式也是最常用的JSON格式。
實例
var obj = {
name : "傲天",
age : "15",
info : function (){
alert(obj.name + "~~" + obj.age);
}
}
obj.info(); 上面關於JS創建對象的幾種方式，以及它們添加屬性和方法形式都已經簡單介紹完成。但是這些都是最簡單的創建對象方式，在JS中有多種創建對象的用法來處理不同的情況，這裏提供網上一張總結創建對象各種模式的表格，至於怎麼去實現，可以去百度一下JS創建對象模式，這類文章還是挺多的。
| 對象創建模式 | 代碼示意 | 優點 | 缺點 | 備註 |
|---|---|---|---|---|
| 對象字面量 | var o = {}; | 寫法簡單 |
如有多個對象類似, 冗餘代碼多 |
配置文件常用 |
| 工廠模式 |
function factory() { var o = {}; … return o; } var obj = factory(); |
封裝了創建對象的細節, 在創建多個相似對象時, 冗餘代碼少 |
對象的類型識別問題 | |
| 構造函數 |
function Person(name) { this.name = name; } var p1 = new Person(); |
解決了對象類型識別的問題, 更接近傳統OO |
相同的方法在每個實例上都有一份, 浪費資源 也可以當成普通函數調用, 此時this指向會亂掉 |
|
| 原型模式 |
function Person() {} Person.prototype = { say: function() {} }; |
避免了構造函數模式浪費資源的問題 |
由於共享的性質, 使用引用類型的屬性會出問題 |
原型的共享性, 動態性 |
| 構造函數和原型模式組合 |
function Person(name) { this.friends = []; } Person.prototype.say = function() {}; |
- | - | |
| 動態原型 |
function Person(name) { this.name = name; if (typeof this.say !== ‘function’) { this.say = function() {}; } } |
最接近傳統型OO語言 識別對象的類型 |
- | - |
| 寄生構造 |
function Person() { var o = new Object(); … return o; } var p1 = new Person(); |
- | 識別對象的類型 | |
| 穩妥構造函數 |
function Person(name) { var o = new Object(); o.say = function() { alert(name); }; return o; } var p1 = Person(‘name’); |
適用於一些安全環境 | 對象類型識別 |
JS用於對象的語句
for...in語句
- 用於遍歷數組或者遍歷對象的屬性。和Java的for-each語句差不多
格式：
for(變量 in 對象){
//執行代碼
}
實例
//以之前的對象爲例，遍歷屬性
for(props in obj){
document.write(props);
}
//獲取遍歷的對象屬性值
for(props in obj){
document.write(obj[props] + "\n"); //這裏只能用[]形式來獲取屬性值
}
//遍歷數組值
var arr = [4,3,2,35,1,4,36];
//i值是索引
for(i in arr){
document.write(arr[i] + " ");
}with語句
- 可以方便地引用特定對象，用於設置某些代碼在該特定對象中的作用域。
- 簡要說明：在with語句塊中，沒有爲屬性和方法指定對象時，則默認使用傳入的對象。
- 但with語句塊運行效率不高，所以能不使用，就不使用。
// //訪問對象屬性，無需對象名.屬性
with(obj){
console.log(name);
console.log(age);
console.log(info);
}
//字符串演示with語句
var str = "what is the use method for with?";
with(str){
console.log(indexOf(1));
console.log(toUpperCase());
console.log(replace("wh", "QQ"))
// 輸出結果：
// -1
// WHAT IS THE USE METHOD FOR WITH?
// QQat is the use method for with?
}
JS的常用內置對象總結
- Object對象： JS中所有對象都繼承自Object對象，提供了許多處理對象的方法。
- Function對象： 所有函數都是其實例。可以用它的構造函數來動態編譯一個函數。
- String對象： 處理所有的字符串操作。
- String對象： 處理所有的字符串操作 。
- Math對象： 處理所有的數學運算。
- Date對象： 處理日期和時間的存儲、轉化和表達。
- Array對象： 提供一個數組的模型、存儲大量有序的數據。
- RegExp對象： 表示正則表達式，它是對字符串執行模式匹配的強大工具。
- Event對象： 提供JavaScript事件的各種處理信息。