JS 語法之--對象類型（構造器，class，this），高階對象（高階類，Minix模式）

1、JS 對象類型

　　JavaScript 是一種基於原型（prototype）的面向對象語言，而不是基於類的面向對象語言

　　C++， Java 有類Class 和實例Instance 的概念，類是一類事物 的抽象，而實例則是類的實體。

　　JS是基於原型的語言，它只有原型對象的概念，原型對象就是一個模板，新的對象從這個模板構建從而獲取最初的屬性，任何對象在運行的時候可以動態的增加屬性，而且，任何一個對象都可以作為另一個對象的原型，這樣后者就可以共享前者的屬性。

2、定義類 

　　字面式聲明方式

　　　　

 　　　　這種方法也稱為 字面值創建對象。JS 1.2 開始支持

　　ES6之前--構造器

　　　　1、應以一個函數（構造器）對象，函數名首字母大寫

　　　　2、使用this 的定義屬性

　　　　3、使用new 和構造器創建一個新對象

 　　　測試：

// 定義類，構造器
function Point(x, y) {
    this.x = x;
    this.y = y;
    this.show = () => {console.log(this, this.x, this.y)}
    console.log('======================')
}

//繼承
function Point3D(a, b, z) {
    Point.call(this,a,b)
    this.z = z;
    console.log('print3d')
}

console.log(Point3D)
p2 = new Point3D(1,2,3)
console.log('******************')
console.log(p2)
console.log('******************')
p2.show()

 

 　　　　　　結果：

 

Info: Start process (19:52:17)
[Function: Point3D]
======================
print3d
******************
Point3D { x: 1, y: 2, show: [Function], z: 3 }
******************
Point3D { x: 1, y: 2, show: [Function], z: 3 } 1 2
Info: End process (19:52:17)

 

 

 

 

 　　　　new 構建一個新的通用對象，new操作符會將新對象的this 值傳遞給Point3D 構造器函數，函數為這個對象創建 z 屬性

 　　　　從上句話知道，new 后得到一個對象，使用這個對象的this 來調用構造器，那么如何執行‘基類’的構造方法

 　　　　使用Point3D 對象的this來執行Point 的構造器，所以使用call 方法，傳入子類的this

　　　　最終，構造完成后，將對象賦值給 p2

　　　　注意：如果不使用new 關鍵字，就是一個普通函數的函數調用，this不代表實例。

 　　

　　ES6 中的class

 　　　　從ES 6開始，新提供了class 關鍵字，使得創建對象更加簡單，清晰。

1. 1. 類定義使用了class 關鍵字，創建的本質上海市函數，是一個特殊的函數
   2. 一個類只能擁有一個名為constructor 的構造方法，如果沒有顯式的定義一個構造方法，則會添加一個默認的constructor 方法
   3. 繼承使用extends 關鍵字
   4. 一個構造器可以使用super 關鍵字來調用一個父類的構造函數
   5. 類沒有私有屬性。

 　　　　測試：

// 基類定義
class Point {
    constructor(x, y) /*構造器 */{
        this.name = x
        this.age = y
    }
    show() /* 方法 */ {
        console.log(this.name, this.age)
    }
}


let p1 = new Point('tom', 12)
p1.show()
console.log(p1) // 可以看到對象的屬性

//繼承
class Point3D extends Point {
    constructor (a,b,c) {
        console.log('---------------------------')
        super(a, b)
        this.password = c
    }
}

let p2 = new Point3D('jack',18,'123456')
p2.show()
console.log(p2)

 

 　　　　結果：

Info: Start process (20:11:33)
tom 12
Point { name: 'tom', age: 12 }
---------------------------
jack 18
Point3D { name: 'jack', age: 18, password: '123456' }
Info: End process (20:11:33)

 

 　　重寫方法：

 　　　　子類Point3D 的show方法，需要重寫

 　　　　

 　　　　子類中直接重寫父類的方法即可

　　　　如果需要使用父類的方法，使用super.method() 的方式調用

　　　　使用箭頭函數重寫上面的方法　　　

