本系列將從以下專題去總結：
1. JS基礎知識深入總結
2. 物件高階
3. 函式高階
4. 事件物件與事件機制
暫時會對以上四個專題去總結，現在開始Part2：物件高階。下圖是我這篇的大綱。
2.1 物件的建立模式
-
方式一：Object建構函式模式
- 套路: 先建立空Object物件, 再動態新增屬性/方法
- 適用場景: 起始時不確定物件內部資料
- 問題: 語句太多
// 先建立空Object物件 var p = new Object() p = {} //此時內部資料是不確定的 // 再動態新增屬性/方法 p.name = 'Tom' p.age = 12 p.setName = function (name) { this.name = name } //測試 console.log(p.name, p.age) //Tom 12 p.setName('Bob') console.log(p.name, p.age) //Bob 12 複製程式碼 -
方式二：物件字面量模式
- 套路: 使用
{}建立物件, 同時指定屬性/方法 - 適用場景: 起始時物件內部資料是確定的
- 問題: 如果建立多個物件, 有重複程式碼
var p = { name: 'Tom', age: 12, setName: function (name) { this.name = name } } //測試 console.log(p.name, p.age) //Tom 12 p.setName('JACK') console.log(p.name, p.age) //JACK 12 var p2 = { //如果建立多個物件程式碼很重複 name: 'Bob', age: 13, setName: function (name) { this.name = name } } 複製程式碼 - 套路: 使用
-
方式三：工廠模式（相對使用很少）
- 套路: 通過工廠函式動態建立物件並返回
- 適用場景: 需要建立多個物件
- 問題: 物件沒有一個具體的型別, 都是Object型別
function createPerson(name, age) { //返回一個物件的函式一般稱為===>工廠函式 var obj = { name: name, age: age, setName: function (name) { this.name = name } } return obj } // 建立2個人 var p1 = createPerson('Tom', 12) var p2 = createPerson('Bob', 13) // p1和p2是Object型別 function createStudent(name, price) { var obj = { name: name, price: price } return obj } var s = createStudent('張三', 12000) // s也是Object 複製程式碼 -
方式四：自定義建構函式模式
- 套路: 自定義建構函式, 通過new建立物件
- 適用場景: 需要建立多個型別確定的物件
- 問題: 每個物件都有相同的資料, 浪費記憶體。主要是指方法資料的重複，導致浪費。
//定義型別，Person型別 function Person(name, age) { this.name = name this.age = age this.setName = function (name) { this.name = name } } var p1 = new Person('Tom', 12) p1.setName('Jack') console.log(p1.name, p1.age) //Jack 12 console.log(p1 instanceof Person) //true function Student (name, price) { this.name = name this.price = price } var s = new Student('Bob', 13000) console.log(s instanceof Student) //true var p2 = new Person('JACK', 23) console.log(p1, p2) //都返回Person型別物件 複製程式碼 -
方式五： 建構函式+原型的組合模式
- 套路: 自定義建構函式, 屬性在函式中初始化, 方法新增到原型上
- 適用場景: 需要建立多個型別確定的物件
function Person(name, age) { //在建構函式中只初始化屬性 this.name = name this.age = age } //方法放在原型物件裡，就不會重複了。減少記憶體壓力。 Person.prototype.setName = function (name) { this.name = name } var p1 = new Person('Tom', 23) var p2 = new Person('Jack', 24) console.log(p1, p2) //都返回一個Person型別物件 複製程式碼
2.2 物件的繼承模式
2.2.1 方式一：原型鏈繼承
- 套路
- 定義父型別建構函式
- 給父型別的原型新增方法
- 定義子型別的建構函式
- 建立父型別的物件賦值給子型別的原型
- 將子型別原型的構造屬性設定為子型別
- 給子型別原型新增方法
- 建立子型別的物件: 可以呼叫父型別的方法
- 關鍵
- 子型別的原型為父型別的一個例項物件
大致的程式步驟思想：
function Parent(){}//父 建構函式
Parent.prototype.test = function(){};//在父的原型物件上新增test方法
function Child(){}// 子 建構函式
Child.prototype = new Parent(); // 子型別的原型指向父型別例項
Child.prototype.constructor = Child;//最好也把constructor也重新置給Child建構函式
var child = new Child(); //有test()
複製程式碼 //父型別
function Supper() {
this.supProp = 'Supper property'
}
Supper.prototype.showSupperProp = function () {
console.log(this.supProp)
}
//子型別
function Sub() {
this.subProp = 'Sub property'
}
// 子型別的原型為父型別的一個例項物件
Sub.prototype = new Supper()
// 讓子型別的原型的constructor指向子型別（建構函式）
Sub.prototype.constructor = Sub
Sub.prototype.showSubProp = function () {
console.log(this.subProp)
}
var sub = new Sub()
sub.showSupperProp() //Supper property
sub.showSubProp() //Sub property
console.log(sub) // 返回Sub型別物件
複製程式碼案例圖解：
2.2.2 方式2: 借用建構函式繼承(假的)
- 套路:
- 定義父型別建構函式
- 定義子型別建構函式
- 在子型別建構函式中呼叫父型別構造
- 關鍵:
- 在子型別建構函式中通用call()呼叫父型別建構函式
給個案例分析：
function Person(name, age) {
this.name = name
this.age = age
}
function Student(name, age, price) {
//為了獲得父型別的Person的屬性繼承
Person.call(this, name, age) // 借調。相當於: this.Person(name, age)
/*this.name = name
this.age = age
以上這兩行程式碼就可不必寫了
*/
this.price = price
}
var s = new Student('Tom', 20, 14000)
console.log(s.name, s.age, s.price) //Tom 20 14000
複製程式碼2.2.3 方式3: 原型鏈+借用建構函式的組合繼承（一般都這麼用）
- 利用原型鏈實現對父型別物件的方法繼承（繼承方法）
- 利用super()借用父型別構建函式初始化相同屬性（繼承屬性）
給個案例分析：
//類似於父函式
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.setName = function (name) {
this.name = name
}
//類似於子函式
function Student(name, age, price) {
Person.call(this, name, age) // 為了得到屬性(屬性的繼承)
this.price = price
}
Student.prototype = new Person() // 為了能看到父型別的方法（方法的繼承--通過原型鏈）
Student.prototype.constructor = Student //修正constructor屬性
Student.prototype.setPrice = function (price) {
this.price = price
}
var s = new Student('Tom', 24, 15000)
s.setName('Bob');
s.setPrice(16000);
console.log(s.name, s.age, s.price) //Bob 24 16000
複製程式碼2.2.4 方式四：ES6的class的繼承
在ES6中引入了class關鍵字，但更多的是一種語法糖，本質上還是寄生組合繼承的繼承方式。是一種相對完美的繼承方式。
寄生組合繼承的核心總結以下幾點：（邊看圖邊看文字理解）
1.子類建構函式的 __proto__指向父類構造器，繼承父類的靜態方法
2.子類建構函式的 prototype的 __proto__指向父類構造器的 prototype，繼承父類的方法。
[ 1和2這兩點也就是下圖橙色標記的兩條線。]
3.子類建構函式繼承了父類建構函式裡的屬性。使用 super呼叫的( ES5則用 call或者 apply呼叫傳參)。
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
run(speed) {
this.speed += speed;
alert(`${this.name} runs with speed ${this.speed}.`);
}
stop() {
this.speed = 0;
alert(`${this.name} stopped.`);
}
}
// Inherit from Animal
class Rabbit extends Animal {
hide() {
alert(`${this.name} hides!`);
}
}
let rabbit = new Rabbit("White Rabbit");
rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!
複製程式碼如你所見，如你所想，extend 關鍵字實際上是在 Rabbit.prototype 新增[[proto]]，引用到 Animal.prototype。
rabbit 既可以訪問它自己的方法，也可以訪問 Animal 的方法。
2.3 new物件
看我們嚐嚐寫的一個例子：
function Person() {
this.name = name
this.age = age
}
var person = new Person()
複製程式碼事實上，new一個物件做了什麼呢？完整執行的程式碼：
function Person() {
var this = {
__proto__: Person.prototype
}
this.name = name
this.age = age
return this
}
var person = new Person()
複製程式碼故new一個物件做了以下幾步：
- 建立一個空物件
- 給物件設定
__proto__， 值為建構函式物件的prototype屬性值this.__proto__ = Fn.prototype - 執行建構函式體(給物件新增屬性/方法)
- 隱式
return this，返回新物件
注：如果建構函式沒有顯式返回一個物件型別Object（包含FunctionArrayDateRegExgError），則預設隱式return this（this指代剛new出來的物件例項）。一般情況下，建構函式不返回值，但是使用者可以選擇主動返回一個物件，這個物件就會覆蓋預設返回的this例項）。
當然建構函式還是可以返回值型別的（NumberStringBoolean等），這個時候還是返回預設的this！只有返回物件型別，才會覆蓋原先的this！
此文件為呂涯原創，可任意轉載，但請保留原連結，標明出處。
文章只在CSDN和掘金第一時間釋出：
CSDN主頁：https://blog.csdn.net/LY_code
掘金主頁：https://juejin.im/user/5b220d93e51d4558e03cb948
若有錯誤，及時提出，一起學習，共同進步。謝謝。 ???