JS--Day22 (profundización de memoria recursiva de copia profunda proxy de copia superficial)

1. Memoria

①Popularidad:

    1), cpu: responsable de ejecutar programas (incluidas operaciones, lectura de memoria, etc.)

    2), memoria: único responsable del almacenamiento de datos.

②Memoria:

   1), la memoria de la computadora se dividirá en innumerables áreas pequeñas (cuadrículas)

    2) La memoria tiene particiones: diferentes áreas almacenan diferentes tipos de datos.

              En js, concéntrese en dos áreas de memoria: el área de pila y el área de almacenamiento dinámico.

    3) La computadora tiene un número para cada cuadrícula en la memoria. Este número es la dirección.

③Almacenamiento en área de pilas

             Variables, parámetros formales, es decir, al definir variables (parámetros formales), se solicitará espacio en el área de la pila

④ Almacenamiento en montón: nuevos datos

2. La diferencia entre tipos básicos y tipos de referencia (énfasis en la memoria)

① concepto

    1), el tipo básico (datos) también se denomina tipo de valor. Lo que se almacena en la memoria es el valor.

    2) El tipo de referencia también se denomina tipo de dirección y la dirección se almacena en la memoria.

②Almacenamiento de memoria

    1) El área de memoria correspondiente a la variable del tipo básico almacena el valor.

    2) El área de memoria correspondiente a la variable del tipo de referencia almacena la dirección.

③ Leer variables:

    1) Cuando el tipo básico lee datos, se lee directamente.

    2) Cuando el tipo de referencia lee datos, es una lectura indirecta.

④ Asignación de variables:

    Esencia: Independientemente de si es un tipo básico o un tipo de referencia, al asignar un valor, se asigna el contenido del almacenamiento de memoria correspondiente a la variable;

    solo:

    1), el tipo básico corresponde al valor almacenado en la memoria

    2) El almacenamiento de memoria correspondiente al tipo de referencia es la dirección.

⑤ Compara dos variables:

   Independientemente de si es un tipo básico o un tipo de referencia, al comparar, es el contenido almacenado en la memoria correspondiente a la variable;

⑥ Paso de parámetros de función

    Esencia: ya sea un tipo básico o un tipo de referencia, al pasar un parámetro, es el contenido almacenado en la memoria correspondiente al parámetro real;

    1), el tipo básico se pasa como parámetro de la función por valor

    2), el tipo de referencia se pasa ya que el parámetro de la función es la dirección.

var num = 10;
var n = num;//把num变量对应的内存区域存储的内容(值)赋给n;

var p = {
    name:"张三疯",
    age:18
}
var p2 = p;//把p变量对应的内存区域存储的内容(地址)赋给p2;
console.log(p2==p);//true
var p3 = {
    name:"张三疯",
    age:18
}
console.log(p==p3);//false

3. Llamada de función recursiva

①Llamada de función recursiva

    1), la función se llama a sí misma

    2) Debe haber una rama en la función recursiva que no se llame a sí misma, de lo contrario, se convierte en una llamada infinita, lo que provoca un desbordamiento de la pila (memoria).

②Selección de bucle y recursividad:

    Si tanto el bucle como la recursividad pueden resolver el problema.

    1), si se considera rendimiento: ciclo.

    2) Si no se considera el rendimiento: elija el que sea más simple.

③Escenario de problema para solución recursiva: estructura de árbol.


// 1、用递归的方式解决阶乘=====================================================
//    0!=1;
//    1!=1;
//    2!= 2*1 = 2*1!
//    3!= 3*2*1 = 3*2!
//    4!= 4*3*2*1 =4*3!
//    5!= 5*4*3*2*1 = 5*4!;
//    n! = n* (n-1)!

// 定义一个函数:求n 的阶乘;
 function factorial(n){
     if(n==1 || n==0){
         return 1;
     }
     return n*factorial(n-1);
 }

// 2、用递归的方式求第n个斐波那契数列的数========================================
// 1  1  2   3   5   8   13  21。

// 1)、用递归的方式解决
function feiBNQ(n){
    if(n==1 || n==2){
        return 1;
    }
    return feiBNQ(n-1)+feiBNQ(n-2);
}
// 2)、用循环的方式解决
function feiBNQ02(n){
    if(n==1 || n==2){
        return 1;
    }
    let n1 = 1;
    let n2 = 1;
    let n3;
    for(let i=2 ;i<n;i++){
        n3 = n1+n2;
        n1 = n2;
        n2 = n3;
    }
    return n3;
}

4. Copia profunda y copia superficial

① Copiar: Copiar.

②Copia profunda y copia superficial: la copia profunda y la copia superficial son para tipos de referencia.
 

