1. 程式人生 > >JS 語法之--物件型別(構造器,class,this),高階物件(高階類,Minix模式)

JS 語法之--物件型別(構造器,class,this),高階物件(高階類,Minix模式)

1、JS 物件型別

  JavaScript 是一種基於原型(prototype)的面嚮物件語言,而不是基於類的面嚮物件語言

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

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

2、定義類 

  字面式宣告方式

    

     這種方法也稱為 字面值建立物件。JS 1.2 開始支援

  ES6之前--構造器

    1、應以一個函式(構造器)物件,函式名首字母大寫

    2、使用this 的定義屬性

    3、使用new 和構造器建立一個新物件

    測試:
 1 // 定義類,構造器
 2 function Point(x, y) {
 3     this.x = x;
 4     this.y = y;
 5     this.show = () => {console.log(this, this.x, this.y)}
 6     console.log('======================')
 7 }
 8 
 9 //
繼承 10 function Point3D(a, b, z) { 11 Point.call(this,a,b) 12 this.z = z; 13 console.log('print3d') 14 } 15 16 console.log(Point3D) 17 p2 = new Point3D(1,2,3) 18 console.log('******************') 19 console.log(p2) 20 console.log('******************') 21 p2.show()
 

 

       結果:

 

1 Info: Start process (19:52:17)
2 [Function: Point3D]
3 ======================
4 print3d
5 ******************
6 Point3D { x: 1, y: 2, show: [Function], z: 3 }
7 ******************
8 Point3D { x: 1, y: 2, show: [Function], z: 3 } 1 2
9 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. 類定義使用了class 關鍵字,建立的本質上海市函式,是一個特殊的函式
    2. 一個類只能擁有一個名為constructor 的構造方法,如果沒有顯式的定義一個構造方法,則會新增一個預設的constructor 方法
    3. 繼承使用extends 關鍵字
    4. 一個構造器可以使用super 關鍵字來呼叫一個父類的建構函式
    5. 類沒有私有屬性。

     測試:

 1 // 基類定義
 2 class Point {
 3     constructor(x, y) /*構造器 */{
 4         this.name = x
 5         this.age = y
 6     }
 7     show() /* 方法 */ {
 8         console.log(this.name, this.age)
 9     }
10 }
11 
12 
13 let p1 = new Point('tom', 12)
14 p1.show()
15 console.log(p1) // 可以看到物件的屬性
16 
17 //繼承
18 class Point3D extends Point {
19     constructor (a,b,c) {
20         console.log('---------------------------')
21         super(a, b)
22         this.password = c
23     }
24 }
25 
26 let p2 = new Point3D('jack',18,'123456')
27 p2.show()
28 console.log(p2)

 

     結果

1 Info: Start process (20:11:33)
2 tom 12
3 Point { name: 'tom', age: 12 }
4 ---------------------------
5 jack 18
6 Point3D { name: 'jack', age: 18, password: '123456' }
7 Info: End process (20:11:33)

 

   重寫方法:

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

     

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

    如果需要使用父類的方法,使用super.method() 的方式呼叫

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

 1 // 基類定義
 2 class Point {
 3     constructor(x, y) /*構造器 */{
 4         this.name = x
 5         this.age = y
 6         // this.show =  function () {console.log(this.name, this.age)}
 7         this.show = () => console.log(this.name, this.age)
 8     }
 9 
10 }
11 
12 
13 let p1 = new Point('tom', 12)
14 console.log(p1.show())
15 console.log(p1) // 可以看到物件的屬性
16 
17 //繼承
18 class Point3D extends Point {
19     constructor (a,b,c) {
20         console.log('---------------------------')
21         super(a, b)
22         this.password = c
23         // this.show = function () {console.log(this, this.name, this.age, this.password)}
24         this.show = () => console.log(this, this.name, this.age, this.password)
25     }
26 }
27 
28 let p2 = new Point3D('jack',18,'123456')
29 p2.show()
30 console.log(p2)

 

      結果:從執行結果看,箭頭函式也支援子類的覆蓋

