Aprendizaje avanzado JS (alcance, avance de funciones, asignación de desestructuración, cadena de prototipos)

Esta semana aprendí principalmente sobre prototipos y cadenas de prototipos, problemas de atributos de prototipos, alcance y cadenas de alcance, cierres, patrones de creación de objetos y patrones de herencia. Las siguientes son las notas de estudio que tomé esta semana.

1. Introducción a la programación orientada a objetos

Dos ideas principales de programación

pop orientado a procesos

oop orientado a objetos

La orientación a objetos tiene las ventajas de flexibilidad, reutilización del código, fácil mantenimiento y desarrollo, y es más adecuada para proyectos de software a gran escala en los que colaboran varias personas.

Funciones orientadas a objetos:

• Encapsulación

• Herencia

• Polimorfismo

2. Clases y objetos en ES6

Orientado a objetos (abstracto, concreto)

En JS, un objeto es una colección desordenada de propiedades y métodos relacionados. Todas las cosas son objetos, como cadenas, matrices, valores, funciones, etc.

Los objetos se componen de propiedades y métodos:

• Atributos: características de las cosas, representadas por atributos en los objetos (sustantivos comunes)
• Método: el comportamiento de las cosas, representado por métodos en objetos (verbos comunes)

Las clases abstraen las partes comunes de los objetos.

Para crear una clase, debe usar new para crear una instancia de la clase antes de poder usarla.

Hay un constructor de funciones muy importante en la clase.

//创建一个类
class Star{
    
    
    constructor(uname,age){
    
    
        this.uname=uname;
        this.age=age;
    }
      //在类中添加方法
    sing(song){
    
    
        // console.log("我会唱歌")
        console.log(this.uname+song)
    }
    //(1)在类里面的所有函数不需要写function
    //(2)多个函数方法之间不需要添加逗号分隔
}
//利用类创建对象，也称对类进行实例化
var zly=new Star("赵丽颖",31);
var zs=new Star("某爽",28);
console.log(zly);
console.log(zs);
// (1)通过class对象创建类，类名习惯性首字母大写
// (2)类里面有个constructor函数，可以接受传递过来的参数，同时返回实例对象
// (3)constructor函数只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数
// (4)生成实例的new不能省略
// (5)最后注意语法规范，创建类 类名后面不要加小括号，生成实例 类名后面加小括号，构造函数不需要加function

3. Herencia de clases

Super no solo puede llamar al constructor en la clase principal, sino también a las funciones ordinarias de la clase principal.

//El principio de búsqueda de atributos o métodos en herencia: principio de proximidad

// 1. En herencia, si al crear una instancia de una subclase se genera un método, primero verifique si la subclase tiene este método y, de ser así, ejecute la subclase primero

// 2. En herencia, si no existe tal método en la subclase, verifique si existe dicho método en la clase principal y, de ser así, ejecute el método en la clase principal

class Father {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    sum() {
        console.log(this.x + this.y);
    }
}
class Son extends Father {
    constructor(x, y) {
        //super必须在子类this之前调用
        super(x, y)//调用父类中的构造函数
        this.x = x
        this.y = y     
    }
    sub(){
        console.log(this.x - this.y);
    }
}
var son = new Son(5,3);
son.sub();
son.sum();

Clases y objetos en ES6

Tres puntos a tener en cuenta

1. No hay promoción de variables en ES6, por lo que la clase debe definirse primero antes de que la clase pueda crear una instancia del objeto.
2. Se deben utilizar propiedades y métodos comunes en la clase con esto.
3. El problema de señalar esto en la clase.
4. Esto en el constructor apunta al objeto de instancia creado y esto en el método apunta a la persona que llama a este método.

 var that;
 var _that;
class Star{
    
    
    constructor(uname){
    
    
    that=this
    console.log(this)
        this.uname=uname;
        this.btn=document.querySelector("button");
        this.btn.onclick=this.sing;//不要加小括号，加上后就立马执行了
    }
    //在类中添加方法
    sing(){
    
    
        //这个sing方法里的this指向的是btn这个按钮，因为这个按钮调用了这个函数
        console.log(this)
        console.log(this.uname)
    }
    dance(){
    
    
        //这个dance里面的this 指向的是实例对象zly 因为zly调用了这个函数
        _that=this
        console.log(this)
    }
}
var zly=new Star("赵丽颖")
zly.dance();
console.log(that===zly);
console.log(_that===zly);

Alcance

alcance local

• alcance de la función
• Alcance del bloque (para bucle, si, mientras)

Las declaraciones let y const generarán un alcance de bloque, pero var no generará un alcance de bloque.

Las variables entre diferentes bloques de código no pueden acceder entre sí

Se recomienda utilizar let y const.

alcance global

La etiqueta script y el archivo JS son variables globales.

1. Las propiedades agregadas dinámicamente al objeto de ventana también son globales de forma predeterminada, lo cual no se recomienda.

2. Las variables declaradas sin palabras clave en la función son variables globales, lo cual no se recomienda.

3. Declare la menor cantidad posible de variables globales para evitar que las variables globales se contaminen.

cadena de alcance

Esencialmente el mecanismo de búsqueda de variables subyacente.

