高效准备前端技术一面：JS 基础知识面试题(二)

如何用class实现继承

现在一般利用es6的extends实现继承，可参考《JS高级程序设计》es5实现继承的方式

如何理解 JS 原型（隐式原型和显式原型）和原型链

原型和实例的关系：每个构造函数都有一个原型对象，原型有 一个属性指回> 构造函数，而实例有一个内部指针指向原型
《JS高级程序设计》P238

在JavaScript 中是使用构造函数来新建一个对象的(使用clas类实例化)，每一个构造函数的内部都有一个 prototype 属性，这个就是显式原型，它的属性值是一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当使用构造函数新建一个对象后，在这个对象的内部将包含一个叫做__proto__的属性，这个属性指向构造函数的 prototype 属性对应的值，这个就是隐式原型__proto__

ES5 中新增了一个 Object.getPrototypeOf()方法，可以通过这个方法来获取对象的原型

原型链查找

当访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。所以这就是新建的对象为什么能够使用 toString() 等方法的原因

原型链的终点是null,因为 Object.prototype.__proto__指向 null

手写一个简易的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++) {
            fn(this[i])
          }
        }
        on(type, fn) {
          this.each((elem) => {
            elem.addEventListener(type, fn, false)
          })
        }
      }
      const $ = new Jquery('p')
      console.log($.get(1))
      $.on('click', () => {
        alert('123')
      })
      Jquery.prototype.addClass = function (index, className) {
        this.get(index).classList.add(className)
      }
      $.addClass(2, 'wocainima')
      //   -----------------------------
      class JqueryPlus extends Jquery {
        constructor(selector) {
          super(selector)
        }
        changeStyle(index, key, value) {
          this.get(index).style[key] = value
        }
      }
      const _ = new JqueryPlus('p')
      _.changeStyle(0, 'fontSize', '20px')
      _.changeStyle(0, 'color', 'red')