This is the 20th day of my participation in the More text Challenge. For more details, see more text Challenge

Front end pickles, those years caused by THE MURDER of JS

1. Var variable promotion

1.1 Topic 1, what is printed in the following program?

console.log(a);
var a = 13;
function fn(){
    console.log(a);
    var a = 12;
}
fn()
console.log(a)
Copy the code

The first print is undefined, and the second print is undefined. The second print is undefined, and the third print is undefined. The third print is undefined

1.2 the topic 2

var foo = 1;
function fn(){
  if(! foo){var foo = 10;
  }
  console.log(foo)
}
fn()
Copy the code

What does this print, please?

If (! Foo), it’s not! 1 it! Undefined, so true, so print 10

2. The closure

What is a closure? Simply put, it is a nested function within a function.

2.1Problem number one, print the test functionvar test = (
    function(i){
        return function(){
            console.log(i*=2)}}) (2)
test(5)
Copy the code

Test = 1; test = 2; test = 2;

test = function(i = 2){
  return function(){
     console.log(i = i*2)}}Copy the code

So the test(5), 5 argument is confusing, it just prints 2*2 = 4

A and A

let a =0, b =0;
function A(a){
    A = function(b){
        console.log(a + b ++)
    }
    console.log(a++)
} 
A(1);
A(2);
Copy the code

Analysis: the first is to run A (1), so A be rewritten, print + at the same time, because + follow after the first use of the principle, A (1) print 1, then A (2), have been rewritten to note here A, now run print should be A + b++; Because a is not found in the scope of the current function, so I go up to the next level, so a is 2, and I put in b=2, so I print out 4;

2.3 This and Closure synthesis (360 written examination)

let num = 10;
let obj = {
   num: 20}; obj.fn = (function(num){
  this.num = num *3;
  num++;
  return function (n){
    this.num += n;
    num ++;
    console.log(num);
  }
})(obj.num)

let fn = obj.fn;
fn(5);
obj.fn(10);
console.log(num,obj.num,window.num)
Copy the code

Analysis:

Num = 20; this.num = 20*3; this.num = 20*3; this.

In js, the function “this” is not defined at the time of definition, but is determined by the caller. Obviously, the function that calls itself is called window, so this refers to window. Therefore, window.num = 60

(num++); (num++); (num++); (num++); (num++); (num++); (num++);

Let fn = obj.fn; Fn (5) = window.fn (5) = window.fn (5) = window.fn (5) = window.fn (5) = window.fn (5) = window.fn (5) = window.fn (5); Num in scope B is going to be found in scope A so it will print only 21+1 = 22

To obj. Fn (10); And let fn = obj.fn; Fn (5) is the same, but the main difference is that this refers to obj. Fn (10) is the B function, so this. Obj. Num = 20 + 10 = 30, 21+1=23

So the whole print is 10, 30, 65

The order of printing is (i.e. the answers) :

10,30,65 22, 23Copy the code

3. Prototypes and prototype chains

3.1 Foundation test

function Fn(){
  this.x = 100;
  this.y = 200;
  this.getX = function(){
     console.log(this.x)
  }
}
Fn.prototype.getX = function(){
  console.log(this.x);
}
Fn.prototype.getY = function(){
  console.log(this.y);
}

const f1 = new Fn();
const f2 = new Fn();

console.log(f1.getX === f2.getX);
console.log(f1.getY === f2.getY);
console.log(f1.__proto__.getY === Fn.prototype.getY);
console.log(f1.getX === Fn.prototype.getX);
console.log(f1.constructor)
console.log(f1.constructor === Fn);
console.log(Fn.prototype.__proto__.constructor);

f1.getX();
f2.__proto__.getX();
f2.getY();
Fn.prototype.getY();
Copy the code

False, true, false, print Fn body, true, Object

100、 undefined、 200、 undefined

3.2 CLASS CLASS

Look at the following code:

class Fn{
    constructor(){
        this.x = 100;
        this.y = 200;
        this.getX = function(){
            console.log(this.x)
        }
    }
    getX(){
        console.log(this.x);
    }
    getY(){
        console.log(this.y); }}const f1 = new Fn();
const f2 = new Fn();

console.log(f1.getX === f2.getX);
console.log(f1.getY === f2.getY);
console.log(f1.__proto__.getY === Fn.prototype.getY);
console.log(f1.getX === Fn.prototype.getX);
console.log(f1.constructor)
console.log(f1.constructor === Fn);
console.log(Fn.prototype.__proto__.constructor);

f1.getX();
f2.__proto__.getX();
f2.getY();
Fn.prototype.getY();
Copy the code

The print result is the same as 3.1; Class is a syntax sugar. Constructor () is the constructor in 3.1

3.3 About methods defined inprototypeThe thinking on the

From the examples in 3.1 and 3.2, it is clear that the public methods defined in the constructor are not equal after instantiating the object.

That is to say,

function Fn(){
  this.x = 100;
  this.y = 200;
  this.getX = function(){
     console.log(this.x)
  }
}
Copy the code

It’s the same thing as this

function Fn(){
  this.x = 100;
  this.y = 200;
  this.getX =new Function(){
     console.log(this.x)
  }
}
Copy the code

It’s not necessary to open a new address every time you instantiate it. To solve this problem, you can place the function outside the constructor, but this creates a new problem, but the global scope is messed up. Prototype solves this problem

So in 3.1 and 3.2, console.log(f1.gety === F2.gety); Reason why is true