javascript复习：原型和原型链

js是基于原型继承的语言

问题

• 如何准确判断一个变量是不是数组？
• 手写一个简易的jquery，考虑插件和扩展性？
• class的原型本质，怎么理解？

知识点

• class和继承
• 类型判断instanceof
• 原型和原型链

继承

class People {
    constructor(name) {
        this.name = name;
    }

    eat () {
        console.log(`${this.name} 在吃饭呢`);
    }
}


class Student extends People {
    constructor (name, number) {
        super(name);
        this.number = number;
    }

    sayHi() {
        console.log(`${this.name} 说了 hi`);
    }
}

class Teacher extends People {
    constructor(name, major) {
        super(name);
        this.major = major;
    }

    teach() {
        console.log(`${this.name} 教授 ${this.major} 课程`);
    }
}



let xialuo = new Student('夏洛', 89);
xialuo.sayHi();

注意：

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

原型链

问题解答：如何准确判断一个变量是不是数组

• arr instaceof Array

  问题解答：class的原型本质，怎么理解

• 原型和原型链的图示
• 属性和方法的执行规则

问题解答：手写一个简易的jquery，考虑插件和扩展性

class jQuery{
    constructor (selector) {
        let result = document.querySelectorAll(selector);
        let length = result.length;
        for (let i = 0; i < length; i++) {
            this[i] = result[i];
        }
        this.length = length;
        this.selector = selector;
    }

    each(fn) {
        for (let i = 0; i < this.length; i++) {
            fn(this[i], i)
        }
    }

    get(index) {
        return this[index];
    }

    on (type, fn) {
        return this.each((elem) => {
            window.addEventListener(type, fn, false);
        })
    }
}



const $p = new jQuery('p');
$p.each(elem => (console.log(elem)))
$p.on('click', elem => (console.log('click:', elem)))


// 插件
jQuery.prototype.dialog = function() {
    alert('jquery dialog');
}

// 扩展
class myJQuery extends jQuery{
    constructor(selector) {
        super(selector);
    }

    addClass() {

    }
    style() {

    }
}