Cuando se ejecuta la función, las variables se buscarán primero en el alcance de la función actual.

Si no se puede encontrar el alcance actual, se buscará en el alcance principal nivel por nivel hasta llegar al alcance global.

Resumir:

1. Los alcances de la relación anidada están conectados en serie para formar una cadena de alcance.

2. Encuentre variables en la misma cadena de alcance de acuerdo con las reglas de pequeña a grande.

3. El ámbito secundario puede acceder al ámbito principal, pero el ámbito principal no puede acceder al ámbito secundario

Mecanismo de recolección de basura (GC) JS

Ciclo de vida de la memoria :

1. Asignación de memoria: cuando declaramos variables, funciones y objetos, el sistema les asignará memoria automáticamente.
2. Uso de la memoria: lectura y escritura de memoria, es decir, uso de funciones variables, etc.
3. Recuperación de memoria: después del uso, el recolector de basura recupera automáticamente la memoria que ya no se usa

ilustrar:

• Las variables globales generalmente no se reciclan (apaga el reciclaje de la página)
• En algunos casos, el valor de la variable local se reciclará automáticamente si no se utiliza.

**Pérdida de memoria: **La memoria asignada en el programa no se libera o no se puede liberar por algún motivo, lo que se denomina pérdida de memoria.

Mecanismo de recolección de basura JS: descripción del algoritmo

• Conteo de referencias

Hay un problema fatal: referencias anidadas (referencias circulares)

Si dos objetos hacen referencia entre sí, aunque ya no estén en uso, el recolector de basura no los recolectará, lo que provocará una pérdida de memoria.

• marcar y barrer

  Idea central: escanear objetos desde la raíz, utilizarlos si se pueden encontrar y reciclar los que no se pueden encontrar.

Cierre

Cierre = función interna + variable de función externa

La función de cierre: para cerrar datos y lograr la privacidad de los datos, también se puede acceder a las variables de la función desde el exterior.

Los cierres son útiles, ya que permiten asociar funciones con algunos datos (entorno) de otras operaciones.

El cierre puede causar pérdidas de memoria

El formato básico de un cierre:

     function outer(){
    
    
       let i =10;
        function fn(){
    
    
            console.log(i);
        }
       return fn;
    }
   const fun= outer(); 
    fun()

//简约写法
     function outer(){
    
    
       let i =10;
        return function(){
    
    
            console.log(i);
        }
    }
   const fun= outer(); 
    fun()

//闭包的应用: 统计函数调用的次数
let i=0;
function fn(){
    
    
    i++
    console.log(`函数被调用${
      
      i}次`)
}
//值会有被篡改的风险

//采用闭包的形式  实现数据的私有
function count(){
    
    
    let i=0;
    function fn(){
    
    
        i++
        console.log(`函数被调用${
      
      i}次`);
    }
    return fn
}
const fun=count()//全局，不会被回收

promoción variable

Levante todas las declaraciones var al frente del alcance actual

Solo se promueven declaraciones, no se promueven asignaciones de indefinido

No se recomienda utilizar la declaración var, no hay promoción de variables para let y const

Función avanzada

Conozca los valores predeterminados de los parámetros de función, los parámetros dinámicos y los detalles de uso de los parámetros restantes, mejore la flexibilidad de la aplicación de funciones y conozca la sintaxis de las funciones de flecha y las diferencias entre funciones ordinarias.

función de elevación

  //1.会把所有函数声明提升到当前作用域的最前面
        //2.只提升函数声明，不提升函数调用
        fn()
        function fn(){
    
    
            console.log("函数提升");
        }

    //函数表达式必须先声明和赋值，才能调用  
//这样写是错误的。因为只提升函数声明，不提升函数赋值，会报错
  fun()
        var fun = function () {
    
    
            console.log("函数表达式");
        }

Resumir:

1. El aumento de funciones puede hacer que la declaración y la llamada de funciones sean más flexibles
2. No existe ningún fenómeno de promoción en las expresiones de funciones.
3. El aumento de funciones se produce en el mismo ámbito.

parámetros de función

Parámetros dinámicos

Punto de entrada: argumentos

        function getSum(){
    
    
            //arguments 动态参数 只存在于函数里面
            //是伪数组
            console.log(arguments);
        }
        getSum(2,3,4)

 function getSum(){
    
    
            let sum=0;
            for(let i=0;i<arguments.length;i++){
    
    
                sum+=arguments[i]
            }
            console.log(sum)
        }
        getSum(2,3,4)
        getSum(1,2,3,4)
        getSum(2,2,3,4)

Resumir:

1. argumentos es una pseudomatriz que solo existe en funciones
2. La función de los argumentos es obtener dinámicamente los parámetros reales de la función.
3. Obtenga los parámetros reales pasados ​​a través del bucle for en secuencia

Parámetros restantes (uso recomendado)

     function getSum(...arr) {
            console.log(arr);
        }
		//arr可以随便起名
        getSum(2, 3)
        getSum(1, 2, 3)

Los parámetros restantes nos permiten representar un número indefinido de parámetros como una matriz.