var p1 = {
    name:"张三疯",
    age:12,
    wife:{
        name:"梅超风",
        brother:{
            name:"梅疯",
        }
   }
}

③Manera recursiva de hacer una copia profunda:

   Función: Hacer una copia profunda (copia) de un objeto

   Parámetros: el objeto a copiar

   Valor devuelto: el objeto copiado. El nuevo objeto no puede compartir ninguna memoria con el objeto de origen

function deepCopy(obj){
    let newObj = {};
    for(let key in obj){
        if(typeof obj[key] == "object"){            
            newObj[key] = deepCopy(obj[key]);
        }else{
            newObj[key] = obj[key];
        }
    }
    return newObj;
}
let newObj = deepCopy(p1);
p1.wife.brother.name="没有风";
console.log("p1.wife.brother.name",p1.wife.brother.name);
console.log("newObj.wife.brother.name",newObj.wife.brother.name);

5. Apoderado

①El proxy puede representar un objeto

② Al acceder al objeto Proxy, algunos métodos se llamarán automáticamente:

    1) Al usar el objeto Proxy para modificar la propiedad, se llamará al método set

    2) Al usar el objeto Proxy para leer la propiedad, se llamará al método get

    3) Cuando se utiliza el operador in para determinar si existe un determinado atributo en el objeto Proxy, se llamará al método has

③Generalmente, el objeto proxy tendrá todas las propiedades y métodos del objeto fuente.

    A través de console.dir(); imprima el objeto proxy,

    1) Si hay información de tipo en el objeto proxy, entonces está bien.

    2), si no hay información de tipo, entonces no es posible.

// 一、proxy的基本使用==============================================================
 let doctor = {
     name:"丁丽娟",
     sex:"女",
     age:12
 }
 let p = new Proxy(doctor,{
 });
console.log("p.name",p.name);//但访问代理对象的name属性时,代理对象会找源对象的name属性
// 二、proxy的第二个参数:setter和getter=============================================
let doctor = {
    name:"丁丽娟",
    sex:"女",
    age:12
}
let p = new Proxy(doctor,{
    set:function(target,key,value){
        console.log("set函数",key,value);
        if(key=="age"){
            if(value<0 || value>150){
                return;
            }
        }
        target[key] = value;//这是默认的代码,如果我们要重写set函数,就得写上这句话
    },
    get:function(target,key){
        // console.log("get函数",key);
        return target[key];
    }
})
 console.log("p.name",p.name);//调用get方法
 console.log("p.sex",p.sex);//调用get方法
 p.name="梅超风";//调用set方法
 p.age = 25;
 console.log("p.age",p.age);
 p.age = 250;
 console.log("p.age",p.age);

// 三、代理对象会具有源对象的一切属性和方法(?要看情况)==========================
// 通过 console.dir();打印代理对象,在代理对象的[[target]]里如果有类型的信息,
//   就可以。如果没有类型的信息,不可以。
// 1、代理数组,那么代理对象就会拥有数组的一切属性和方法
let arr = [12,23,34];
let p = new Proxy(arr,{});
console.dir(p);
 p.push(300);
 console.log("arr",arr);
 console.log("p.length",p.length);
// 2、代理日期:代理对象没法访问日期对象的属性和方法
let d1 = new Date();
let p1 = new Proxy(d1,{});
 console.log(p1.getFullYear());
 console.dir(p1);
// 3、代理一个自定义类型:代理对象可以访问自定义类的所有属性和方法。
class Person{
    constructor(name){
        this.myname=name
    }
    eat(){
        console.log("eat");
    }
}
let person1 = new Person("梅超风");
let p3 = new Proxy(person1,{});
console.dir(p3);
console.log("p3.myname",p3.myname);
p3.eat();
// 四、has:=========================================================================
//  1、每个对象都有一个in运算符。in运算符是判断一个对象里是否有某个属性
//  2、在代理对象上使用 in 运算符,会调用has方法。
 console.dir(Proxy);
let doctor = {
    name:"丁丽娟",
    sex:"女",
    age:12
}
 console.log("sex" in doctor);
 if("sex" in doctor){
 }
let p4 = new Proxy(doctor,{
     has:function(target,key){
        console.log("has");
        return key in target;//判断target对象里是否有 属性 key。
    }
});
console.dir(p4);
console.log(p4.sex);
console.log("sex" in p4);//在代理对象上使用in运算符,会调用代理对象的has方法。

01 Diagrama de memoria prototipo

 02 Memoria de variable tipo referencia

03 Diagrama de memoria de tipos básicos y tipos de referencia como parámetros de funciones

 04 Diagrama esquemático de llamada recursiva de función (factorial como ejemplo)

Supongo que te gusta

Origin blog.csdn.net/weixin_72756818/article/details/129823370
Recomendado
Clasificación