[JS Interaction Basics] Several special objects Global, Window, Arguments, this

1. Global object

All properties and methods defined in the global scope are properties of the Global object.
Global objects cannot be used directly, nor can they be created using the new operator.
The Global object is created when the JavaScript engine is initialized, and its methods and properties are initialized.
The browser implements the Global object as part of the window object. Therefore, all global properties and functions are properties and methods of the window object.
See the document for details: http://www.w3school.com.cn/jsref/jsref_obj_global.asp
Properties of the Global object
- Object constructor Object
- Function constructor Function
- Date constructorDate
- Array constructorArray
- RegExp constructor RegExp
- Error constructorError
- String constructor String
- Boolean constructor Boolean
- Number constructorNumber
- undefined special value undefined
- NaN special value NaN
Methods of Global object:
- encodeURI()
  1. Encode the entire URI.
  2. Only spaces are encoded, colons, forward slashes, question marks, pound signs, etc. are not encoded.
  3. The result after encoding: Except for the spaces being replaced with %20, nothing else has changed.
  4. Corresponding decoding method: decodeURI()
- encodeURIComponent()
  1. Encode part of the URI (referring to the part after removing the protocol, host address, and port).
  2. Encode any non-standard characters.
  3. Corresponding decoding method: decodeURIComponent()
- eval()
  1. When the parser finds that the eval() method is called in the code, it will parse the incoming parameters as actual JavaScript statements.
- Description of URI encoding method
  1. Valid URIs cannot contain certain characters (for example: spaces, etc.).
  2. Replace all invalid characters with a special UTF-8 encoding so that the browser can accept and understand it.

Two, window object

Variables and functions declared in the global scope are properties and methods of the window object.
Reference document: http://www.w3school.com.cn/jsref/dom_obj_window.asp

3. arguments object

The arguments object is actually a built-in array-like object of the containing function
Each function has an arguments attribute, which represents the set of actual parameters of the function. The actual parameters here are the focus, which is the set of parameters actually passed in when executing the function. arguments is not an array but an object, but it is very similar to an array, so it is usually called an array-like object. When you see the array-like object in the future, it actually means arguments. The arguments object cannot be created explicitly, it is only available at the beginning of the function.
arguments also have attributes callee, length and iterator Symbol.
arguments also has a length attribute, arguments.length is the number of actual parameters of the function, and arguments[length] can be used to display the call parameters
The arguments object can detect the number of parameters and simulate function overloading
Reference document: http://www.w3school.com.cn/js/pro_js_functions_arguments_object.asp

Code understanding :

The first point: the arguments object: you can access all parameters in the function, actual parameters

function f1(){
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
}

f1(12,23,45);   //12 34 45

Second point: In normal mode, the arguments object can be modified at runtime

function f2(a,b){
    arguments[0] = 10;
    arguments[1] = 20;
    return a + b;
}

console.log(f2(4,6));   //30

The third point: In strict mode, the arguments object cannot be modified at runtime, and modifying the arguments object will not affect the actual function parameters
```
function f3(a,b){
    'use strict';
    arguments[0] = 10;
    arguments[1] = 20;
    return a + b;
}

console.log(f3(3,6));   //9
```
The fourth point: through the length attribute of the arguments object, the number of actual parameters can be judged
```
function f4(){
    console.log(arguments.length);
}

f4(2,3,4,5);    //4
f4(1);      //1
f4();       //0
```

Fifth point: arguments is an object, not an array. To convert to an array, you can use slice and fill in the new array one by one.

var arr = Array.prototype.slice.call(arguments);
console.log(typeof arr);

var arr2 =  [];
for(var i = 0; i<arguments.length;i++){
	arr2.push(arguments[i]);
}
console.log(typeof arr2);

Sixth point: the callee attribute of arguments can return the corresponding original function to achieve the effect of calling its own function, but it is not applicable in strict mode
```
var f5 = function(){
    console.log(arguments.callee===f5);    //true
    console.log(arguments.callee===f6);    //false
}

var f6;
f5();  //返回原函数，调用自身
```

Application of arguments

The first point: arguments.callee refers to the function itself. We can borrow arguments.length to check whether the number of actual parameters and formal parameters is consistent.

function add(a, b) { 
    var realLen = arguments.length; 
    console.log("realLen:", arguments.length); 
    var len = add.length; 
    console.log("len:", add.length); 

    if (realLen == len) { 
    console.log('实参和形参个数一致'); 
} else { 
	console.log('实参和形参个数不一致'); 
} 

}; 

add(11,22,33,44,66);

The second point: we can borrow arguments.callee to make anonymous functions recursive

var sum = function(n) { 
    if(n == 1) { 
        return 1; 
    } else { 
        return n + arguments.callee(n-1); 
    } 
} 
console.log("sum =", sum(5));

The third point: Write a function to calculate the sum of several numbers passed in (cannot be displayed with an array)

function add() { 
    var len = arguments.length; 
    var sum = 0; 
    for (var i = 0; i < len; ++i) { 
    	sum += arguments[i]; 
    } 
    return sum; 
}; 
add(11,22,33,44,66);

4. this object

The this object is bound based on the execution environment of the function at runtime. In the global function, this is equal to window; when the function is called as a method or method of an object, this is equal to that object.
Special Note: The execution environment of anonymous functions is global, so the this object in anonymous functions usually points to the window object!!!

Five ways to use this in JS

Use this in general function methods to refer to the global object

function test(){
    this.x = 1;
    alert(this.x);
}
test(); // 1

Use this in the event function to refer to the element that executes the event function
```
ele.onclick = function(){
	alert(this) //元素ele
}
```

As an object method call, this refers to the superior object

function test(){
  alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1

Called as a constructor, this refers to the new object

function Test(){
	this.x = 1;
}
var o = new Test();
alert(o.x); // 1
//运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：
var x = 2;
function Test(){
	this.x = 1;
}
var o = new test();
alert(x); //2

apply call, the apply method is to change the calling object of the function. The first parameter of this method is the object that calls this function after the change. This refers to the first parameter.

var x = 0;
function test(){
	alert(this.x);
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //0
//apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。如果把最后一行代码修改为
o.m.apply(o); //1

Note : When the function is called, the browser will pass in two implicit parameters every time

The context object of the function this
Object arguments that encapsulate actual parameters