1. ...es un símbolo gramatical. Antes del parámetro de función final, se utiliza para obtener parámetros reales redundantes . No es necesario cuando se utiliza...
2. Los parámetros reales restantes obtenidos con la ayuda de... son una matriz real (puedes usar varios métodos arr)

El escenario de uso principal de los parámetros restantes: se utiliza para obtener parámetros reales redundantes

La diferencia entre los parámetros restantes y los parámetros dinámicos: los parámetros dinámicos son pseudomatrices y los parámetros restantes son matrices reales

operador de propagación

        const arr=[1,2,3]
        //展开运算符可以展开数组
        console.log(...arr);

La matriz original no se modificará.

Escenarios de aplicación típicos: encontrar el valor máximo (mínimo) de una matriz, fusionar matrices

   const arr=[1,2,3]
        //展开运算符可以展开数组
        // console.log(...arr);
        console.log(Math.max(1,2,3));
        console.log(Math.max(...arr));
         //结果都为3
        //实质上...arr===1,2,3

   		//合并数组
		const arr1=[1,2,3]
        const arr2=[4,5,6]
        const arr=[...arr1,...arr2]
        console.log(arr);

Resumir:

1. La función principal del operador de expansión.

La matriz se puede expandir y se pueden usar operaciones como encontrar el valor máximo de la matriz y fusionar matrices.

2. La diferencia entre el operador de expansión y los parámetros restantes.

El operador de expansión es principalmente expansión de matriz.

​Los parámetros restantes se utilizan dentro de la función.

Funciones de flecha (importantes)

**Propósito:** El propósito de introducir funciones de flecha es escribir funciones de una manera más corta sin vincular esto. La sintaxis de las funciones de flecha es más concisa que las expresiones de funciones.

Escenarios de uso: las funciones de flecha son más adecuadas para lugares donde originalmente se necesitan funciones anónimas.

gramática básica

Las funciones de flecha reemplazan principalmente las expresiones de funciones

Cuando solo hay un parámetro formal, puedes omitir los paréntesis

Cuando solo hay una línea de código, podemos omitir las llaves.

Sólo una línea de código puede omitir el retorno

Las funciones de flecha pueden devolver un objeto directamente

    // //普通函数
        // const fn = function () {
    
    
        //     console.log(1, 2, 3);
        // }
        // fn()
        // //箭头函数主要替代函数表达式
        // const fn = () => {
    
    
        //     console.log(1, 2, 3);
        // }
        // fn()
        // //箭头函数传递参数
        // const fn=(x)=>{
    
    
        //     console.log(x);
        // }
        // fn(1)
        // //只有一个形参的时候，可以省略小括号
        // const fn=x=>{
    
    
        //     console.log(x);
        // }
        // fn(1)
        // //只有一行代码的时候，我们可以省略大括号
        // const fn=x=>console.log(x);
        // fn(1)
        //只有一行代码可以省略return
        // const fn=x=>x+x;
        // console.log(fn(1));
        //箭头函数可以直接返回一个对象
        const fn = (uname) => ({
    
     uname: uname })
        fn("赵丽颖")
        console.log(fn("赵丽颖"));

Resumir:

1. Las funciones de flecha son funciones de expresión, por lo que no hay promoción de funciones.
2. Los paréntesis () se pueden omitir cuando la función de flecha tiene un solo parámetro.
3. Cuando el cuerpo de la función de flecha tiene solo una línea de código, puede omitir las llaves {} y se devolverá automáticamente como valor de retorno.
4. El cuerpo de la función entre paréntesis devuelve una expresión literal de objeto.

parámetros de la función de flecha

Las funciones ordinarias tienen argumentos y parámetros dinámicos.

Las funciones de flecha no tienen parámetros dinámicos de argumentos, pero tienen parámetros restantes...args

        //利用箭头函数来求和
        getSum = (...arr) => {
    
    
            let sum = 0;
            for (let i = 0; i < arr.length; i++) {
    
    
                sum += arr[i]
            }
            return sum;
        }
        console.log(getSum(1,2,3,4,5));

Resumen: no hay parámetros dinámicos de argumentos en la función de flecha y se pueden usar los parámetros restantes

función de flecha esta

Antes de la llegada de las funciones de flecha, ninguna función nueva definía este valor de la función según cómo se llamaba.

        //this指向window
        console.log(this);
        //普通函数中this指向window(即函数的调用者)
        function fn(){
    
    
        console.log(this);
        }
        window.fn()
        //对象方法里的this指向对象
        const obj={
    
    
            name:'andy',
            sayHi:function (){
    
    
                console.log(this);
            }
        }
        obj.sayHi()

La función de flecha no crea su propio this, solo lo hereda del nivel superior de su propia cadena de alcance.

        const obj={
    
    
            name:'andy',
            sayHi:()=>{
    
    
                console.log(this);
            }
        }
        obj.sayHi()

  const obj ={
    
    
            uname:"pink老师",
            sayHi:function(){
    
    
                console.log(this);
                let i=10
                const count =()=>{
    
    
                    console.log(this);
                }
                count()
            }
        }
        obj.sayHi()
//this指向都是obj

Resumir:

La función de flecha no crea su propio this, solo lo hereda del nivel superior de su propia cadena de alcance.

