// 类
class Student {
    constructor(name, number) {
        this.name = name
        this.number = number
        // this.gender = 'male'
    }
    sayHi() {
        console.log(
            `姓名 ${this.name} ，学号 ${this.number}`  // 模板字符串
        )
        // console.log('姓名 ' + this.name + ' ，学号 ' + this.number)
    }
  }
}

// 通过类 new 对象/实例
const xialuo = new Student('夏洛', 100)
console.log(xialuo.name)
console.log(xialuo.number)
xialuo.sayHi()

const madongmei = new Student('马冬梅', 101)
console.log(madongmei.name)
console.log(madongmei.number)
madongmei.sayHi()

2.継承

伸びる

スーパーは親クラスの属性を継承します

拡張または書き換え方法

// 父类
class People {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`${this.name} eat something`)
    }
}

// 子类
class Student extends People {
    constructor(name, number) {
        super(name)
        this.number = number
    }
    sayHi() {
        console.log(`姓名 ${this.name} 学号 ${this.number}`)
    }
}

// 子类
class Teacher extends People {
    constructor(name, major) {
        super(name)
        this.major = major
    }
    teach() {
        console.log(`${this.name} 教授 ${this.major}`)
    }
}

// 实例
const xialuo = new Student('夏洛', 100)
console.log(xialuo.name)
console.log(xialuo.number)
xialuo.sayHi()
xialuo.eat()

// 实例
const wanglaoshi = new Teacher('王老师', '语文')
console.log(wanglaoshi.name)
console.log(wanglaoshi.major)
wanglaoshi.teach()
wanglaoshi.eat()

第二に、タイプの判断とインスタンスの

Instanceofは参照タイプ（親子関係）を決定できます
オブジェクトはすべてのクラスの親クラスと見なすことができます

Xialuo instanceof Student //true
Xialuo instanceof Object //true
[] instanceof Array //true
[] instanceof Object //true
{} instanceof Object //true

第三に、プロトタイプ

// class实际上是函数
typeof People  // ‘function’
typeof Student  // ‘function’
// 隐式原型和显示原型
console.log( xialuo.__proto__ )   // 隐式原型
console.log( Student.prototype )    // 显式原型
console.log( xialuo.__proto__ ===  Student.prototype )

1.プロトタイプのイラスト：

説明： Studentを定義するときに、Student.prototypeを指す表示プロトタイプを含む関数があり、それにsayHi（）メソッドを挿入します。新しいStudentによってオブジェクトxialuoを生成した後、属性名とxialuoの数はオブジェクトに直接配置されます、そしてFang sayhi（）は__proto__（暗黙的なプロトタイプ）による明示的なプロトタイプ取得を指します

2.プロトタイプ関係：

各クラスには明示的なプロトタイププロトタイプがあります
各インスタンスには暗黙のプロトタイプ__proto__があります
インスタンスの__proto__は、対応するクラスのプロトタイプを指します

3.プロトタイプベースの実行ルール

メソッドxialuo.sayHiを実行するときに属性xialuo.nameを取得します（）

最初に独自の属性とメソッドを探す

見つからない場合は、__ proto__に移動して自動的に検索してください

第四に、プロトタイプチェーン

console.log( Student.prototype.__proto__ )   // 隐式原型
console.log( People.prototype )    // 显式原型
console.log( Student.prototype.__proto__ === People.prototype )

1.プロトタイプのイラスト：

2.この写真からinstanceofを確認します

暗黙的なプロトタイプを調べて、明示的なプロトタイプが見つかるかどうかを確認します。対応できる場合は、instanceofが保持されます。

V.重要なお知らせ

クラスは、ECMA委員会によって発行されたES6文法仕様です
ECMAは文法規則のみを規定しています。つまり、コードの記述仕様は達成方法を指定していません。
上記の実装はすべてV8エンジンの実装であり、主流でもあります。

6、問題への答え

1.変数が配列かどうかを判断する方法は？

instanceof配列を使用する

2.プラグインとスケーラビリティを考慮して、単純なjQueryを手書きしますか？

class jQuery {
    constructor(selector) {
        const result = document.querySelectorAll(selector)
        const length = result.length
        for (let i = 0; i < length; i++) {
            this[i] = result[i]
        }
        this.length = length
        this.selector = selector
    }
    get(index) {
        return this[index]
    }
    each(fn) {
        for (let i = 0; i < this.length; i++) {
            const elem = this[i]
            fn(elem)
        }
    }
    on(type, fn) {
        return this.each(elem => {
            elem.addEventListener(type, fn, false)
        })
    }
    // 扩展很多 DOM API
}

// 插件
jQuery.prototype.dialog = function (info) {
    alert(info)
}

// 扩展 “造轮子”
class myJQuery extends jQuery {
    constructor(selector) {
        super(selector)
    }
    // 扩展自己的方法
    addClass(className) {
    }
    style(data) {
    }
}