前端學習(37)~js學習(十四):對象的創建
- 2020 年 3 月 18 日
- 筆記
創建自定義對象的幾種方法
方式一:對象字面量
對象的字面量就是一個{}。裡面的屬性和方法均是鍵值對:
- 鍵:相當於屬性名。
- 值:相當於屬性值,可以是任意類型的值(數字類型、字元串類型、布爾類型,函數類型等)。
例如:
var o = { name: "千古壹號", age: 26, isBoy: true, sayHi: function() { console.log(this.name); } }; console.log(o);
控制台輸出:

方式二:工廠模式
通過該方法可以大批量的創建對象。
/* * 使用工廠方法創建對象 * 通過該方法可以大批量的創建對象 */ function createPerson(name, age, gender) { //創建一個新的對象 var obj = new Object(); //向對象中添加屬性 obj.name = name; obj.age = age; obj.gender = gender; obj.sayName = function() { alert(this.name); }; //將新的對象返回 return obj; } var obj2 = createPerson("豬八戒", 28, "男"); var obj3 = createPerson("白骨精", 16, "女"); var obj4 = createPerson("蜘蛛精", 18, "女");
第一次看到這種工廠模式時,你可能會覺得陌生。如果簡化一下,可以寫成下面這種形式,更容易理解:(也就是,利用new Object創建對象)
var obj = new Obect(); obj.name = '豬八戒'; obj.age = 28; obj.gender = '男'; obj.sayHi = function() { alert('hello world'); };
弊端:
使用工廠方法創建的對象,使用的構造函數都是Object。所以創建的對象都是Object這個類型,就導致我們無法區分出多種不同類型的對象。
方式三:利用構造函數
//利用構造函數自定義對象 var stu1 = new Student("smyh"); console.log(stu1); stu1.sayHi(); var stu2 = new Student("vae"); console.log(stu2); stu2.sayHi(); // 創建一個構造函數 function Student(name) { this.name = name; //this指的是當前對象實例【重要】 this.sayHi = function () { console.log(this.name + "厲害了"); } }
列印結果:

接下來,我們專門來講一下構造函數。
構造函數
程式碼引入
// 創建一個構造函數,專門用來創建Person對象 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; this.sayName = function() { alert(this.name); }; } var per = new Person("孫悟空", 18, "男"); var per2 = new Person("玉兔精", 16, "女"); var per3 = new Person("奔波霸", 38, "男"); // 創建一個構造函數,專門用來創建 Dog 對象 function Dog() {} var dog = new Dog();
構造函數的概念
構造函數:是一種特殊的函數,主要用來創建和初始化對象,也就是為對象的成員變數賦初始值。它與 new
一起使用才有意義。
我們可以把對象中一些公共的屬性和方法抽取出來,然後封裝到這個構造函數裡面。
構造函數和普通函數的區別
構造函數的創建方式和普通函數沒有區別,不同的是構造函數習慣上首字母大寫。
構造函數和普通函數的區別就是調用方式的不同:普通函數是直接調用,而構造函數需要使用new關鍵字來調用。
this的指向也有所不同:
- 1.以函數的形式調用時,this永遠都是window。比如
fun();
相當於window.fun();
- 2.以方法的形式調用時,this是調用方法的那個對象
- 3.以構造函數的形式調用時,this是新創建的實例對象
new 一個構造函數的執行流程
new 在執行時,會做下面這四件事:
(1)開闢記憶體空間,在記憶體中創建一個新的空對象。
(2)讓 this 指向這個新的對象。
(3)執行構造函數裡面的程式碼,給這個新對象添加屬性和方法。
(4)返回這個新對象(所以構造函數裡面不需要return)。
因為this指的是new一個Object之後的對象實例。於是,下面這段程式碼:
// 創建一個函數 function createStudent(name) { var student = new Object(); student.name = name; //第一個name指的是student對象定義的變數。第二個name指的是createStudent函數的參數。二者不一樣 }
可以改進為:
// 創建一個函數 function Student(name) { this.name = name; //this指的是構造函數中的對象實例 }
注意上方程式碼中的注釋。
類、實例
使用同一個構造函數創建的對象,我們稱為一類對象,也將一個構造函數稱為一個類。
通過一個構造函數創建的對象,稱為該類的實例。
instanceof
使用 instanceof 可以檢查一個對象是否為一個類的實例。
語法如下:
對象 instanceof 構造函數
如果是,則返回true;否則返回false。
程式碼舉例:
function Person() {} function Dog() {} var person1 = new Person(); var dog1 = new Dog(); console.log(person1 instanceof Person); // 列印結果: true console.log(dog1 instanceof Person); // 列印結果:false console.log(dog1 instanceof Object); // 所有的對象都是Object的後代。因此,列印結果為:true
根據上方程式碼中的最後一行,需要補充一點:所有的對象都是Object的後代,因此 任何對象 instanceof Object
的返回結果都是true。
others
json的介紹
JSON:JavaScript Object Notation(JavaScript對象表示形式)。
JSON和對象字面量的區別:JSON的屬性必須用雙引號引號引起來,對象字面量可以省略。
json舉例:
{ "name" : "zs", "age" : 18, "sex" : true, "sayHi" : function() { console.log(this.name); } };
註:json里一般放常量、數組、對象等,但很少放function。
另外,對象和json沒有長度,json.length的列印結果是undefined。於是乎,自然也就不能用for循環遍歷(因為遍歷時需要獲取長度length)。json和對象都不能用for循環遍歷。實際都是for … in
json遍歷的方法:
json 採用 for...in...
進行遍歷,和數組的遍歷方式不同。如下:
<script> var myJson = { "name": "smyhvae", "aaa": 111, "bbb": 222 }; //json遍歷的方法:for...in... for (var key in myJson) { console.log(key); //獲取 鍵 console.log(myJson[key]); //獲取 值(第二種屬性綁定和獲取值的方法) console.log("------"); } </script>
列印結果:
