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())