// 类
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. Inheritance

Extends

Super inherits parent class attributes

Extension or rewriting method

// 父类
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()

Second, type judgment and instanceof

Instanceof can determine the reference type (parent-child relationship)
Object can be considered as the parent class of all classes

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

Third, the prototype

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

1. Prototype illustration:

Explanation: There will be a function when defining Student, including a display prototype pointing to Student.prototype, and put the method sayHi () into it. After generating an object xialuo by new Student, the attributes name and number of xialuo will be placed directly in the object , And Fang sayhi () refers to explicit prototype acquisition through __proto__ (implicit prototype)

2. Prototype relationship:

Each class has an explicit prototype prototype
Each instance has an implicit prototype __proto__
The __proto__ of the instance points to the prototype of the corresponding class

3. Prototype-based execution rules

Get attribute xialuo.name when executing method xialuo.sayHi ()

First look for its own attributes and methods

If you can't find it, go to __proto__ to find it automatically

Fourth, the prototype chain

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

1. Prototype illustration:

2. Look at the instanceof through this picture

Look up the implicit prototype to see if you can find the explicit prototype. If it can correspond, then instanceof holds

V. Important notice

Class is an ES6 grammar specification issued by the ECMA committee
ECMA only stipulates the grammatical rules, that is, the writing specifications of our code, does not specify how to achieve
The above implementations are all V8 engine implementations, which are also mainstream

Six, the answer to the problem

1. How to judge whether a variable is an array?

使用a instanceof Array

2. Handwriting a simple jQuery, considering plug-ins and scalability?

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) {
    }
}