No se recomienda el uso de la función de flecha para la función de devolución de llamada de eventos DOM, especialmente cuando es necesario

Cuando la función de devolución de llamada del evento usa la función de flecha, esta es la ventana global.

Tarea de desestructuración

Sintaxis de desestructuración y clasificación, utilice una sintaxis concisa de desestructuración para asignar rápidamente valores a las variables

desestructuración de matrices

La desestructuración de matrices es una sintaxis concisa para asignar rápidamente valores unitarios de una matriz a una serie de variables en lotes.

  //基本语法:
        const arr=[100,60,80]
        //数组解构  赋值
        const [max,min,avg]=arr
        //就等价于如下赋值
        // const max =arr[0]
        // const max =arr[1]
        // const max =arr[2]
        console.log(max);
        console.log(min);
        console.log(avg);

 //典型应用   变量交互
       let a=1
       let b=2;//这里必须要加分号
        [b,a]=[a,b]
        console.log(a,b);

Hay dos situaciones en las que se debe agregar un punto y coma:

   //1.立即执行函数
        (function(){
    
     })();
        (function(){
    
     })();
        //2.使用数组的时候
        const str='pink';//如果这里不加分号，就会报错'pink'[1,2,3].map is not a function
        [1,2,3].map(function(item){
    
    
            console.log(item);
        })

Resumir:

1. ¿Cuál es la función de la asignación de desestructuración de matrices?

Pruebe una sintaxis concisa para asignar rápidamente valores unitarios de una matriz a una serie de variables en lotes

2. ¿En qué dos situaciones se debe agregar un punto y coma delante de JS?

• Ejecutar la función inmediatamente.
• desestructuración de matrices

Reponer:

Nuevas ideas para empalmar cuerdas:

Implemente el empalme de cadenas usando los métodos de matriz map() y join()

El mapa puede atravesar la matriz para procesar datos y devolver una nueva matriz

El mapa también se llama mapeo. Mapeo es un término que se refiere a la relación entre los elementos de dos conjuntos de elementos que "se corresponden" entre sí.

El objetivo del mapa es tener un valor de retorno (devolver una matriz), forEach no tiene valor de retorno

 const arr =['red','blue','pink'] 
        //数组map方法
        const newArr=arr.map(function(ele,index){
    
    
            console.log(ele);//数组元素
            console.log(index);//索引号
            return ele +"颜色"
        })
        console.log(newArr);
        

método de unión

     const arr =['red','blue','pink'] 
        //数组map方法
        const newArr=arr.map(function(ele,index){
            console.log(ele);//数组元素
            console.log(index);//索引号
            return ele +"颜色"
        })
        console.log(newArr);
        //数组join方法
        //把数组中的而所有元素转换成一个字符串
        console.log(newArr.join());//小括号为空，用逗号分割   red颜色,blue颜色,pink颜色
        console.log(newArr.join(''));//小括号为空，无分割     red颜色blue颜色pink颜色
        console.log(newArr.join('|'));//小括号为空，用|分割   red颜色|blue颜色|pink颜色
    

Detalles de desestructuración de matrices

  // const pc=['海尔','联想','小米','方正']
        // const [hr,lx,mi,fz]=['海尔','联想','小米','方正']
        // console.log(hr);
        // console.log(lx);
        // console.log(mi);
        // console.log(fz);
        // function getValue(){
        //     return [100,60]
        // }
        // const[max,min]= getValue()
        // console.log(max,min);
        //1.变量多，单元值少，undefined
        // const [a,b,c,d]=[1,2,3]
        // console.log(a);//1
        // console.log(b);//2
        // console.log(c);//3
        // console.log(d);//undefined
        //2.变量少，单元值多
        // const [a,b]=[1,2,3]
        // console.log(a);//1
        // console.log(b);//2
        //3.利用剩余参数 变量少，单元值多
        // const [a,b,...c]=[1,2,3,4]
        // console.log(a);//1
        // console.log(b);//2
        // console.log(c);//3,4
        //4.防止undefined传递,设个默认参数
        // const [a=0,b=0]=[1,2]
        // console.log(a);//1
        // console.log(b);//2
        //5.按需导入赋值
        // const [a,b,,d]=[1,2,3,4]
        // console.log(a);//1
        // console.log(b);//2
        // console.log(d);//4
        // //6.支持多维数组解构
        // const arr = [1, 2, [3, 4]]
        // console.log(arr[0]);
        // console.log(arr[1]);
        // console.log(arr[2]);
        // console.log(arr[2][0]);
        const [a, b, [c,d]] = [1, 2, [3, 4]]
        console.log(a);
        console.log(b);
        console.log(c);
        console.log(d);

Resumir:

Cuando el número de variables es mayor que el número de valores unitarios, a las variables sobrantes se les asignará indefinido

Cuando el número de variables es menor que el número de valores unitarios, los valores unitarios restantes se pueden obtener a través de los parámetros restantes..., pero solo se pueden colocar en la última posición.

deconstrucción de objetos

