JavaScript avanzado 2

Others 2021-04-01 21:00:16 views: null

1. Constructor y prototipo

1.1 Tres formas de crear objetos: revisión

  1. Forma literal

    var obj = {
      
      };

  2. nueva palabra clave

    var obj = new Object();

  3. Método constructor

    function Person(name,age){
      
      
  this.name = name;
  this.age = age;
}
var obj = new Person('zs',12);

1.2 Miembros estáticos y miembros de instancia

1.2.1 Miembros de la instancia

Los miembros de instancia son miembros agregados a través de esto dentro del constructor. Por ejemplo, en el siguiente código, uname age sing es un miembro de instancia, y solo se puede acceder a los miembros de instancia a través del objeto instanciado.

 function Star(uname, age) {
    
    
     this.uname = uname;
     this.age = age;
     this.sing = function() {
    
    
     console.log('我会唱歌');
    }
}
var ldh = new Star('刘德华', 18);
console.log(ldh.uname);//实例成员只能通过实例化的对象来访问

1.2.2 Miembros estáticos

Los miembros agregados por miembros estáticos al constructor en sí, como sex en el siguiente código, son miembros estáticos, y solo se puede acceder a los miembros estáticos a través del constructor.

 function Star(uname, age) {
    
    
     this.uname = uname;
     this.age = age;
     this.sing = function() {
    
    
     console.log('我会唱歌');
    }
}
Star.sex = '男';
var ldh = new Star('刘德华', 18);
console.log(Star.sex);//静态成员只能通过构造函数来访问

1.3 El problema con el constructor

El método del constructor es muy útil, pero existe el problema de desperdiciar memoria.

Inserte la descripción de la imagen aquí

1.4 Prototipo de constructor prototipo

La función asignada por el constructor a través del prototipo es compartida por todos los objetos.

JavaScript estipula que cada constructor tiene una propiedad de prototipo que apunta a otro objeto. Tenga en cuenta que este prototipo es un objeto, y todas las propiedades y métodos de este objeto serán propiedad del constructor.

Podemos definir directamente esos métodos sin cambios en el objeto prototipo, de modo que todas las instancias del objeto puedan compartir estos métodos.

