原型和原型链基础

题目

如何准确判断一个变量是不是数组？
a instanceof Array
手写一个简易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'))

class的原型本质，怎么理解？
原型和原型链的图示
属性和方法的执行规则

知识点

class和继承

constructor

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

    // }
}

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

继承

extends
super
扩展或重写方法

// 父类
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.__prototype__.sayHi.call(xialuo)
xialuo.eat()

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

类型判断instanceof

[] instanceof Array //true
[] instanceof Object //true

{} instanceof Object //true

Object可以认为是所有class的父类

原型和原型链

//class实际上是函数，可见是语法糖
typeof People //'function'
typeof Student //'function'

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

每个class都有显示原型prototype
每个实例都有__proto__指向对应 class 的 prototype

基于原型的执行规则

获取属性xialuo.name 或执行方法 xialuo.sayhi() 时
先在自身属性和方法寻找
如果找不到则自动去__proto__中查找

一层一层的。

重要提示

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