La desestructuración de objetos es una sintaxis concisa para asignar rápidamente propiedades y métodos de objetos a una serie de variables en lotes.

    //  //对象解构
        const obj={
            uname:'pink老师',
            age:18
        }
        //解构的语法
        // const {uname,age}={ uname:'pink老师', age:18}
        //等价于const uname=obj.uname
        //要求属性名和变量名必须一致
        // console.log(username);
        // console.log(age);
        //1.对象解构的变量名 可以重新改名 旧变量名：新变量名
        // const{uname:username,age}={ uname:'pink老师', age:18}
        // console.log(username);
        // console.log(age);
        //2.解构数组对象
        const pig=[
            {
                uname:'佩奇',
                age:6
            }
        ]
        const [{uname,age}]=pig
        console.log(uname);
        console.log(age);对象解构
        const obj={
            uname:'pink老师',
            age:18
        }
        //解构的语法
        const {uname,age}={ uname:'pink老师', age:18}
        //等价于const uname=obj.uname
        //要求属性名和变量名必须一致
        console.log(uname);
        console.log(age);

Desestructuración de objetos multinivel

  const pig={
    
    
            uname:'佩奇',
            family:{
    
    
                mother:'猪妈妈',
                father:'猪爸爸',
                brother:'乔治'
            },
            age:6
        }
        //多级对象解构
        const {
    
    uname,family：{
    
    mother,father,brother}}=pig
        console.log(uname);
        console.log(mother);
        console.log(father);
        console.log(brother);

Desestructuración de objetos de matriz multinivel

 const pig=[
        {
            uname:'佩奇',
            family:{
                mother:'猪妈妈',
                father:'猪爸爸',
                brother:'乔治'
            },
            age:6
        }
        ]
        const [{uname,family:{mother,father,brother}}]=pig
        console.log(uname);
        console.log(mother);
        console.log(father);
        console.log(brother);

Recorrer la matriz para cada método (énfasis)

El método forEach() se utiliza para llamar a cada elemento de la matriz y pasar el elemento a la función de devolución de llamada.

Escenario de uso principal: recorrer cada elemento de la matriz

        //forEach就是遍历 加强版的for循环
        const  arr=['red','green','pink']
        const result=arr.forEach(function(item,index){
    
    
            console.log(item);//数组元素 red green pink
            console.log(index);//索引号
        })
        console.log(result);//打印结果为undefined
```## 深入对象

### 创建对象的三种方式

**利用对象字面量创建对象**

```js
const o ={
    
    
            uname:'佩奇'
        }

Crear un objeto usando la función nuevo objeto proporcionada por el sistema

 // const obj=new Object()
        // console.log(obj);
        // obj.name="pink老师"
        const obj=new Object({
    
    uname:"pink老师"})
        console.log(obj);

Crear un constructor personalizado (encapsularlo)

     function Pig(name, age, gender) {
    
    
            this.name = name
            this.age = age
            this.gender = gender
        }
        //创建佩奇对象
        const Peppa=new Pig('佩奇',6,'女')
        const George=new Pig('佩奇',3,'男')
        const Mum=new Pig('猪妈妈',30,'女')
        const Dad=new Pig('猪爸爸',32,'男')
        console.log(Peppa);
        console.log(George);
        console.log(Mum);
        console.log(Dad);

Constructor

Constructor crea objeto

El constructor es una función especial que se utiliza principalmente para inicializar objetos.

Los constructores son funciones técnicamente regulares.

Pero hay dos acuerdos:

1. El nombre comienza con mayúscula
2. Sólo puede ser ejecutado por el operador "nuevo"

 //创建一个猪 构造函数
        function Pig(uname,age){
            this.uname=uname  //第一个uname属性//第二个uname形参
            this.age=age
        }
        console.log( new Pig('佩奇',6));

ilustrar:

1. El acto de llamar a una función usando la nueva palabra clave se llama creación de instancias.
2. Se puede omitir al crear una instancia del constructor sin parámetros ()
3. No es necesario escribir return dentro del constructor, el valor de retorno es el objeto recién creado
4. El valor devuelto por return dentro del constructor no es válido, así que no escriba return
5. new object() y new Date() también son constructores de creación de instancias

Resumir:

¿Cuál es el papel del constructor? ¿cómo escribir?

• Los constructores se utilizan para crear rápidamente múltiples objetos.
• Funciones que empiezan con mayúscula

El comportamiento de una función llamada por la nueva palabra clave se llama creación de instancias.

No es necesario escribir return dentro del constructor, el constructor devuelve automáticamente el nuevo objeto creado.

Proceso de ejecución de instancias

1. Crear nuevo objeto vacío
2. Constructor esto apunta al nuevo objeto.
3. Ejecute el código del constructor, modifíquelo y agregue nuevas propiedades.
4. Devolver nuevo objeto

Miembros de instancia y miembros estáticos

El objeto creado a través del constructor se denomina objeto de instancia, y las propiedades y métodos del objeto de instancia se denominan miembros de instancia (propiedades de instancia y métodos de instancia).

ilustrar:

1. Pasar parámetros al constructor y crear objetos con la misma estructura pero con valores diferentes
2. Los objetos de instancia creados por el constructor son independientes entre sí y no se afectan entre sí.

miembros estáticos

Las propiedades y métodos del constructor se denominan miembros estáticos (propiedades estáticas y métodos estáticos)

