原型与原型链

class

• constructor
• 属性
• 方法

// 继承

class Person {
  constructor(name) {
    this.name = name
  }
  eat() {
    console.log(`${this.name} eat something`)
  }
}
// 子类
class Student extends Person {
  constructor(name, number) {
    super(name)
    this.number = number
  }
  sayHi() {
    console.log(this.name, this.number)
  }
}


class Teacher extends Person {
  constructor(name, major) {
    super(name)
    this.major = major
  }
  teach() {
    console.log(this.name, this.major)
  }
}
const jie = new Student('jie', 123)
jie.sayHi()
jie.eat()

const giser = new Teacher('giser', 'english')
giser.teach()
giser.eat()

console.log(giser instanceof Teacher) // true
console.log(giser instanceof Person) // true
console.log(giser instanceof Object) // true
console.log(typeof Person) // 'function'

原型

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

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

原型关系

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

如何准确判断一个变量是不是数组

instanceof 在原型链中寻找，左边是不是右边的实例；

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

手写一个简易的 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)
    })
  }
}


// 插件
jQuery.prototype.dialog = function(info) {
  console.log(info)
}

// 扩展性
class myJQuery extends jQuery {
  constructor(selector) {
    super(selector)
  }
  // 扩展自己的方法
  addCLass(classNames) {

  }
}

class 的原型本质，怎么理解

class 本身就是一个 function，理解他的原型就是 js 的原型与原型链

ECMA 只规定语法规则，也就是我们代码的书写规范，不规定如何实现。 clas 是 ES6 语法规范，有 ECMA 委员会发布

阅读量：

评 论：