原型和原型链

class

constructor
属性
方法
实例调用
继承
- extends 子类继承父类
- super
- 扩展或重写方法

//父类
class People{
    constructor(name,gender){
         this.name = name
         this.gender = male
    }
    eat(){
        console.log(`${this.name} eat something`)
    }
}

//子类
//这里表示子类Student继承父类People
class Stuendt extends People{
    
    //这里就是属性
    //这里要继承父类的属性也要写的
    constructor(number,name,gender){
        this.unmber = number
        //这里是通过super获得父类中的属性，通过super调用父类中的属性，父类中属性变化一样可以继承过来
        super(name)
        super(gender)
    }
    //这里就是方法，可以创建任意的方法
    sayHi(){
        console.log(`姓名${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()
//我们还可以使用父类中的方法
xialuo.eat()

//通过方法就可以创建无数的实例
const madonghmei = new Student('马冬梅'，101)
console.log(madonghmei.name)
console.log(madonghmei.number)
madonghmei.sayHi()

//子类
class Teacher extends People{
    constructor(name,major){
        super(name)
        this.major = major
    }
    teach(){
        console.log(`${this.name}教授${this.major}`)
    }
}

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

类可以定义属性，方法通过实例来调用，父类可以定义子类共有的属性和方法，子类可以通过继承的方法调用父类中的属性和方法。

类型判断

xialuo instanceof People //true People是Student的父类，参与夏洛的构建
xialuo instanceof Student //true
xialuo instanceof Object //true Object属于所有类的父类

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

{} instanceof Object //true

原型

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

//隐式原型和显示原型
console.log(xialuo._proto_)
console.log(Student.prototype)
console.log(xialuo._proto_ === Student.prototype) //true
//隐式原型就是本身中没有的，显示原型就是自身有的，xialuo这个实例引用sayHi这个方法xialuo自身没有是引用Student的，所以sayHi就是xialuo的隐式原型，是Student的显示原

1593333892730.png

原型关系

每个class都有显示原型prototype
每个实例都有隐式原型_ proto _
实例的隐式原型_ proto _都指向对应class的显示原型prototype

基于原型的执行规则

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

原型链

console.log(Student.prototype._proto_)
console.log(People.prototype)
console.log(People.prototype === Student.prototype._proto_) //true

1593335508407.png

1593335297587.png

所以Object是所有类的父类，Object中的显示原型是所有子类原型的最终指向，自身没有找到属性和方法原型会顺着隐式原型一层一层的往上找对应的显示原型直到找到Object为止，没有找到返回false，这就是instanceof的工作原理。

手写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
    }
    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
}

//子类调用父类
class myjQuery extends jQuery{
    constructor(selector){
        super(selector)
    }
    //扩展自己的方法
    addClass(){
        
    }
}