ilustrar:

• Solo los constructores pueden acceder a los miembros estáticos
• Esto en el método estático apunta al constructor.

Por ejemplo Fecha.ahora( ) Math.PI Math.random( )

Resumir:

1.¿En quiénes están escritos los miembros de la instancia (propiedades y métodos)?

Las propiedades y métodos de un objeto de instancia son miembros de instancia.

Los objetos de instancia son independientes entre sí y el objeto de instancia actual utiliza los miembros de la instancia.

2. ¿Quién escribe miembros estáticos (propiedades y métodos)?

Las propiedades y métodos del constructor se denominan miembros estáticos.

Solo se puede acceder a los miembros estáticos a través del constructor.

Constructor incorporado

Hay 6 tipos de datos principales en JS

Tipos de datos básicos: cadena, número, booleano, indefinido, nulo

Tipo de referencia: objeto

   const str ="pink"
    //js 底层完成，把简单数据类型包装成了引用数据类型
        //const str =new String ('pink')
        console.log(str.length);
        const num=12
        console.log(num.toFixed(2));//num.toFixed()是保留几位小数

De hecho, los tipos básicos como cadenas, números y booleanos también tienen constructores especiales, llamados tipos de empaquetado.

Casi todos los datos en JS se pueden crear según el constructor.

Los constructores integrados se dividen en tipos de referencia y tipos de contenedor.

tipo de referencia

Objeto, Matriz, RrgExp, Fecha

tipo de embalaje

Cadena, Número, Booleano

    // const str ="pink"
        //js 底层完成，把简单数据类型包装成了引用数据类型
        //const str =new String ('pink')
        console.log(str.length);
        const num=12
        console.log(num.toFixed(2));//num.toFixed()是保留几位小数

Objeto

Es un constructor incorporado que se utiliza para crear objetos comunes.

      const o={
    
    uname:'pink', age:18}
//1.获得所有的属性名
console.log(Object.keys(o));//返回数组['uname','age']
//获取所有的属性值
console.log(Object.values(o));//['pink',18]
//拷贝对象
const oo={
    
    }
Object.assign(oo,o)
console.log(oo);
//经常使用的场景：给对象添加属性
Object.assign(o,{
    
    gender:"女"})
console.log(o);

Formación

es un constructor incorporado que se utiliza para crear matrices

Al crear una matriz, se recomienda utilizar literales en lugar de constructores de matrices.

1. Métodos de instancia comunes de matrices: métodos centrales

método	efecto	ilustrar
para cada	iterar sobre la matriz	No devuelve una matriz, a menudo se usa para buscar y recorrer elementos de una matriz.
filtrar	matriz de filtro	Devuelve una nueva matriz, que devuelve los elementos del grupo de datos que cumplen las condiciones filtradas.
mapa	Iterar sobre la matriz	Devuelve una nueva matriz, que devuelve los elementos de la matriz procesados. Desea utilizar la nueva matriz devuelta.
reducir	Totalizador	Devuelve el resultado del procesamiento acumulativo, utilizado a menudo para sumas, etc.

//数组reduce方法
//arr.reduce(function(上一次值，当前值){}，初始值)
const arr =[1,5,6,8]
//1.没有初始值
// const total=arr.reduce(function(prev,current){
    
    
//     return prev+current
// })
// console.log(total);
//2.有初始值
const result=arr.reduce(function(prev,current){
    
    
    return prev+current
},10)
console.log(result);
//3.箭头函数的写法
 const total=arr.reduce((prev,current)=>prev+current,10)
 console.log(total);

2. El proceso de ejecución de reducir.

1. Si no hay un valor inicial, el último valor es el valor del primer elemento de la matriz.
2. Cada vez que se realiza el ciclo, el valor de retorno se asigna al último valor del siguiente ciclo.
3. Si hay un valor inicial, el valor inicial se utiliza como último valor.

No hay un valor inicial y el número de bucles es uno menos que el número de elementos de la matriz

Hay un valor inicial y el número de bucles es igual al número de elementos de la matriz.

Cómo utilizar buscar

    // const  arr=['red','blue','green']
    //     const result=arr.find(function(item){
    //         return item==='blue'
    //     })//会将blue作为返回值返回
    //     console.log(result);
    //find最常使用的场景
    const  arr=[
        {
            name:'小米',
            price:1999
        },
        {
            name:'华为',
            price:3999
        }
    ]
    //找小米这个对象，并返回这个对象
    // arr.find(function(item){
    //     // console.log(item);
    //     // console.log(item.name);
    //     return item.name==='小米'
    // })
    const mi=arr.find(item=>item.name==="小米")
    console.log(mi);

Cómo utilizar cada

El método each() prueba si todos los elementos de una matriz pueden pasar la prueba de una función específica. Devuelve un valor booleano

  //every()每一个是否都符合条件，如果都符合返回true，否则返回false
        const  arr=[10,20,30]
        const flag=arr.every(item=>item>=20)
        console.log(flag);

algún uso