// 基類定義
class Point {
    constructor(x, y) /*構造器 */{
        this.name = x
        this.age = y
        // this.show =  function () {console.log(this.name, this.age)}
        this.show = () => console.log(this.name, this.age)
    }

}


let p1 = new Point('tom', 12)
console.log(p1.show())
console.log(p1) // 可以看到對象的屬性

//繼承
class Point3D extends Point {
    constructor (a,b,c) {
        console.log('---------------------------')
        super(a, b)
        this.password = c
        // this.show = function () {console.log(this, this.name, this.age, this.password)}
        this.show = () => console.log(this, this.name, this.age, this.password)
    }
}

let p2 = new Point3D('jack',18,'123456')
p2.show()
console.log(p2)

 

　　　　　　結果：從運行結果看，箭頭函數也支持子類的覆蓋

Info: Start process (20:24:52)
tom 12
undefined
Point { name: 'tom', age: 12, show: [Function] }
---------------------------
Point3D { name: 'jack', age: 18, show: [Function], password: '123456' } 'jack' 18 '123456'
Point3D { name: 'jack', age: 18, show: [Function], password: '123456' }
Info: End process (20:24:53)

 

　　　　測試：shou方法的調用次序

// 基類定義
class Point {
    constructor(x, y) /*構造器 */{
        this.name = x
        this.age = y
        // this.show =  function () {console.log(this.name, this.age)}
        // this.show = () => console.log(this.name, this.age,'===1')
    }
    show() {console.log(this.name, this.age,'===2')}


}

let p1 = new Point('tom', 12)
console.log(p1.show())
console.log(p1) // 可以看到對象的屬性

//繼承
class Point3D extends Point {
    constructor (a,b,c) {
        console.log('---------------------------')
        super(a, b)
        this.password = c
        // this.show = function () {console.log(this, this.name, this.age, this.password)}
        // this.show = () => console.log(this, this.name, this.age, this.password,'===3')
    }
    // show(){console.log(this, this.name, this.age, this.password,'===4')}

}

let p2 = new Point3D('jack',18,'123456')
p2.show()
console.log(p2)

 

　　　　通過測試，p2.show() 先調用自己類的對象 show，再 到父類的對象的show，在自己所屬類的show在到父類的show

 　　靜態屬性：

　　　　靜態屬性目前還沒有很好的支持

　　靜態方法；

　　　　在方法名前加上 static ，就是靜態方法　　　

class Add{
    constructor(x, y) {
        this.x = x;
        this.y =y;
    }
    static point() {
        console.log(this.x)
    }
}

add = new Add(20,40)
console.log(Add)
Add.point()
//add.point() 實例不能直接訪問驚天方法，java 和C++ 一樣
add.constructor.point();// 對象通過 constructor 訪問靜態方法

 

　　結果：

[Function: Add]
undefined
undefined

　　　　靜態方法中的this 是Add類， 不是Add的實例

　　　　注：靜態的概念不同於python的靜態

　　this 的坑

　　　　雖然JS 和C++ java 一樣有this，但是JS 的變現是不同的

　　　　原因在於c++ java 是靜態編譯語言，this是編譯期間綁定，而js 是動態，運行期綁定　　　

　　　　* 普通函數調用， this就是全局對象

　　　　測試

　　　　

　　　　前提：

　　　　　　函數執行的時候，會開啟新的執行上下文環境ExecutionContext

　　　　　　創建this 屬性，但是this 是什么 就要看函數怎么調用。

1. 1. myFunction（1,2,3）普通函數調用方式，this 指向全局對象 ，全局對象是node.js的global或者瀏覽器中的window
   2. myObject.myFunction(1,2,3) 對象方法的調用方式，this指向包含該方法的對象
   3. call 和apply 方法調用，要看第一個參數是誰

　　　　分析上例:

　　　　　　　　

　　　　解決方式 1：顯式傳入

　　　　　　

　　　　　　通過主動傳入對象，這樣就避開了 this 問題

　　　　解決方式2： ES3（ES-262第三版），引入了apply，call方法

　　　　　　

　　　　　　　　apply，call方法都是函數對象的方法，第一參數都是傳入對象引入的

　　　　　　　　

