JS object-oriented foundation

ES6 classes in the

• The class method

  class Person{
    	height="178cm";
      constructor(name,age){
          / / property
          this.name = name;
          this.age = age;
      }
      / / method
      getName(){
          console.log("The name is :"+this.name); }}let student = new Person("Zhang".20);
  student.getName();
  
  Copy the code

• Static methods and properties: Properties and methods that instances do not inherit

  class Person{
      // Static method
      static hobby(){
          console.log("Like basketball"); }}// Static attributes
  Person.height = "178cm";
  // call by class
  Person.hobby();
  console.log(Person.height);
  Copy the code

• Class inheritance

  class Dad{
      name = "Zhang";
      age = 40;
      constructor(height){
          this.height = height;
      }
      hobby(){
          console.log("Like basketball"); }}class Son extends Dad{
      constructor(height){
          // represents the parent class constructor
          super(height); }}Copy the code

Es6 modular

• Modularity, independent namespaces, and multiple script tags can lead to variable contamination

• Add “type=module” to browser default module script;

• Export keyword export

  • Export Method 1:

    export { a ,b , c}
    Copy the code

  • Export mode 2 Keyword “AS”

    export { a as aa ,b , c}
    Copy the code

  • Export Mode 3

    export let c = () = >{console.log("I am function...")}
    Copy the code

  • Export Mode 4

    export default a;
    Copy the code

    • equivalent

      export {a as default};
      Copy the code

  • Export can be exported multiple times. Export default can be exported only one time.

• Import mode: keyword import

  • Export The names of exported files must be the same

    import {aa , b , c} from './moduleb.js';
    Copy the code

  • Export The name of the exported file can be customized.

    import myfn from './moduleb.js';
    Copy the code

  • Import in wildcard “*” mode

    import * as obj from './moduleb.js';
    Copy the code

• Import on demand (deferred import)

The import method;

document.onclick =async function(){
    // import {fn1} from './fn.js';
    let res = await import("./fn.js");
    console.log(res);
}
Copy the code