El método some() prueba si una matriz contiene elementos que pueden pasar la prueba de una función específica. Devuelve un valor booleano

    //some()至少有一个是否符合条件，如果有返回true，否则返回false
        const  arr=[10,20,30]
        const flag=arr.some(item=>item>=20)
        console.log(flag);

        const spec={size:'40cm*40cm',color:'黑色'}
        //1.所有的属性值获取过来
        console.log(Object.values(spec));
        //2.转换为字符串 join('/')把数组根据分隔符转化为字符串
       console.log( Object.values(spec).join('/'));
       document.querySelector('div').innerHTML= Object.values(spec).join('/')

Convertir pseudomatriz en matriz real

Método estático Array.from()

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        const lis =document.querySelectorAll('ul li')
        console.log(lis);//获取过来的是伪数组NodeList（还有arguments获取的也是伪数组）
   // lis.pop();//伪数组无法使用pop删除方法
   const liss=Array.from(lis)
   console.log(liss);
   liss.pop()//真数组可以使用
   console.log(liss);
    </script>
</body>

Cadena

dividir

        //把字符串转化为数组，与join超级相似，根据分隔符将其分割成数组
        const str ='pink ,red'
        const arr=str.split(',')
        console.log(arr);
        const str1 ='2022-4-8'
        const arr1=str1.split('-')
        console.log(arr1);

El efecto es el siguiente:

subcadena()

   //字符串截取 substring(开始的索引号[，结束的索引号])
        const str='再也不用做核酸了'
        console.log(str.substring(5))//如果省略了结束索引号，默认取到最后
        console.log(str.substring(5,6))//截取的部分不包括结束索引

comienza con()

//startswith()用来判断当前字符串是否以另外一个给定的字符串开头，并根据判断结果返回true或false
        var str="To be, or not to be, that is the question."
        alert(str.startsWith("To be"));         //true
        alert(str.startsWith("not to be"));     //false
        alert(str.startsWith("not to be",10));  //true  加空格

incluye

//includes 判断某个字符是否包含在一个字符串内
        var str="To be, or not to be, that is the question."
        console.log(str.includes('To be'));         //true
        console.log(str.includes('question'));      //true
        console.log(str.includes('nonexistent'));   //false
        console.log(str.includes('To be',1));       //false
        console.log(str.includes('To BE'));         //false
        console.log(str.includes('To b'));          //true

cadena prototipo

Programación orientada a funciones JS

Constructor

La encapsulación es una parte importante del pensamiento orientado a objetos. JS orientado a objetos puede lograr la encapsulación a través de constructores.

De la misma manera, las variables y funciones se combinan y los datos se pueden compartir a través de esto, la diferencia es que los objetos de instancia creados con la ayuda del constructor no se afectan entre sí.

Resumir:

• El constructor incorpora la característica de encapsulación orientada a objetos.
• Los objetos creados por instancias de constructores son independientes entre sí y no se afectan entre sí.

El constructor que aprendimos antes es fácil de usar, pero existe el problema de desperdiciar memoria.

prototipo

prototipo

• Las funciones asignadas por el constructor a través del prototipo son compartidas por todos los objetos.
• JS estipula que cada constructor tiene un atributo prototipo que apunta a otro objeto, por lo que también lo llamamos objeto prototipo.
• Este objeto se puede montar con funciones y la creación de instancias del objeto no creará un prototipo de la función varias veces, lo que ahorra memoria.
• Podemos definir esos métodos constantes directamente en el objeto prototipo, de modo que todas las instancias del objeto puedan compartir estos métodos.
• Tanto this en el constructor como el objeto prototipo apuntan al objeto instanciado.
• Resumir:

Un prototipo es un objeto, también llamamos prototipo a un objeto prototipo.

El papel de los prototipos:

• Método compartido
• Puede definir esos métodos sin cambios directamente en el objeto prototipo.

Esto en el constructor y el prototipo apunta al objeto instanciado.

propiedad del constructor

Cada objeto prototipo tiene una propiedad constructora.

escenas a utilizar:

Si hay varios métodos de objeto, podemos asignar valores al objeto prototipo en forma de objeto.

Pero esto sobrescribirá el contenido original del objeto prototipo del constructor, de modo que el constructor del objeto prototipo modificado ya no apuntará al constructor actual. En este momento, podemos agregar un constructor al objeto prototipo modificado que apunte al constructor original.

       //constructor   构造函数
        //该属性指向该原型对象的构造函数，简单理解，就是指向我的爸爸，我是有爸爸的孩子
        function Star(){
    
    
        }
        // const ldh=new Star()
        // console.log(Star.prototype);
        // console.log(Star.prototype.constructor===Star);
        // Star.prototype.sing=function(){
    
    
        //     console.log('我会唱歌');
        // }
        // Star.prototype.dance=function(){
    
    
        //     console.log('我会跳舞');
        // }     //这样写显得繁琐
        console.log(Star.prototype); 
        Star.prototype={
    
      
            //从新指回创造这个原型对象的构造函数 
            constructor:Star,
            sing:function(){
    
    
                console.log('我会唱歌');
            },
            dance:function(){
    
    
                console.log('我会跳舞');
            },
        }
        console.log(Star.prototype); 

Función: apunta al constructor del objeto prototipo.

Prototipo de objeto

