JavaScript: herencia de cadena de prototipos y herencia de suplantación de objetos y resolución de la sintaxis de ES6

JavaScript: herencia de cadena de prototipos y herencia de suplantación de objetos y resolución de la sintaxis de ES6

• En la gramática de ES5, no existe el concepto de clase y la herencia solo se puede lograr de una manera especial;
• En el proceso de aprendizaje de la herencia js nativa, encontré las características de dos modos de herencia, por la presente lo grabo para la próxima revisión.

1. Herencia de la cadena de prototipos

• La herencia de la cadena de prototipos puede heredar el constructor y las propiedades y métodos de la cadena de prototipos , pero al crear una instancia de una subclase, no puede pasar parámetros a la clase principal;

  function Father(name,age){
        
        
      this.name = name;
      this.age = age;
      this.info = function(){
        
        
          console.log(this.name + ',' + this.age);
      }
  }
  // 静态方法
  Father.prototype.work = function(){
        
        
      console.log('work');
  }
  
  function Son(){
        
        
    // 属性和方法  
  }
  
  Son.prototype = new Father();
  
  // 实例化子类
  let son = new Son('张三',18);
  son.info();	// undefined,undefined
  son.work();	// work
  

2. Suplantación y herencia de objetos

• Los objetos que se hacen pasar por herencia pueden heredar los métodos del constructor , pero no pueden heredar los métodos de la cadena de prototipos ;

  function Father(name,age){
        
        
      this.name = name;
      this.age = age;
      this.info = function(){
        
        
          console.log(this.name + ',' + this.age);
      }
  }
  Father.prototype.work = function(){
        
        
      console.log('work');
  }
  
  function Son(name,age){
        
        
      // 对象冒充继承
    Father.call(this,name,age)
  }
  
  
  // 实例化子类
  let son = new Son('张三',18);
  son.info();	// 张三,18
  son.work();	// Uncaught TypeError: son.work is not a function
  

3. Clases de gramática ES6

• En la gramática de ES6, agregue el concepto de clase-clase, la introducción de clase facilita el desarrollo orientado a objetos de js;

  // 定义父类
  class Father{
        
        
      // 构造函数
      constructor(name,age){
        
        
          this._name = name;
          this._age = age;
      }
      getName(){
        
        
          console.log(this._name);
      }
      setName(name){
        
        
          this._name = name;
      }
      // 静态方法
      static work(){
        
        
          console.log('work');
      }
  }
  
  // 静态方法和属性
  Father.sleep = function(){
        
        
      console.log('sleep');
  }
  
  let f = new Father('马云',50);
  f.getName();	// 马云
  f.setName('马化腾');
  f.getName();	// 马化腾
  

• El método de herencia de ES6 también es similar a Java-extensions; este método de herencia puede tener en cuenta las ventajas de los dos métodos de herencia anteriores: es decir, puede heredar las propiedades y métodos del método estático y el constructor, y puede también se da cuando se crea una instancia de la subclase.Los padres pasan parámetros.

  // 定义父类
  class Father{
        
        
      // 构造函数
      constructor(name,age){
        
        
          this._name = name;
          this._age = age;
      }
      getName(){
        
        
          console.log(this._name);
      }
      setName(name){
        
        
          this._name = name;
      }
      // 静态方法
      static work(){
        
        
          console.log('work');
      }
  }
  
  // 静态方法和属性
  Father.sleep = function(){
        
        
      console.log('sleep');
  }
  
  // 子类继承父类
  class Son extends Father{
        
        
      constructor(name,age,sex){
        
        
          super(name,age);
          this._sex = sex;
      }
      getSex(){
        
        
          console.log(this._sex);
      }
  }
  
  // 实例化
  let s = new Son('allen',19,'male');
  s.getName();	// allen
  s.getSex();	// male
  Son.work();	// work
  Son.sleep(); // sleep
  

4. Singleton en ES6

• En escenarios de aplicación reales, a veces solo necesitamos realizar una operación específica en múltiples instancias, como operaciones de base de datos;

• Veamos qué sucede cuando se crea una instancia en un caso que no es singleton:

  class Db{
        
        
      constructor(){
        
        
          this.connect();
      }
      connect(){
        
        
          console.log('连接数据库');
      }
      find(){
        
        
          console.log('查询数据库');
      }
  }
  
  let db1 = new Db();
  let db2 = new Db();
  
  // 执行结果
  连接数据库
  连接数据库
  

• El ejemplo anterior señala claramente que si crea una instancia varias veces en un caso que no sea singleton, ejecutará el método de conectarse a la base de datos varias veces, lo que genera una gran cantidad de recursos de tiempo y espacio;

• La implementación de singleton es muy simple, solo construya un método estático:

  class Db{
        
        
      static getInstance(){
        
        
          if(!Db.instance){
        
        
              Db.instance = new Db();
          }
          return Db.instance;
      }
      constructor(){
        
        
          this.connect();
      }
      connect(){
        
        
          console.log('连接数据库');
      }
      find(){
        
        
          console.log('查询数据库');
      }
  }
  
  let db1 = Db.getInstance();
  let db2 = Db.getInstance();
  let db3 = Db.getInstance();
  
  db3.find();
  db2.find();
  
  // 执行结果
  连接数据库
  查询数据库
  查询数据库
  

• Todas las instancias comparten una instancia, denominada singleton. Haga un buen uso del modo singleton, que puede ahorrar un desperdicio innecesario de recursos en escenarios específicos. Es muy recomendable.