// 类
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. Herança

Estende

Super herda atributos de classe pai

Método de extensão ou reescrita

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

Segundo, digite julgamento e instância de

Instanceof pode determinar o tipo de referência (relacionamento pai-filho)
O objeto pode ser considerado como a classe pai de todas as classes

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

Terceiro, o protótipo

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

1. Ilustração do protótipo:

Explicação: Haverá uma função ao definir Student, incluindo um protótipo de exibição apontando para Student.prototype, e coloque o método sayHi (). Após gerar um objeto xialuo pelo novo Student, o nome e o número de atributos de xialuo serão colocados diretamente no objeto , E Fang sayhi () refere-se à aquisição explícita de protótipo por meio de __proto__ (protótipo implícito)

2. Relação de protótipo:

Cada classe tem um protótipo explícito
Cada instância possui um protótipo implícito __proto__
O __proto__ da instância aponta para o protótipo da classe correspondente

3. Regras de execução baseadas em protótipo

Obtenha o atributo xialuo.name ao executar o método xialuo.sayHi ()

Primeiro, procure seus próprios atributos e métodos

Se não conseguir encontrá-lo, vá para __proto__ para encontrá-lo automaticamente

Quarto, a cadeia de protótipos

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

1. Ilustração do protótipo:

2. Veja a instância desta foto

Procure o protótipo implícito para ver se você pode encontrar o protótipo explícito.Se ele puder corresponder, a instância de

V. Aviso importante

Class é uma especificação gramatical ES6 emitida pelo comitê da ECMA
A ECMA estipula apenas as regras gramaticais, ou seja, as especificações de escrita do nosso código, não especifica como obter
As implementações acima são todas implementações de mecanismo V8, que também são comuns

Seis, a resposta para o problema

1. Como julgar se uma variável é uma matriz?

使用 uma instância de Array

2. Manuseando um jQuery simples, considerando plug-ins e escalabilidade?

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