Los objetos tendrán un atributo __proto__ que apunta al objeto prototipo prototipo del constructor. La razón por la que nuestros objetos pueden usar los atributos y métodos del objeto prototipo constructor es porque el objeto tiene el prototipo __proto__.

 function Star(){
    
     }
        const ldh=new Star()
        //对象原型__proto__ 指向该构造函数的原型对象
        console.log(ldh.__proto__);
        console.log(ldh.__proto__===Star.prototype);  //true
        //对象原型里面有constructor指向构造函数Star
        console.log(ldh.__proto__.constructor);

Aviso:

• __proto__ es un atributo no estándar de JS
• [[prototipo]] tiene el mismo significado que __proto__
• Se utiliza para indicar a qué prototipo de objeto apunta el objeto de instancia actual
• También hay un atributo de constructor en el prototipo del objeto __proto__ , que apunta al constructor que creó el objeto de instancia.

Resumir:

1.¿Qué es el prototipo? ¿De dónde viene?

• prototipo (objeto prototipo)
• Los constructores tienen prototipos automáticamente.

2. ¿Dónde está el atributo del constructor? ¿Qué hace?

• Hay tanto prototipo prototipo como objeto prototipo __proto__
• Ambos apuntan al constructor del objeto/prototipo de instancia creado.

3. ¿Dónde está el atributo __proto__? ¿A quien?

• dentro del objeto de instancia
• Punto al prototipo prototipo

herencia prototípica

La herencia es otra característica de la programación orientada a objetos. La herencia mejora aún más el grado de encapsulación del código. La mayoría de JavaScript utiliza objetos prototipo para implementar funciones de herencia.

Problemas en la herencia prototípica:

Todos usan el mismo objeto al mismo tiempo, según las características del tipo de referencia apuntan al mismo objeto, modificar uno los afectará a todos.

[Error en la transferencia de la imagen del enlace externo. El sitio de origen puede tener un mecanismo anti-leeching. Se recomienda guardar la imagen y cargarla directamente (img-YZOMRaKJ-1681011543044) (C:\Users\86184\Desktop\4.3-4.14\ problemas de herencia de prototipos.png)]

Ideas para resolver el problema: Deje que Mujer y Hombre señalen objetos diferentes, pero el contenido sigue siendo el mismo.

Solución al problema: las estructuras de objetos producidas por el constructor nuevo son las mismas pero los objetos son diferentes.

   // //男人，女人都继承了人这个特性
        // //继续抽取
        // const Person = {
    
    
        //     eyes: 2,
        //     head: 1
        // }

        //构造函数 new出来的对象 结构一样 但对象不一样
        function Person(){
    
    
            this.eyes=2
            this.head=1
        }
        //女人 构造函数  想要继承Person
        function Woman() {
    
    
            // this.eyes = 2
            // this.head = 1
        }
        //Women 通过原型来继承Person
        // Woman.prototype = Person
        Woman.prototype =new Person()
        //指回原来的函数
        Woman.prototype.constructor = Woman
        //给女人添加一个方法  生孩子
        Woman.prototype.baby=function(){
    
    
            console.log('宝贝');
        }//这样添加之后，男女都有baby，麻烦大了
        //出现该问题的原因
        //男人和女人都同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就会都影响
        //解决问题的思路：让Woman和Man指向的对象不同，内容依然相同
        //解决问题的方法：构造函数 new出来的对象 结构一样 但对象不一样 
        const red = new Woman()
        console.log(red);
        console.log(Woman.prototype);//指回了原来的函数，既继承了属性，又有了constructor
        // console.log(red.eyes);

        //男人 构造函数   想要继承Person
        function Man() {
    
    
            // this.eyes = 2
            // this.head = 1
        }
        //Man通过原型继承Person
        Man.prototype=new Person() 
        //指回原来的函数
        Man.prototype.constructor=Man 
        const pink = new Man()
        console.log(pink);
        console.log(Man.prototype);

cadena prototipo

La herencia basada en objetos prototipo asocia objetos prototipo de diferentes constructores, y esta asociación es una estructura de cadena. Nos encanta la estructura de cadena de los objetos prototipo llamada cadenas de prototipos.

Pegando un blog aquí, creo que está bastante bien.

(37 mensajes) Diagrama de cadena de prototipo completo de JavaScript_diagrama de cadena de prototipo js_blog de Dandan boom-blog CSDN

Dar método de extensión de matriz

 //自己定义 数组扩展方法 求和  和  最大值
        //1. 我们定义的这个方法，任何一个数组实例对象都可以使用
        //2. 自定义的方法写(挂载)到 数组.prototype身上

        //求最大值
        // const arr=[1,2,3]
        // Array.prototype.max=function(){
    
    
        //     //展开运算符
        //     return Math.max(...this)
        // }
        // console.log(arr.max());

        //求最小值
        // const arr=[1,2,3]
        // Array.prototype.min=function(){
    
    
        //     return Math.min(...this)
        // }
        // console.log(arr.min());

        
        //求和 方法
        const arr=[1,2,3]
        Array.prototype.sum=function(){
    
    
           return this.reduce((prev,item)=>prev+item,0)
        }
        console.log(arr.sum());