Core basic content of Javascript

01. Scope and scope chain

Scope determines the accessibility of variables or functions. In JavaScript, there are two types of scope: local scope and global scope. There are three types of variables / functions with global scope:

1.Variables and functions defined at the outermost layer have global scope
2.Variables that do not declare direct assignment have global scope
3.In the browser, define window The properties and methods on the object have global scope

**Scope function**It refers to the variables defined inside the function, which can only be accessed inside the function.**Scope chain**It refers to the scope that the engine will nest in the outer layer when a variable cannot be found in the current scope(Parent function)Continue searching until the outermost scope (that is, the global scope) is searched. Such an ordered list is called scope chain. The front end of the scope chain must be the current scope.

As follows: c()Function needs printing name Variable value, c()Not inside name Variable, and then in the parent function b()Find in name Variables, b()Neither in the; Continue with the parent function of the parent function a()Looking for it, a()Function has name='jack'，Final printing jack. 

<script>
function a(){
    name\='jack'
    function b(){
        function c(){console.log(name)}
        c();
    }
    b();
}
a();//Output jack
</script>

After ES6, there are block level scopes, let and const: they cannot be declared twice in the same scope; Let and const can declare promotion unlike var; Let and const must be declared before use.

02 closure

We know that in js, the sub function can have access to the variables of the parent function, the variables of the parent function and the global variables. If the sub function is not destroyed, the variables on the whole scope chain will still be saved in memory and will not be released. In development, if we want to access the members of a function (parent function), we can let this function return a function (child function), and then obtain the internal members of the parent function through this child function. A simple Chestnut:

function user () {
    var name = 'jack'
    //Method, which can return the internal members of the parent function    
    return function getName () {
         return name
    }
}
var funcGetName = user()
console.log(funcGetName()) //Print jack  
funcGetName=null//Freeing memory for the entire scope chain

03 variable promotion and function promotion

1. Variable promotion (promote the declaration of the variable to the top of the variable scope)

function func(){
    console.log(a)//undefined
    var a=1;
    console.log(a)//1
}
func()
//The functions are similar as follows
function func2(){
    var a;
    console.log(a)//undefined
    a=1;
    console.log(a)//1
}
func2()

2. Function promotion (functions declared in functional form will promote the declaration and definition to the top of the scope)

**//Chestnut 1 Functional declaration, function promotion will promote the declaration and definition of the function to the top of the scope**
console.log(func) //Print function definition
func();           //Execution function

function func(){
    console.log('hello')
}

**//Chestnuts 2 Functional declarations take precedence over variable declarations**
console.log(func)//Print function definition instead of variable func=1  
function func (){
    console.log('hello')
}
var func=1

**//3. The function declared by the variable will not promote the definition**
console.log(func)//undefined
func();//func is not a function
var func=function (){
    console.log('hello')
}

04 arguments in function

Arguments is essentially an Array like Object object, which contains all the arguments of the function. When we are uncertain about the number of parameters, we can use arguments. Look at a chestnut that gets the maximum value of the argument:

function getmax(){
    console.log(arguments.length)//Number of arguments
    let max=arguments\[0\];
   for(i=0;i<arguments.length;i++){
        max\=max>arguments\[i\]?max:arguments\[i\]
    };
    return max;
}
console.log(getmax(10,2,-3,4,5,6))//Get maximum 10
console.log(getmax.length)//Number of formal parameters

05 prototype and prototype chain

Before understanding the prototype and prototype chain, first understand the common objects and function objects (all objects created through new Function() are function objects, and others are common objects.)

var o1 = {}; 
var o2 =new Object();
var o3 = new f1();

function f1(){}; 
var f2 = function(){};
var f3 = new Function('str','console.log(str)');

console.log(typeof f1); //function 
console.log(typeof f2); //function 
console.log(typeof f3); //function   
console.log(typeof o1); //object 
console.log(typeof o2); //object 
console.log(typeof o3); //object

Every object has**_ proto_ Property * * (prototype: the prototype object used to point to the constructor that created it. Person1. _ proto_ = = Person.prototype), However, only function objects have * * prototype * * (prototype object: ` ` when person is created, an instance object is created and assigned to the prototype attribute of Person.prototype object [Person.prototype] is an instance of constructor [person]).

