this, JS scope and scope chain

1. What is scope?

In Javascript, scopes are divided into  and  全局作用域函数作用域

• Global scope: The code can be accessed anywhere in the program, and the built-in properties of the window object belong to the global scope

• Function scope: can only be accessed in fixed code fragments

 

The scope has a superior-subordinate relationship, and the determination of the superior-subordinate relationship depends on the scope in which the function is created. As above, the bar function is created under the fn scope, then the "fn scope" is the superior of the "bar scope".

The biggest use of scope is to isolate variables, and variables with the same name in different scopes will not conflict.

2. What is the scope chain?

In general, a variable gets its value in the scope of the function that created the variable

However, if no value is found in the current scope, it will be checked in the upper scope until the global scope is found. The chain formed by such a search process is called a scope chain.

var x = 10;

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

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

show(fn);

 three.this

this A keyword is an internal object automatically generated when the function is running, it can only be used inside the function, and always points to the object that calls it.

1. Example 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. thisDuring the execution of the function, thisonce it is determined, it cannot be changed

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

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

fn();

Four. this binding rules

(1) Default binding (exclude strict mode first)

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

(2) Implicit binding - the function can also be called as a method of an object, which thisrefers to the superior object

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

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

obj.m(); // 1

This function contains multiple objects. Although this function is called by the outermost object, it thisonly points to the object of its upper level.

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

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

At this time , thisit points to window, what needs to be remembered is that thisit always points to the object that called it last. Although fnit is the method of the object b, it is not executed when fnit is assigned to , so it finally points tojwindow

(3) Explicit modification

apply()、call()、bind()It is a method of the function, and its function is to change the calling object of the function. Its first parameter represents the changed object that calls this function. Therefore, thisit refers to this first parameter at this time.

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

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