* Fundamentos de JavaScript 5 Alcance · Análisis previo · Objeto · Objeto transversal

1 Alcance

1.1 Resumen del alcance

En términos generales, el nombre utilizado en una parte del código de programa no siempre es válido y utilizable, y el alcance del código que limita la disponibilidad del nombre es el alcance del nombre. El uso del alcance mejora la localidad de la lógica del programa, mejora la confiabilidad del programa y reduce los conflictos de nombres.

Hay dos ámbitos en JavaScript (antes de es6):

• Alcance global
• Alcance local (alcance de la función)

1.2 Alcance global

	作用于所有代码执行的环境(整个script标签内部)或独立的js文件。

1.3 Alcance local

	作用于函数内的代码环境，就是局部作用域。 
	因为跟函数有关系，所以也称为函数作用域。

1.4 jS no tiene alcance a nivel de bloque

• El alcance del bloque está cubierto por {}.

• En otros lenguajes de programación (como java, c #, etc.), las variables creadas en sentencias if y sentencias de bucle solo se pueden usar en esta sentencia if y sentencia de bucle, como el siguiente código Java:

  Java tiene un alcance a nivel de bloque:

  if(true){
        
        
    int num = 123;
    system.out.print(num);  // 123
  }
  system.out.print(num);    // 报错
  

  El código java anterior reportará un error porque {} es un alcance en el código, y la variable declarada num no se puede usar fuera de "{}", y el código JavaScript similar no reportará un error.

  No hay alcance a nivel de bloque en js (antes de ES6)

  if(true){
        
        
    var num = 123;
    console.log(123); //123
  }
  console.log(123);   //123
  

2-Alcance de las variables

在JavaScript中，根据作用域的不同，变量可以分为两种：

• Variable global
• Variable local

2.1 Variables globales

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。

• Las variables globales se pueden usar en cualquier parte del código.
• Las variables declaradas por var en el ámbito global son variables globales
• En casos especiales, las variables declaradas sin var en la función también son variables globales (no recomendado)

2.2 Variables locales

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

• Las variables locales solo se pueden usar dentro de la función
• La variable declarada por var dentro de la función es una variable local
• Los parámetros formales de la función son en realidad variables locales.

2.3 La diferencia entre variables globales y variables locales

• Variables globales: se pueden usar en cualquier lugar y solo se destruirán cuando se cierre el navegador, por lo que ocupa más memoria
• Variables locales: solo se usan dentro de la función. Cuando se ejecuta el bloque de código, se inicializará; cuando el bloque de código esté terminado, se destruirá, por lo que se ahorra más espacio en la memoria.

Cadena de 3 alcances

Siempre que el código esté en el mismo ámbito, está escrito en el ámbito local dentro de la función, y está en el ámbito global si no está escrito dentro de ninguna función; si hay una función en la función, entonces otra uno puede nacer en este alcance Alcance, de acuerdo con este mecanismo en ** [la función interna puede acceder a variables de función externa] **, la búsqueda en cadena se utiliza para determinar a qué datos pueden acceder las funciones internas, lo que se denomina cadena de alcance.

案例分析1：
function f1() {
    
    
    var num = 123;
    function f2() {
    
    
        console.log( num );
    }
    f2();
}
var num = 456;
f1();

作用域链：采取就近原则的方式来查找变量最终的值
var a = 1;
function fn1() {
    
    
    var a = 2;
    var b = '22';
    fn2();
    function fn2() {
    
    
        var a = 3;
        fn3();
        function fn3() {
    
    
            var a = 4;
            console.log(a); //a的值 ?
            console.log(b); //b的值 ?
        }
    }
}
fn1();

4-pre-parse

4.1 Conceptos relacionados de preanálisis

El código JavaScript es ejecutado por el analizador de JavaScript en el navegador.

El analizador de JavaScript se divide en dos pasos cuando se ejecuta código JavaScript:

Pre-análisis y ejecución de código.

• Análisis previo: En el alcance actual, antes de que se ejecute el código JS, el navegador declarará o definirá de forma predeterminada las variables con declaraciones de función y var en la memoria de antemano. El análisis previo también se denomina promoción de variables y funciones.

• Ejecución de código: las sentencias JS se ejecutan de arriba a abajo.

  Nota: El preanálisis completará la declaración de variables y funciones antes de que se ejecute el código.

4.2 Preanálisis de variables

La declaración de la variable se promoverá a la parte superior del alcance actual y no se promoverá la asignación de la variable.

console.log(num);  // 结果是多少？
var num = 10;      // ？

Resultado: indefinido
Nota: La promoción variable solo promueve la declaración, no la asignación

4.3 Análisis previo de funciones

La declaración de la función se promoverá a la parte superior del ámbito actual, pero no se llamará a la función.

fn();
function fn() {
    
    
    console.log('打印');
}

Resultado: cadena de impresión de la consola - "imprimir"

Nota: La declaración de función representa la función como un todo, por lo que después de promocionar la función, el nombre de la función representa la función completa, ¡pero no se llama a la función!

4.4 El problema de la función de declaración de expresión de función

La expresión de función crea una función y realiza una promoción variable.

fn();
var  fn = function() {
    
    
    console.log('想不到吧');
}

Resultado: un mensaje de error "fn no es una función"

Explicación: antes de que se ejecute este fragmento de código, se promoverá la declaración de variable. El valor de fn después de la promoción no está definido; y la llamada de fn es antes de que se asigne el valor de fn al cuerpo de la función. En este momento, el valor de fn no está definido, por lo que no se puede llamar correctamente.

5-Objeto

5.1 Conceptos relacionados de objetos

• ¿Qué es un objeto?

  En JavaScript, un objeto es una colección desordenada de propiedades y métodos relacionados. Todas las cosas son objetos, como cadenas, números, matrices, funciones, etc.
  Los objetos se componen de propiedades y métodos.

  • Atributos: las características de las cosas, que están representadas por atributos en objetos (sustantivos comunes).

  • Método: el comportamiento de las cosas, representado por métodos en objetos (verbos comunes)

• ¿Por qué necesitas objetos?

  Al guardar un valor, puede usar una variable, al guardar varios valores (un conjunto de valores), puede usar una matriz.

    如果要保存一个人的完整信息呢？
  
    例如，将“张三疯”的个人的信息保存在数组中的方式为：
  

  var arr = [‘张三疯’, ‘男', 128,154];
  

  La desventaja de usar una matriz para almacenar datos en el ejemplo anterior es que solo se puede acceder a los datos a través de valores de índice. Los desarrolladores deben borrar la clasificación de todos los datos para obtenerlos con precisión, y cuando la cantidad de datos es enorme, es imposible memorizar todo El valor índice de los datos.

  Para almacenar mejor un conjunto de datos, el objeto nació: se establece un nombre de atributo para cada elemento de datos en el objeto, se puede acceder a los datos de manera más semántica, la estructura de datos es clara, el significado es obvio, y es conveniente para los desarrolladores.

  El conjunto de datos del registro del objeto de uso es:

  var obj = {
        
        
      "name":"张三疯",
      "sex":"男",
      "age":128,
      "height":154
  }
  

  La estructura de expresión de objeto en JS es más clara y poderosa.

5.2 Tres formas de crear objetos

Usa literales para crear objetos

	花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示 

• Clave: equivalente al nombre del atributo

• Valor: equivalente al valor del atributo, puede ser cualquier tipo de valor (tipo de número, tipo de cadena, tipo booleano, tipo de función, etc.)

  el código se muestra a continuación:

  var star = {
        
        
      name : 'pink',
      age : 18,
      sex : '男',
      sayHi : function(){
        
        
          alert('大家好啊~');
      }
  };
  

  La estrella en el código anterior es el objeto creado.

• Uso de objetos

  • Propiedades del objeto

    • Objeto que almacena datos específicos "en la clave" en la propiedad del objeto llamada "clave", que se almacena en los datos específicos de la entrada del objeto

  • Método de objeto

    • La "clave" del "par clave-valor" que almacena la función en el objeto se denomina método del objeto, es decir, el elemento que almacena la función en el objeto.

  • Accede a las propiedades del objeto.

    • La propiedad llama en el objeto: objeto. Nombre de la propiedad, este pequeño punto. Se entiende como "de"

    • Otra forma de llamar propiedades en objetos: objeto ['nombre de propiedad'], tenga en cuenta que las propiedades entre corchetes deben estar entre comillas

      El código de muestra es el siguiente:

      console.log(star.name)     // 调用名字属性
      console.log(star['name'])  // 调用名字属性
      

  • Método de objeto de llamada

    • Llamada al método en el objeto: objeto. Nombre del método (), preste atención a los paréntesis después del nombre del método

      El código de muestra es el siguiente:

      star.sayHi(); // 调用 sayHi 方法,注意一定要带后面的括号
      

  • Resumen de variables, atributos, funciones y métodos

    Los atributos son parte del objeto y las variables no son parte del objeto. Las variables son contenedores para almacenar datos por separado

    • Variable: declaración y cesión separadas, existen solas

    • Atributos: las variables del objeto se denominan atributos y no es necesario declararlas.

      El método es parte del objeto y la función es un contenedor que encapsula operaciones individualmente

    • Función: existe solo, puede ser llamado por el "nombre de función ()"

    • Método: La función en el objeto se llama método, y el método no necesita ser declarado, se puede llamar usando "object.method name ()"

Usar nuevo objeto para crear un objeto

• Crea un objeto vacío

  var andy = new Obect();
  

  Cree un objeto a través del constructor incorporado Object, en este momento la variable andy ha guardado el objeto vacío creado

• Agregar propiedades y métodos a objetos vacíos

  • Agregue propiedades y métodos al objeto operando las propiedades y métodos del objeto

    El código de muestra es el siguiente:

  andy.name = 'pink';
  andy.age = 18;
  andy.sex = '男';
  andy.sayHi = function(){
        
        
      alert('大家好啊~');
  }
  

  Nota:

  • Objeto (): poner en mayúscula la primera letra
  • new Object (): requiere la nueva palabra clave
  • Formato utilizado: object.attribute = value;

Usa el constructor para crear objetos

• Constructor

  • Constructor: Es una función especial que se usa principalmente para inicializar un objeto, es decir, para asignar valores iniciales a las variables miembro del objeto, siempre se usa con el operador new. Podemos extraer algunos atributos y métodos públicos del objeto y luego encapsularlos en esta función.

  • Formato de encapsulación del constructor:

    function 构造函数名(形参1,形参2,形参3) {
            
            
         this.属性名1 = 参数1;
         this.属性名2 = 参数2;
         this.属性名3 = 参数3;
         this.方法名 = 函数体;
    }
    

  • El formato de llamada del constructor

    var obj = new 构造函数名(实参1，实参2，实参3)
    

    En el código anterior, obj recibe el objeto creado por el constructor.

  • Precauciones

    1. La primera letra de la convención del constructor está en mayúscula .
    2. Debe agregar esto antes de las propiedades y métodos en la función para indicar las propiedades y métodos del objeto actual.
    3. No es necesario volver en el constructor para devolver el resultado .
    4. Cuando creamos un objeto, debemos usar new para llamar al constructor .

  • otro

    El constructor, como Stars (), abstrae la parte pública del objeto y la encapsula en una función. Generalmente se refiere a la
    creación de un objeto en una determinada clase , como new Stars (), que se refiere específicamente a una determinada uno. El objeto se crea a través de la nueva palabra clave El proceso de instanciación de objetos

• El papel de la nueva palabra clave

  1. Antes de que el código del constructor comience a ejecutarse, cree un objeto vacío;
  2. Modifique el punto de this para apuntar esto al objeto vacío creado;
  3. Código que ejecuta la función
  4. Una vez completada la función, devuelve esto, es decir, el objeto creado

  5.3 Objetos poligonales

  La instrucción for ... in se usa para recorrer los atributos de una matriz u objeto.

  Su sintaxis es la siguiente:

  for (变量 in 对象名字) {
        
        
      // 在此执行代码
  }
  

  La variable en la gramática es personalizada, debe ajustarse a la convención de nomenclatura, por lo general escribiremos esta variable como k o clave.

  for (var k in obj) {
        
        
      console.log(k);      // 这里的 k 是属性名
      console.log(obj[k]); // 这里的 obj[k] 是属性值
  }