JS - 面向物件
阿新 • • 發佈：2018-11-12
目錄
1、屬性與方法（增刪改查）
注意：
- 屬性的建立有兩種方式，但是想要支援 “-” 語法 必須使用 [“”]
例如：abc-123 必須使用 [“abc-123”] 進行創造和訪問。- 出現的訪問有兩種方式，除非存在 -，可以互相任意使用
例如：obj.a = 123 ===>>> obj.a 、obj["a"]//建立物件的兩種方式 var obj = {}; var obj = new Object(); //物件的屬性,兩種方式 obj.prop = ""; obj["age-0"] = 15 // 物件的方法 obj.func = function () {……} // 物件屬性和方法的訪問方式 obj.prop obj.func() obj["age-0"] // 物件屬性和方法的修改 obj.prop = "new" // 屬性與方法刪除 delete obj.prop delete obj.func<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>面向物件初始</title> </head> <body> </body> <script type="text/javascript"> // 建立一個空物件 var obj = {} // 對空物件進行新增屬性 obj.name = "大毛";21 obj["age"] = 18; // 列印物件 console.log(obj); // 使用屬性 console.log(obj["name"]); console.log(obj.age); console.log(obj["age"]); // 對物件新增方法 obj.eat = function () { console.log("吃吃吃!!!"); } // 方法的使用 obj.eat(); // 屬性|方法的移除 delete obj.name console.log(obj); </script> </html>
2、類字典:不存在字典的概念，卻模擬字典的實現
總結:
- key全為字串形式,存在兩種書寫方式, name || “name”
- 當key為js識別符號不支援的語法情況下,必須新增引號。例如：字串中存在 -，“abc-123”
- value可以為任意型別
- 值存在兩種訪問方式：字典名.key || 字典名["key"] ； 注意“.”的使用
- 可以隨意新增 key：value的鍵值對 完成增刪改查
//dict.name | dict["my-name"] | dict.fn() var dict = { key1: "value1", key2: 18, "my-key3": [1, 2, 3, 4, 5] } var dict_1 = { "my-name": "zero", fn: function () {}, fun () {} } // 增 dict.key4 = true; console.log(dict); // 刪 delete dict.key4; console.log(dict); // 改 dict["my-key3"] = [5, 4, 3, 2, 1]; console.log(dict); // 查 console.log(dict.key1); console.log(dict["key1"]);
3、建構函式（ES5）：實現多個相似類的創造
注意：
- 建構函式，命名通常採用首字母大寫的大駝峰寫法
- 內部構建屬性和方法的時候，使用this關鍵詞
- 建構函式可以建立多個例項物件，但通過{}普通構造出來的物件是唯一的。例如： var obj = {}
//建立建構函式 function People(name, age) { this.name = name; this.age = age; this.eat = function () { return 'eat'; } } //建立例項 var p1 = new People("zero"); var p2 = new People("seven"); //呼叫例項內屬性和方法 console.log(p1.name) console.log(p2.age) p1.eat() //檢視例項物件 console.log(p1); console.log(p1);
4、繼承（ES5）（存在知識點模糊？？？）
- 組合繼承（構造繼承屬性，原型繼承方法）
注意：
- 必須存在兩個建構函式才可以完成繼承。
- 繼承是屬性和方法的複用
- 建立子類例項時，可以向父類建構函式傳參
- call方法用來完成屬性的繼承
（繼承過程中，子類呼叫call方法，傳入父類的this和子類傳入的引數）- prototype原型用於繼承方法
// 父級 function Sup(name) { this.name = name; this.fn = function () { console.log('fn class'); } } // 子級 function Sub(name) { // 繼承屬性 Sup.call(this, name); } // 繼承方法 Sub.prototype = new Sup; // 建立子級物件 var sub = new Sub("subClass"); // 使用屬性 console.log(sub.name); // 使用方法 sub.fn(); // 指向自身建構函式 Sub.prototype.constructor = Sub;
5、類及繼承（ES6）
注意：
- 構造器 constructor
- 子類通過 子類名 extends 父類名{} 進行繼承操作
class Person { // 構造器:建立物件完成初始化操作 constructor (name, age) { this.name = name; this.age = age; } // 例項方法:只能由物件呼叫 eat () { console.log(this.name + '吃吃吃'); } // 類方法:只能由類呼叫 static create () { console.log('誕生'); } } let p1 = new Person('zero', 8); let p2 = new Person('seven', 58); console.log(p1.age); p2.eat(); // Person.eat(); Person.create(); // p2.create(); // 繼承 class Student extends Person { constructor (name, age, sex) { // super指向父級 super(name, age); this.sex = sex; } } let s1 = new Student("張三", 18, "男"); // 屬性的繼承 console.log(s1.name, s1.age, s1.sex); console.log(); // 方法的繼承 s1.eat(); // 繼承為全繼承 Student.create();