Prototype, prototype chain, scope, scope chain, closure

Believe to see the topic all know, these are JS millennium unchanged interview questions.

Prototype, prototype chain?

What is a prototype, prototype chain?

Prototype: Equivalent to a mold used to produce instance objects.

Prototype chain: The prototype object has a pointer to the constructor and the instance object has a pointer to the prototype object, forming a prototype chain that eventually points to NULL.

Why does it exist?

Prototype: it is the object oriented way in JS, that is to say, JS is object oriented based on prototype.

Prototype chain: is how JS implements inheritance.

Scope, scope chain?

What is scope, scope chain?

scope

The so-called scope is the scope of a variable or function.

So what are the scopes in JavaScript?

1. Global scope

All are global scopes except for variables defined in functions.

Here’s an example:

var a = 10;
function bar(){
    console.log(a);
}
bar();/ / 10
Copy the code

The above a is the global variable and can be accessed anywhere. However the goose,

var a = 10;
function bar(){
    console.log(a);
    var a = 20;
}
bar();//undefined
Copy the code

What the hell? Undefined?

Yes, you read that right. Since the function’s variable is searched first to see if a exists, it does, and since A is pre-resolved (promoted), the promoted A is bound to the scope of A here, so the result is undefined.

2. Local scope

A variable declared by var in a function.

Here’s an example:

var a = 10;
function bar(){
   var a  = 20;
    console.log(a);
}
bar();/ / 20
Copy the code

3. No block-level scope (up to ES5), ES6 has block-level scope

Prior to ES6, blocks other than functions had no block-level scope.

Common classic examples:

for(var i=0; i<4; i++){ setTimeout(function(){
    	console.log(i);
    },200);
}
/ / 4 4 4 4
Copy the code

Solutions:

for(var i=0; i<4; i++){ (function(j){
            setTimeout(function(){
    	console.log(j);
    },200);
    })(i)
}
/ / 0 1 2 3
Copy the code

The scope chain

Variables with the function of the elder level up the search, until found, can not find an error, this process is the role of the scope chain.

var num = 30;
function f1(){
    var num  = 20;
    function f2(){
        var num = 10;
        function f3(){
            var num = 5;
            console.log(num);
        }
        f3();
    }
   f2();
}
f1();
Copy the code

closure

Closure: a way of privatizing data and methods in JS. An inner function can call the variables and methods of an outer function.

Classic interview questions

If there is such a need

go(‘l’) -> gol
go()(‘l’) -> gool
go()()(‘l’) -> goool

var go = function (a) {
var str = 'go';
    var add0 = function (a) {
    	str += 'o';
    	return a ? str += a : add0;// Smart use
    }
	return a ? str += a : add0;// Smart use
}
console.log(go('l'));//gol
console.log(go()('l'));//gool
console.log(go()()('l'));//goool
Copy the code

inheritance

Now that we’re talking about inheritance. Inheritance means that an object can share some properties of its parent object. So why inheritance? For example, in the previous problem, the Shape Shape has a vertex property, which can be inherited by triangles and rectangles without needing to be redefined. So let’s talk about inheritance issues in JavaScript before ES6 and after ES6.

Before the ES6

Combination of inheritance

function Parent(name, age) {
    this.name = name;
    this.age = age;
}  
Parent.prototype.getName = function() {
    return this.name;
}
function child(name, age, sex) {
    Parent.call(this, name, age);
    this.sex = sex;
}

child.prototype = new Parent()
var c1 = new child('zenquan'.'23'.'M')
console.log(c1.getName())
console.log(c1)
Copy the code

The advantage of this inheritance method is that the constructor can pass parameters and will not be shared with the reference attributes of the parent class, and the function of the parent class can be reused. However, there is also a disadvantage that the parent class constructor is called when the parent class function is inherited, resulting in more unnecessary parent class attributes on the prototype of the subclass, resulting in a waste of memory.

Parasitic combinatorial inheritance

function parent(name, age) {
    this.name = name;
    this.age = age;
}  
parent.prototype.getName = function() {
    return this.name;
}

function child(name, age, sex) {
    parent.call(this, name, age);
    this.sex = sex;
}

child.prototype = Object.create(parent.prototype, {
    constructor: {
        value: child,
        enumerable: true.writable: true.configurable: true}})var c1 = new child('zenquan'.23.'M');

console.log(c1.getName())
console.log(c1)
Copy the code

The core of the inheritance implementation above is to assign the prototype of the parent class to the child class, and set the constructor to the child class, which not only solves the problem of useless parent class attributes, but also can correctly find the constructor of the child class.

Class inheritance after ES6

Both types of inheritance are solved by prototypes. In ES6, we can use class to implement inheritance, and it is easy to implement

class parent {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    getName() {
        return this.name; }}class child extends parent {
    constructor(name, age, sex) {
        super(name, age);
        this.sex = sex; }}var c1 = new child('zenquan'.23.'M');
console.log(c1);
Copy the code

Prototype, prototype chain, scope, scope chain, closure