isso, escopo JS e cadeia de escopo

1. O que é escopo?

Em Javascript, os escopos são divididos em  e  全局作用域函数作用域

• Escopo global: o código pode ser acessado em qualquer lugar do programa e as propriedades internas do objeto janela pertencem ao escopo global

• Escopo da função: só pode ser acessado em fragmentos de código fixos

 

O escopo possui uma relação superior-subordinado, e a determinação da relação superior-subordinado depende do escopo em que a função é criada. Como acima, a função de barra é criada sob o escopo fn, então o "escopo fn" é o superior do "escopo de barra".

A maior utilidade do escopo é isolar variáveis, e variáveis ​​com o mesmo nome em escopos diferentes não entrarão em conflito.

2. Qual é a cadeia de escopo?

Em geral, uma variável obtém seu valor no escopo da função que criou a variável

No entanto, se nenhum valor for encontrado no escopo atual, ele será verificado no escopo superior até que o escopo global seja encontrado.A cadeia formada por esse processo de pesquisa é chamada de cadeia de escopo.

var x = 10;

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

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

show(fn);

 três.isso

this Uma palavra-chave é um objeto interno gerado automaticamente quando a função está sendo executada, ela só pode ser usada dentro da função e sempre aponta para o objeto que a chama.

1. Exemplo 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 a execução da função, thisuma vez determinada, não pode ser alterada

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

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

fn();

Quatro. estas regras vinculativas

(1) Ligação padrão (exclua primeiro o modo estrito)

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

(2) Ligação implícita - a função também pode ser chamada como um método de um objeto, que thisse refere ao objeto superior

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

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

obj.m(); // 1

Esta função contém vários objetos. Embora esta função seja chamada pelo objeto mais externo, ela thisapenas aponta para o objeto de seu nível superior.

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

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

Neste momento , thisele aponta para window, o que precisa ser lembrado é que thisele sempre aponta para o objeto que o chamou por último. Embora fnseja o método do objeto b, ele não é executado quando fné atribuído a , então ele finalmente aponta parajwindow

(3) Modificação explícita

apply()、call()、bind()É um método da função e sua função é alterar o objeto de chamada da função. Seu primeiro parâmetro representa o objeto alterado que chama essa função. Portanto, thisrefere-se a este primeiro parâmetro neste momento.

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

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