JS之原型和原型链

首先，我们这里创建一组类如下：

// 父类
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)        // 100
xialuo.sayHi()					  // 姓名：夏洛 学号：100
xialuo.eat()                      // 夏洛 eat something

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

类型判断：instanceof

xialuo instanceof Student  // true
xialuo instanceof People   // true
xialuo instanceof Object   // true

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

原型

// class 实际上是函数， 可见是语法糖(用function实现，写法是class写法)
typeof People   // 'function'
typeof Student  // 'function'

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

重要提示

• class 是 ES6语法规范，由ECMA委员发布
• ECMA只规定语法规范，即我们代码的书写规范，不规定如何实现
• 以上实现方式都是V8引擎的实现方式，也是主流的

小结

1. 我们需要牢记两点：
   ①__proto__和constructor属性是对象所独有的；
   ② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。
2. __proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，再往上找就相当于在null上取值，会报错。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。
3. prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法，即f1.__proto__ === Foo.prototype。
4. constructor属性的含义就是指向该对象的构造函数，所有函数（此时看成对象了）最终的构造函数都指向Function。

详情请看这篇博客：
https://blog.csdn.net/cc18868876837/article/details/81211729

手写简易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) {
        
    }
}

// const $p = new jQuery('p')
// $p.get(1)
// $p.each((elem) => console.log(elem.nodeName))
// $p.on('click', () => alert('clicked'))