End of prototype chain:

Function.prototype//Is an empty function, and all other prototypes are an Object object Object
//The prototype of a function prototype Object is the prototype Object of an Object
Function.prototype.\_\_proto\_\_==Object.prototype
//Object prototype object prototype is null
Object.prototype.\_\_proto\_\_//null

The type of prototype object of all constructors is object (regardless of class inheritance), except function (prototype object is an instance of constructor, function instances are functions, and the type of prototype object of all fuction is function). JS has a function called_ proto__ Is used to point to the prototype object of the constructor that created it. person1.__proto__ == Person.prototype

person.\_\_proto\_\_ What is it?   //Person.prototype
Person.\_\_proto\_\_ What is it?    //Function.prototype
Person.prototype.\_\_proto\_\_ What is it? //Object.prototype
Object.\_\_proto\_\_ What is it?           //Function.prototype
Object.prototype\_\_proto\_\_ What is it?  //Null. When creating a new instance of Object, the prototype is null

The formation of prototype chain really depends on__ proto__ Not prototype

var Animal = function(){};
var Dog = function(){};

 animal.price \= 2000;
 Dog.prototype \= animal;
 var tidy = new Dog();
 console.log(dog.price) //undefined    
　　dog Not in itself price Properties, and then find Dog.\_proto\_=Function.prototype,Fnnction.prototype either price Properties,  
　　Keep looking Function.prototype.\_proto\_=Object.prototype,Object.prototype either,  
　　Keep looking Object.prototype.\_proto\_=null，Can't find one undefined
 console.log(tidy.price) // 2000    
   tidy Not in itself price Properties, and then find tidy.\_proto\_=Dog.prototype=animal,  
　　animal have price Attribute 2000, print 2000

06 who does this point to?

In a word: This refers to the object that eventually calls the function. According to the application scenario, the direction of this can be divided into the following types:

**//1. The directly called function this points to Window**
function foo(){console.log(this)}
foo();//this-->Window

**//2. The function is called as the callback function of the built-in function of window: this points to window**
setTimeout(() => {
    console.log(this)
}, 1000);
**//3. Call through object instance**
var obj={
    name:"Common object",
    foo:function(){console.log(this)}
}
obj.foo()//this-->obj

**//4. As an element of the array, the function is called through the array subscript: this points to the array**
let arr=\[function(){console.log(this)},1,"hello"\];
arr\[0\]() //this-->arr

**//5\.  Function as a constructor, when called with the new keyword: this points to the new object**
function Person(){
    this.name='jack',
    console.log(this)
}
let person\=new Person()//This -- > newly created object

07 usage and difference of call, apply and bind

call, apply and bind all exist to change the context of a function when it is running (that is, to change the direction of this in the function). call/apply will execute the function immediately, and bind only changes the direction of this instead of executing. Look at a chestnut:

var mycalc = {
    add:function(n1,n2){
        console.log(n1+n2)
        console.log(this);
    }
}
var addfunc = mycalc.add;

**//1. Call this - > window directly**
addfunc(1,2); //3. It points to Window

**//this of apply, call and bind all point to the first parameter
//2.apply, the parameter list is an array**
addfunc.apply(mycalc,\[1,2\])//3,mycalc

**//3.call, variable length of parameter list**
addfunc.call(mycalc,1,2)

**//4.bind, the parameter list has an indefinite length, and returns a new function, which will not be executed automatically**
var newFunc= addfunc.bind(mycalc,1,2)
newFunc()//3,mycalc

**//Some usage scenarios**  
//Returns the maximum value of the array. this can be set to null without specifying the first parameter
 let arr=\[2,1,5,3,4\];
Math.max.apply(null,arr);

//Let the arguments class array have the characteristics of array
 function toArray(){
     console.log(\[\].slice.apply(arguments));
    }
 toArray(1,2,3,4,5)//\[1,2,3,4,5\]

Reference article:

　　[1]https://www.jianshu.com/p/dee9f8b14771

　　[2]https://segmentfault.com/a/1190000012772040?utm_source=tag-newest

This article is transferred from https://www.cnblogs.com/wyy1234/p/11443129.html#_label0_4 , if there is infringement, please contact to delete.