function Star(uname, age) {
    
    
    this.uname = uname;
    this.age = age;
}
Star.prototype.sing = function() {
    
    
	console.log('我会唱歌');
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
ldh.sing();//我会唱歌
zxy.sing();//我会唱歌

Inserte la descripción de la imagen aquí

1.5 Prototipo de objeto

对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。
__proto__对象原型和原型对象 prototype 是等价的
__proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype

Inserte la descripción de la imagen aquí

Inserte la descripción de la imagen aquí

1.6constructor constructor

对象原型（ __proto__）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身。
constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。
一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor  就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

Si modificamos el objeto prototipo original y asignamos un objeto al objeto prototipo, debemos usar manualmente el constructor para apuntar al constructor original, como por ejemplo:

 function Star(uname, age) {
    
    
     this.uname = uname;
     this.age = age;
 }
 // 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
 Star.prototype = {
    
    
 // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
   constructor: Star, // 手动设置指回原来的构造函数
   sing: function() {
    
    
     console.log('我会唱歌');
   },
   movie: function() {
    
    
     console.log('我会演电影');
   }
}
var zxy = new Star('张学友', 19);
console.log(zxy)

Como resultado de ejecutar el código anterior, configure el atributo del constructor como se muestra en la figura:

Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

1.7 Cadena de prototipos

Cada objeto de instancia tiene un atributo __proto__, que apunta al objeto prototipo de la función constructora. El objeto prototipo de la función constructora también es un objeto, y también tiene el atributo __proto__. De esta manera, buscar capa por capa formas una cadena prototipo.
Inserte la descripción de la imagen aquí

1.8 Relación triangular entre la instancia del constructor y el objeto prototipo

1.构造函数的prototype属性指向了构造函数原型对象
2.实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象
3.构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型的constructor属性也指向了构造函数

Inserte la descripción de la imagen aquí

1.9 Cadena de prototipos y mecanismo de búsqueda de miembros

Cualquier objeto tiene un objeto prototipo, es decir, propiedades prototipo. Cualquier objeto prototipo también es un objeto, y el objeto tiene propiedades __proto__. De esta manera, buscando capa por capa se forma una cadena, que llamamos cadena prototipo;

当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。
如果还没有就查找原型对象的原型（Object的原型对象）。
依此类推一直找到 Object 为止（null）。
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

1.10 este punto en el objeto prototipo

El this en el constructor y el this del objeto prototipo apuntan a nuestro nuevo objeto de instancia

function Star(uname, age) {
    
    
    this.uname = uname;
    this.age = age;
}
var that;
Star.prototype.sing = function() {
    
    
    console.log('我会唱歌');
    that = this;
}
var ldh = new Star('刘德华', 18);
// 1. 在构造函数中,里面this指向的是对象实例 ldh
console.log(that === ldh);//true
// 2.原型对象函数里面的this 指向的是 实例对象 ldh

Inserte la descripción de la imagen aquí

1.11 Amplíe los métodos integrados para matrices a través de prototipos

 Array.prototype.sum = function() {
    
    
   var sum = 0;
   for (var i = 0; i < this.length; i++) {
    
    
   sum += this[i];
   }
   return sum;
 };
 //此时数组对象中已经存在sum()方法了  可以始终 数组.sum()进行数据的求

2. Herencia

2.1 llamar ()

  • call () puede llamar a una función
  • call () puede modificar el punto de esto. Al usar call (), el primer parámetro es el modificado este punto, parámetro 2, parámetro 3 ... Use comas para separar la conexión
 function fn(x, y) {
    
    
     console.log(this);
     console.log(x + y);
}
  var o = {
    
    
  	name: 'andy'
  };
  fn.call(o, 1, 2);//调用了函数此时的this指向了对象o,

Inserte la descripción de la imagen aquí

2.2 El constructor hijo hereda los atributos del constructor padre

  1. Primero defina un constructor padre
  2. Definir otro subconstructor
  3. El constructor hijo hereda los atributos del constructor padre (usando el método de llamada)
 // 1. 父构造函数
 function Father(uname, age) {
    
    
   // this 指向父构造函数的对象实例
   this.uname = uname;
   this.age = age;
 }
  // 2 .子构造函数 
function Son(uname, age, score) {
    
    
  // this 指向子构造函数的对象实例
  3.使用call方式实现子继承父的属性
  Father.call(this, uname, age);
  this.score = score;
}
var son = new Son('刘德华', 18, 100);
console.log(son);

Inserte la descripción de la imagen aquí

2.3 Préstamo de métodos de herencia de objetos prototipo

  1. Primero defina un constructor padre
  2. Definir otro subconstructor
  3. El constructor hijo hereda los atributos del constructor padre (usando el método de llamada)
// 1. 父构造函数
function Father(uname, age) {
    
    
  // this 指向父构造函数的对象实例
  this.uname = uname;
  this.age = age;
}
Father.prototype.money = function() {
    
    
  console.log(100000);
 };
 // 2 .子构造函数 
  function Son(uname, age, score) {
    
    
      // this 指向子构造函数的对象实例
      Father.call(this, uname, age);
      this.score = score;
  }
// Son.prototype = Father.prototype;  这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
  Son.prototype = new Father();
  // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
  Son.prototype.constructor = Son;
  // 这个是子构造函数专门的方法
  Son.prototype.exam = function() {
    
    
    console.log('孩子要考试');

  }
  var son = new Son('刘德华', 18, 100);
  console.log(son);

El resultado del código anterior es el siguiente:

Inserte la descripción de la imagen aquí

3. Nuevo método ES5

3.1 El método de matriz para cada uno atraviesa la matriz

 arr.forEach(function(value, index, array) {
    
    
       //参数一是:数组元素
       //参数二是:数组元素的索引
       //参数三是:当前的数组
 })
  //相当于数组遍历的 for循环 没有返回值

3.2 Filtro de método de matriz para filtrar la matriz

  var arr = [12, 66, 4, 88, 3, 7];
  var newArr = arr.filter(function(value, index,array) {
    
    
  	 //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value >= 20;
  });
  console.log(newArr);//[66,88] //返回值是一个新数组

3.3 método de matriz algunos

some 查找数组中是否有满足条件的元素 
 var arr = [10, 30, 4];
 var flag = arr.some(function(value,index,array) {
    
    
    //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value < 3;
  });
console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

3.4 Selección de casos de productos

  1. Definir datos de objetos de matriz

    var data = [{
      
      
            id: 1,
            pname: '小米',
            price: 3999
        }, {
      
      
            id: 2,
            pname: 'oppo',
            price: 999
        }, {
      
      
            id: 3,
            pname: '荣耀',
            price: 1299
        }, {
      
      
            id: 4,
            pname: '华为',
            price: 1999
        }, ];

  2. Utilice forEach para recorrer los datos y representarlos en la página.

    data.forEach(function(value) {
      
      
  var tr = document.createElement('tr');
  tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
  tbody.appendChild(tr);
 });

  3. Filtrar datos según el precio

    1. Obtenga el botón de búsqueda y vincúlelo al evento de clic

      search_price.addEventListener('click', function() {
        
        
});

    2. Use el filtro para filtrar la información de precios ingresada por el usuario

      search_price.addEventListener('click', function() {
        
        
      var newDate = data.filter(function(value) {
        
        
        //start.value是开始区间
        //end.value是结束的区间
      	return value.price >= start.value && value.price <= end.value;
      });
      console.log(newDate);
 });

    3. Vuelva a renderizar los datos filtrados en la tabla

      1. Encapsular la lógica de renderizar datos en una función

        function setDate(mydata) {
          
          
      // 先清空原来tbody 里面的数据
  tbody.innerHTML = '';
  mydata.forEach(function(value) {
          
          
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
      tbody.appendChild(tr);
  });
 }

      2. Volver a renderizar los datos filtrados

         search_price.addEventListener('click', function() {
          
          
     var newDate = data.filter(function(value) {
          
          
     return value.price >= start.value && value.price <= end.value;
     });
     console.log(newDate);
     // 把筛选完之后的对象渲染到页面中
     setDate(newDate);
});

    4. Filtrar por nombre de producto

      1. Obtenga el nombre del producto ingresado por el usuario

      2. Vincule el evento de clic al botón de consulta y filtre el nombre del producto ingresado con estos datos

         search_pro.addEventListener('click', function() {
          
          
     var arr = [];
     data.some(function(value) {
          
          
       if (value.pname === product.value) {
          
          
         // console.log(value);
         arr.push(value);
         return true; // return 后面必须写true  
       }
     });
     // 把拿到的数据渲染到页面中
     setDate(arr);
})

3.5 La diferencia entre algunos y para cada uno

  • Si consulta el único elemento en la matriz, es más apropiado usar el método some. Si encuentra return true en algunos, es más eficiente terminar el recorrido y la iteración.
  • En forEach, return no terminará la iteración

3.6 El método de recorte elimina espacios en ambos extremos de una cuerda

var str = '   hello   '
console.log(str.trim()）  //hello 去除两端空格
var str1 = '   he l l o   '
console.log(str.trim()）  //he l l o  去除两端空格

3.7 Obtener el nombre de propiedad del objeto

Object.keys (objeto) Obtiene el nombre de la propiedad en el objeto actual, el valor de retorno es una matriz

 var obj = {
    
    
     id: 1,
     pname: '小米',
     price: 1999,
     num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id，pname,price,num]

3.8Object.defineProperty

Object.defineProperty establece o modifica las propiedades en el objeto

Object.defineProperty(对象，修改或新增的属性名，{
    
    
		value:修改或新增的属性的值,
		writable:true/false,//如果值为false 不允许修改这个属性值
		enumerable: false,//enumerable 如果值为false 则不允许遍历
        configurable: false  //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
})

Supongo que te gusta

Origin blog.csdn.net/weixin_48116269/article/details/108203222
Recomendado
Clasificación
Diario
Más
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)

Code World

© 2018 codetd.com