class类和import,export,原型,原型链

ES6 Class 类

概念:

在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。

class 的本质是 function。

它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。

类表达式可以为匿名或命名。

// 匿名类
let Example = class {
      constructor(a) {
        this.a = a;
       }
   }
// 命名类
class Example {
    constructor(a) {
      this.a = a;
    }
}
 
ES5继承方式:
原型链继承:

   子类.prototype=new 父类()
   
   总结:
    优点:可以方便继承父类的方法
    缺点:不能传参

借用构造函数继承

  function 子类(参数1,参数2,...参数n) {

      父类.call(this,参数1,参数2,...参数n)

  }

总结:
   优点:传参方便 通过在子类,对父类通过call或apply来向父类传递参数
   缺点:父类的原型上方法是不能继承的

 组合继承:
    子类.prototype=new 父类()
     function 子类(参数1,参数2,...参数n) {
          父类.call(this,参数1,参数2,...参数n)
      }
  总结:
  
    结合了原型链继承和借用构造函数继承优点来实现

ES6继承方式:
//定义父类
  class Person {
      //通过constructor来定义实例化的属性
      constructor(name='无名',age=0) {
        this.name = name
        this.age = age  
      }
      //类似于prototype定义的方法
      getName(){
        return this.name
      }
}
//定义子类
  class Child extends Person {
    
constructor(name, age, address) {
      
//ES6继承必须要调用super(super即父类),才能在子类中使用this
        super(name,age);
        this.address="北京"
     }
   }



var c1 = new Child() //可以传递参数

console.log(c1)

原型链:
在当前实例化属性中查找有没有,没有则通过__proto__查找父类的原型,父类原型有则执行,没有则在通过__proto__再往上查找,查父类的父类的原型,以此类推...直到查找到null,即为原型链的最顶端



import,export

  模块化是什么:模块化是实现大型复杂项目开发的核心

  

   模块化规范:AMD,CMD,CommonJS,ES6 module

   AMD,CMD:是针对浏览器端的异步加载规范

   产出物:require.js,sea.js

   CommonJS:针对服务端同步的加载规范

   产生物:node.js

  语法:

   抛出:module.exports
   引入:require('包或定义的文件')

   ES6 module:主要针对浏览器的模块加载规范

  语法:

   抛出:export { } 或export default 
   引入: import xxx from '文件路径'

   通过script在html页面中加载js模块化的形式,必须通过type='module'指定一下

  例如:

   <script src="./js/main.js" type="module"></script>

ES6详解:https://es6.ruanyifeng.com/#README

ES6常用特性:https://www.cnblogs.com/Wayou/p/es6_new_features.html

原文地址:https://www.cnblogs.com/akby/p/12887953.html