1. About this
This in JS is a very mysterious thing, about what this is, a relatively concise statement on the Internet is the context of the function execution. But sometimes there are special situations where you can’t immediately see what this is. In order to understand each particular case thoroughly, one has to go into principle. The following are the records related to this principle summarized by myself after learning this principle of Teacher Ruan Yifeng. Reference: Ruan Yifeng — This principle
Code Example 1:
var x = 1;
function foo() { console.log(this.x); } foo(); // ---> 1 (1) var obj = { x: 2, foo: foo }; obj.foo(); / / -- - > 2 (2)Copy the codeTo understand how this works, start with object creation. What happens when an object is created and then assigned to a variable? Such as:
Code Example 2:
var obj = {
x: 2
}; Copy the codeIn the above code, we first create an object with an attribute named ‘x’ and a value of 2, and then assign the object to the variable obj. The value of obj is not the object itself, but the address of the object stored in memory.
In addition, for each property of an object, there are property descriptors. These descriptors include: Attribute value ==> [[value]], can be modified ==> [[writable]], can be traversed ==> [[Enumerable]], configurable ==> [[64x]] For this object up here, the value of x is 2.
If the value of a property of an object is not a primitive type but a function, that property also stores the function’s storage address, not the function itself, and functions can be executed separately, which means that the function can be called from different places.
At (1) of “Code Example 1”, the function is called separately, and this represents the global object if the runtime environment is Node. If the runtime environment is a browser, this stands for Window. If (1) is executed, this.x will refer to x of the global environment, which is 1, so the printed result is 1. And of course this is all in non-strict mode, if it’s strict mode, this is undefined.
At (2) of “code Example 1”, the function foo is assigned to the property foo of obj in the context of obj, so this.x refers to x in the context of obj, which is 2, so it prints 2.
Reference:
www.ruanyifeng.com/blog/2018/0…
2. Array. Prototype. Slice. The use of call () method
This method is often used with arguments of the function to convert arguments to a real array. We know that the function of the arguments is an Array class set, has the length attribute, Array. Prototype. Slice. The call () will has the length attribute object into an Array, such as:
Var a = {length: 2, 0:'first', 1:'second'}; / / a length attribute, length is 2, the zeroth element is first, the first is the second console. The log (Array) prototype. Slice. Call (a, 0)); / / /"first"."second"] console.log(Array.prototype.slice.call(a,1)); / / /"second"Var a={0:'first', 1:'second'}; / / remove the length attribute, and returns an empty Array. The console log (Array) prototype. Slice. Call (a, 0)); / / []Copy the code function test() {
console.log(Array.prototype.slice.call(arguments, 0));
}
test('a'.'b', 1, 2, 3); / / /"a"."b", 1, 2, 3]Copy the codeIn addition, the use of []. Slice. The effect of the call (the arguments, 0) implementation with Array. The prototype. Slice. The call ().
Reference:
Blog.csdn.net/i10630226/a…
3. Variable promotion
Before the formal execution of the JS script, the code will be precompiled and reorganized according to certain rules before the formal execution of the code. Precompilation can be divided into four steps. By analyzing the code in these four steps, you can clarify the mechanism of variable promotion. The steps are as follows:
- Create an AO object (execution context);
- Find all variables and formal parameters declared by var in the function, save the value as undefined;
- Correspond formal parameters to actual parameters;
- Find all the function declarations and match the function names to the functions.
Case analysis:
function demo1 (a) {
console.log(a);
console.log(b);
a = 10;
var a;
var b;
function b(){
console.log(a);
}
console.log(b);
c = 12;
console.log(c);
var c = function d() {};
}
demo1(2);Copy the codeStep 1: Create an empty AO before demo1 is executed:
AO:
{ }Copy the codeStep 2: Find the parameters and var, the corboreal parameter a, and var a, which is the equivalent of declaring a variable a inside the function. The AO object becomes:
AO:
{
a: undefined,
b: undefined,
c: undefined
}Copy the codeStep 3: match the parameter to the argument. The parameter passed here is 2, so:
AO:
{
a: 2,
b: undefined,
c: undefined
}Copy the codeVar c = function d() {}; Is a function expression. Here function B overwrites the original variable B, so:
AO:
{
a: 2,
c: undefined,
b: function b(){}
}Copy the codeThe result of executing the above code is obvious
function demo1 (a) {
console.log(a); // 2
console.log(b); // function b(){ ... }
a = 10;
var a;
var b;
function b(){ console.log(a); } console.log(b);} console.log(b);} console.log(b); //function b() {... } c = 12; console.log(c); Var c = 12function d() {};
}
demo1(2);Copy the code4. Function arguments
In js, the number of parameters of a function can be different from the number of arguments, for example:
1. If the actual parameter is less than the parameter, the parameter whose value is not passed is undefined
function demo2 (a, b) {
console.log('a: ' + a + '; ' + ' b: '+ b); } demo2(3); // a: 3; B: undefined. No error is reported and can still be executedCopy the code2. If there are more actual parameters than parameters, the extra parameters are ignored
function demo2 (a, b) {
console.log('a: ' + a + '; ' + ' b: ' + b);
}
demo2(3, 4, 5); // a: 3; b: 4Copy the code3. Parameter values change synchronously with arguments[I]
function demo2 (a, b) {
arguments[0] = 5;
console.log('a: ' + a + '; ' + ' b: ' + b); // a: 5; b: 4
console.log(a); // 5
}
demo2(3, 4);Copy the codeArguments [I] can’t be changed if arguments[I] are not used
function demo2 (a, b) {
arguments[1] = 5;
console.log('a: ' + a + '; ' + ' b: ' + b); // a: 3; b: undefined
console.log(b); // undefined
}
demo2(3);Copy the code