　　　　　　　　apply 傳其他參數需要使用數組

　　　　　　　　call 傳其他參數需要使用可變參數收集

　　　　　　　　

 　　　解決方式 3 ES5引入了bind方法　　　　　　　

　　　　　　

　　

　　　解決方式 4：ES6 支持this 箭頭函數

　　　　　　ES6 新技術，就不需要兼容this 問題

　　　　　　

　　　　　　ES6 新的定義方式如下；

　　　　　　　　

　　　　　　最常用的就是bind（）

7、高階對象，高階類，或稱為Mixin模式

　　Mixin模式。混合模式，這是一種不用繼承 就可以 復用的技術，主要還是為了解決多重繼承的問題，

　　多繼承的繼承路徑是個問題

　　JS 是基於對象，類，和對象都是對象模板

　　混合Mixin 指的是，將一個對象的全部或者部分拷貝到另一個對象上去，其實就是屬性了

　　可以將多個類或者對象混合成一個類或對象

　　繼承的實現：

　　　　先看一個繼承實現的例子：

　　　　　　

　　　　父類構造函數中，要求具有屬性 stringify 的序列化函數，如果沒有則拋出異常　　　　　　

class Serillization {
    constructor(){
        console.log('serialization constructor ------')
        if (typeof(this.stringify) !== 'function') {
            throw new ReferenceError('should define stringify')
        }
    }
}

class Point extends Serillization {
    constructor(x, y) {
        console.log('point constructor -------')
        super();// 繼承必須調用 super()
        this.x = x
        this.y = y
    }
    stringify() {
        return `<Point x=${this.x}, y=${this.y}>`
    }
}

class Point3D extends Point{
    constructor(x, y, z){
        super(x, y)
        this.z = z
    }
    stringify (){
        return `<Point x=${this.x}, y=${this.y}, z=${this.z}>`
    }
}

p = new Point(4,5)
console.log(p.stringify())
p3d = new Point3D(7,8,9)
console.log(p3d.stringify())

 

　　　　結果：　　

Info: Start process (21:53:17)
point constructor -------
serialization constructor ------
<Point x=4, y=5>
point constructor -------
serialization constructor ------
<Point x=7, y=8, z=9>
Info: End process (21:53:18)

 

 

　　　高階對象的實現：

　　　　　　將類的繼承構建成箭頭函數　　

// 普通的繼承
class A extends Object{}; // 大寫O
console.log(A)

// 匿名類
const A1 = class {
    constructor(x) {
        this.x = x
    }
}

console.log(A1)
console.log(new A1(100).x)

console.log('--------------------------------------------')

// 匿名類繼承
const B = class extends Object { // 這里返回的是一個類
    constructor(){
        super()
        console.log('B constructor')
    }
}
console.log(B)
b = new B()
console.log(b) // B {}     B 是？


console.log('--------------------------------------------')
const C = Sup => class extends Sup { // 這里返回的是一個函數
    constructor(){
        super()
        console.log('C constructor')
    }
}



cls = new C(Object) // 不可以new 因為返回的是一個普通函數


obj2 = new (C(Object))()

cls = C(Object) // 返回來，調用一次，才能用// 返回一個類 
obj = new cls()
console.log(obj)

// cls = C(A)
// console.log(cls)
// c = new cls()
// console.log(c)

// c1 = new (C(Object))()

 

 

 

　　　　改造上面序列化的例子：

　　　　　　　

const Serialication = Sup => class extends Sup{
    constructor(...args) {
        console.log('seroalization ------')
        super(...args)
        if (typeof(this.stringify) !== 'function') {
            throw new ReferenceError('should define stringify')
        }
    }
}

class Point {
    constructor(x, y) {
        console.log('point constructor -------')
        this.x = x
        this.y = y
    }
}

class Point3D extends Serialication(Point){
    constructor(x, y, z){
        super(x, y) // super 是 Serialication(Point) 包裝過的新類型
        this.z = z
    }
    stringify (){
        return `<Point x=${this.x}, y=${this.y}, z=${this.z}>`
    }
}

let p3d = new Point3D(70,80,90)
console.log(p3d.stringify())