1 Info: Start process (20:24:52)
2 tom 12
3 undefined
4 Point { name: 'tom', age: 12, show: [Function] }
5 ---------------------------
6 Point3D { name: 'jack', age: 18, show: [Function], password: '123456' } 'jack' 18 '123456'
7 Point3D { name: 'jack', age: 18, show: [Function], password: '123456' }
8 Info: End process (20:24:53)

 

    測試:shou方法的呼叫次序

 1 // 基類定義
 2 class Point {
 3     constructor(x, y) /*構造器 */{
 4         this.name = x
 5         this.age = y
 6         // this.show =  function () {console.log(this.name, this.age)}
 7         // this.show = () => console.log(this.name, this.age,'===1')
 8     }
 9     show() {console.log(this.name, this.age,'===2')}
10 
11 
12 }
13 
14 let p1 = new Point('tom', 12)
15 console.log(p1.show())
16 console.log(p1) // 可以看到物件的屬性
17 
18 //繼承
19 class Point3D extends Point {
20     constructor (a,b,c) {
21         console.log('---------------------------')
22         super(a, b)
23         this.password = c
24         // this.show = function () {console.log(this, this.name, this.age, this.password)}
25         // this.show = () => console.log(this, this.name, this.age, this.password,'===3')
26     }
27     // show(){console.log(this, this.name, this.age, this.password,'===4')}
28 
29 }
30 
31 let p2 = new Point3D('jack',18,'123456')
32 p2.show()
33 console.log(p2)

 

    通過測試,p2.show() 先呼叫自己類的物件 show,再 到父類的物件的show,在自己所屬類的show在到父類的show

   靜態屬性:

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

  靜態方法;

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

 1 class Add{
 2     constructor(x, y) {
 3         this.x = x;
 4         this.y =y;
 5     }
 6     static point() {
 7         console.log(this.x)
 8     }
 9 }
10 
11 add = new Add(20,40)
12 console.log(Add)
13 Add.point()
14 //add.point() 例項不能直接訪問驚天方法,java 和C++ 一樣
15 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. 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 的序列化函式,如果沒有則丟擲異常      

 1 class Serillization {
 2     constructor(){
 3         console.log('serialization constructor ------')
 4         if (typeof(this.stringify) !== 'function') {
 5             throw new ReferenceError('should define stringify')
 6         }
 7     }
 8 }
 9 
10 class Point extends Serillization {
11     constructor(x, y) {
12         console.log('point constructor -------')
13         super();// 繼承必須呼叫 super()
14         this.x = x
15         this.y = y
16     }
17     stringify() {
18         return `<Point x=${this.x}, y=${this.y}>`
19     }
20 }
21 
22 class Point3D extends Point{
23     constructor(x, y, z){
24         super(x, y)
25         this.z = z
26     }
27     stringify (){
28         return `<Point x=${this.x}, y=${this.y}, z=${this.z}>`
29     }
30 }
31 
32 p = new Point(4,5)
33 console.log(p.stringify())
34 p3d = new Point3D(7,8,9)
35 console.log(p3d.stringify())

 

    結果:  

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

 

 

   高階物件的實現:

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

 1 // 普通的繼承
 2 class A extends Object{}; // 大寫O
 3 console.log(A)
 4 
 5 // 匿名類
 6 const A1 = class {
 7     constructor(x) {
 8         this.x = x
 9     }
10 }
11 
12 console.log(A1)
13 console.log(new A1(100).x)
14 
15 console.log('--------------------------------------------')
16 
17 // 匿名類繼承
18 const B = class extends Object { // 這裡返回的是一個類
19     constructor(){
20         super()
21         console.log('B constructor')
22     }
23 }
24 console.log(B)
25 b = new B()
26 console.log(b) // B {}     B 是?
27 
28 
29 console.log('--------------------------------------------')
30 const C = Sup => class extends Sup { // 這裡返回的是一個函式
31     constructor(){
32         super()
33         console.log('C constructor')
34     }
35 }
36 
37 
38 
39 cls = new C(Object) // 不可以new 因為返回的是一個普通函式
40 
41 
42 obj2 = new (C(Object))()
43 
44 cls = C(Object) // 返回來,呼叫一次,才能用// 返回一個類 
45 obj = new cls()
46 console.log(obj)
47 
48 // cls = C(A)
49 // console.log(cls)
50 // c = new cls()
51 // console.log(c)
52 
53 // c1 = new (C(Object))()

 

 

 

    改造上面序列化的例子:

       

 1 const Serialication = Sup => class extends Sup{
 2     constructor(...args) {
 3         console.log('seroalization ------')
 4         super(...args)
 5         if (typeof(this.stringify) !== 'function') {
 6             throw new ReferenceError('should define stringify')
 7         }
 8     }
 9 }
10 
11 class Point {
12     constructor(x, y) {
13         console.log('point constructor -------')
14         this.x = x
15         this.y = y
16     }
17 }
18 
19 class Point3D extends Serialication(Point){
20     constructor(x, y, z){
21         super(x, y) // super 是 Serialication(Point) 包裝過的新型別
22         this.z = z
23     }
24     stringify (){
25         return `<Point x=${this.x}, y=${this.y}, z=${this.z}>`
26     }
27 }
28 
29 let p3d = new Point3D(70,80,90)
30 console.log(p3d.stringify())
程式碼