preface

We talked about scopes in the last JavaScript Basics – Closures article, but only briefly. Let’s take a closer look at the scope in JavaScript: this

introduce

  • Definition: a property of the current execution context (global, function, or eval) that, in non-strict mode, always refers to an object and can be any value in strict mode.
  • Understanding: Scope (this) gets all the parameters and methods of the current environment
  • Call scenario: This value is confirmed at execution time, not at definition
  • There are several common ways
    • Global object Window: When defining a global variable, the this of the variable refers to the window
    • Implicitly passed in: When defining methods using objects, the object is passed in as a scope by default, with this referring to the object
    • Show incoming: a pass of this using call, apply, and bind
    • New instance changes: the constructor generates the instance, creating a new block of memory and generating this to refer to the newly created constructor

extension

Var, let, const

Before ES6, only var was defined as a global variable. In ES6, we added two new methods: let and const.

  • ES5 scope: global scope, function scope. There is no concept of block scope
  • Block-level scopes have been added in ES6. Block scopes are included by {}. The {} in the if and for statements are also block scopes
  • The difference between let and const in ES6 is that a variable defined after const cannot be changed. Let can be changed

Since there is no block-level scope in ES5, they can be accessed across blocks, so variables defined using var in {} are accessible outside the block, and variables defined using var in global scope are mounted in the Window property by default

Frequently asked Questions

Since var has no block-level scope, their I’s are all hung on the window property by default, and setTimeout is an asynchronous event that will not be executed until all synchronous events are completed, so in the first way they call I’s in the same scope. The I defined by let has block-level scope, so they are independent of each other

for(var i = 0; i <10; i++) {setTimeout(function() {
        console.log(i)
    }, 0)}// Output 10 10s

for(let i = 0; i <10; i++) {setTimeout(function() {
        console.log(i)
    }, 0)}// Output 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Copy the code

Code sample

Global object

// In global variables, the variable is automatically mounted to the window property
var name = 'zhangsan'
console.log(name === window.name) // ture
console.log(this.name === window.name) // ture
Copy the code

Implicit incoming

// This is defined at execution. When a function is executed, this inside the function depends on the scope passed in before the function
function fn() {
    console.log(this.name)
}
fn() // undefined, calling the method directly is equivalent to window.fn(), so its this points to window
var obj = {
    name: 'zhangsan'.fn: fn
}
obj.fn() // 'zhangsan', calling the method directly is equivalent to window.obj.fn(), so its this points to obj
Copy the code

Call, apply, bind passed in

// Pass the external this to the function
function fn1() {
    console.log(this.name)
}
function fn2() {
    this.name = 'lisi'
    / / call the incoming
    fn1.call(this)   // lisi
    / / the apply incoming
    fn1.apply(this)  // lisi
    / / to bind to
    var f = fn1.bind(this)
    f()   // lisi
}
fn2()
Copy the code

New instance change

function People(name) {
    this.name = name
    this.age = 20
}
var p1 = new People('zhangsan')
var p2 = new People('lisi')
console.log(p1.name)   // zhangsan
console.log(p2.name)   // lisi
Copy the code