esto, alcance JS y cadena de alcance

1. ¿Qué es el alcance?

En Javascript, los ámbitos se dividen en y 全局作用域函数作用域

Ámbito global: se puede acceder al código desde cualquier parte del programa, y las propiedades integradas del objeto ventana pertenecen al ámbito global.
Alcance de la función: solo se puede acceder en fragmentos de código fijo

El ámbito tiene una relación superior-subordinado, y la determinación de la relación superior-subordinado depende del ámbito en el que se crea la función. Como arriba, la función de barra se crea bajo el alcance de fn, luego el "alcance de fn" es el superior del "alcance de barra".

El mayor uso del alcance es aislar variables, y las variables con el mismo nombre en diferentes alcances no entrarán en conflicto.

2. ¿Qué es la cadena de alcance?

En general, una variable obtiene su valor en el ámbito de la función que creó la variable

Sin embargo, si no se encuentra ningún valor en el alcance actual, se comprobará en el alcance superior hasta que se encuentre el alcance global.La cadena formada por tal proceso de búsqueda se denomina cadena de alcance.

var x = 10;

function fn(){
    console.log(x);
}

function show(f){
    var x = 20;
    f();    // 10 
}

show(fn);

tres.esto

this Una palabra clave es un objeto interno generado automáticamente cuando la función se está ejecutando, solo se puede usar dentro de la función y siempre apunta al objeto que lo llama.

1. Ejemplo 1

   function baz() {
      // 当前调用栈是：baz
      // 因此，当前调用位置是全局作用域

      console.log("baz");
      bar(); // <-- bar的调用位置
    }

    function bar() {
      // 当前调用栈是：baz --> bar
      // 因此，当前调用位置在baz中

      console.log("bar");
      foo(); // <-- foo的调用位置
    }

    function foo() {
      // 当前调用栈是：baz --> bar --> foo
      // 因此，当前调用位置在bar中

      console.log("foo");
    }

    baz(); // <-- baz的调用位置

2. thisDurante la ejecución de la función, thisuna vez determinada, no se puede modificar

var a = 10;
var obj = {
  a: 20
}

function fn() {
  this = obj; // 修改this，运行后会报错
  console.log(this.a);
}

fn();

Cuatro.Estas normas vinculantes

(1) Enlace predeterminado (excluya primero el modo estricto)

var name = 'Jenny';
function person() {
    return this.name;
}
console.log(person());  //Jenny
//调用函数的对象在游览器中位window，因此this指向window，所以输出Jenny

(2) Enlace implícito: la función también se puede llamar como un método de un objeto, que thisse refiere al objeto superior

function test() {
  console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;

obj.m(); // 1

Esta función contiene varios objetos. Aunque esta función es llamada por el objeto más externo, thissolo apunta al objeto de su nivel superior.

   var o = {
      a: 10,
      b: {
        fn: function () {
          console.log(this);// fn:ƒ()

          console.log(this.a); //undefined
        }
      }
    }
    o.b.fn();

En este momento , thisapunta a window, lo que hay que recordar es que thissiempre apunta al objeto que lo llamó en último lugar, aunque fnes el método del objeto b, no se ejecuta cuando fnse le asigna , por lo que finalmente apunta ajwindow

(3) Modificación explícita

apply()、call()、bind()Es un método de la función, y su función es cambiar el objeto de llamada de la función. Su primer parámetro representa el objeto modificado que llama a esta función. Por lo tanto, thisse refiere a este primer parámetro en este momento.

    var x = 0;
    function test() {
      console.log(this.x);
    }

    var obj = {};
    obj.x = 1;
    obj.m = test;
    obj.m.apply(obj) // 1