A brief introduction to Javascript reference types_Basic knowledge

Introduction
1. Reference type
The reference type is an internal type in javascript. It is mainly used as a reference, replacing a variable or function. Of course, when the real value is needed, the real value can be found through it.

2. Structure of reference type
The value of the reference type is composed of two parts. One is the object to which the value of the reference type refers. Here we call it base. The second is the object name that refers to the object in base. Represented in pseudo code:

Copy code The code is as follows:

var valueOfReferenceType = {
base: ,
propertyName:
};

3. Usage scenarios
There are two usage scenarios for reference types:

(1)When processing an identifier

The

identifier is a variable name, a function name, a function parameter name, and an unrecognized property name in a global object.

(2) When dealing with a property accessor

Copy code The code is as follows:

var foo = 10;
function bar( ) {}

In the intermediate result of the operation, the reference type corresponds to

Copy code The code is as follows:

var fooReference = {
base: global,
propertyName: 'foo'
};

var barReference = {
base: global,
propertyName: 'bar'
};

It is still necessary to explain the base here. In JavaScript, all objects or functions have their own objects. Anyone who has read my previous article knows that there is a variable object in each execution context to manage the execution context. variable or function.

So, when dealing with identifiers:

In the global context, it goes without saying that base === globalVO === gloabal

In the execution context of the function, base === VO/AO

But the processing object properties are:

This is even simpler, base === owerObject

4. Get the real value of the reference type
As we said at the beginning, the reference type is just a reference, but it does not store the real value. When the real value is needed, it can be obtained through a series of internal algorithms. We can describe this algorithm with simple pseudocode:

Copy code The code is as follows:

function GetValue(value) {

if (Type(value) != Reference) {
return value;
}

var base = GetBase(value);

if (base === null) {
throw new ReferenceError;
}

return base.[[Get]](GetPropertyName(value));

}

The internal [[Get]] method returns the real value of the object's properties, including analysis of inherited properties in the prototype chain. So through GetValue we can also easily obtain the real value of the reference type. For example:

Copy code The code is as follows:

GetValue(fooReference); // 10
GetValue (barReference); // function object "bar"

So when do we need to get the real value of the reference type?

Generally, when a reference type needs to be assigned, participate in an operation, or is called, the real value needs to be obtained through the GetValue method. (Note: The object obtained through GetValue is no longer a reference type)

Relationship between reference type and this
Reference type is mainly closely related to this point in function context, and it looks quite different at different times, so we introduce reference type to specifically explain this in function context. Performance.

The general rules for determining this value in function context are as follows:

In a function context, this is provided by the caller and is determined by the way the function is called. If the left side of the calling bracket () is a value of reference type, this will be set to the base object of the reference type value. In other cases (any other properties different from the reference type), this value will be null. However, there is no actual situation where the value of this is null, because when the value of this is null, its value will be implicitly converted to a global object. Note: In the 5th edition of ECMAScript, conversion to global variables is no longer forced, but the value is assigned to undefined.

Below we will discuss three situations based on the difference on the left side of the calling bracket:

(1) The left side of the calling bracket is the value of reference type

This does not require too much analysis. The base object is the this value. Just find the base. If it is declared under a global variable, it points to the global object.

Copy code The code is as follows:

var myObject = {
foo : function() {
            console.log(this);
myObject.foo(); //There is no doubt that the base of foo is myObject, so this in the foo method points to myObject.

(2) The left side of the calling bracket is a reference type value, but this value is null

Copy code The code is as follows:function myFunction() {

var foo = function (){

console.log(this);
}
foo(); //AO.foo() => null.foo()
}

myFunction(); //Output: Window {top: Window, window: Window...}

When an internal function is called, the base of the internal function should be the active object (OA) in the current execution context. However, when OA is used as the base inside JavaScript, it is treated as null. Of course, JavaScript does not allow this to be null. If this happens, base is set to the global object (this is the source of the design error in the previous this function calling pattern). So in this case, this points to the global object.

(3) Call the value on the left side of the bracket that is not a reference type

Copy code The code is as follows://Simple example

(function ( ) {

console.log(this); // null => global
})();

// More complex example
var foo = { bar: function () {

console.log(this);
}
};

foo.bar(); // Reference, OK => foo
(foo.bar)(); // Reference, OK => foo

(foo.bar = foo .bar)(); // global
(false || foo.bar)(); // global
(foo.bar, foo.bar)(); // global

When the left side of the calling bracket is not a reference type but other types, this is automatically set to null and the result is a global object.

In the first example, the immediate function, the left side of the function call parenthesis is an expression, not a reference.

The second example is much more complicated, let’s analyze it one by one:

foo.bar(), there is no doubt about this, base is foo, and this points to foo.

(foo.bar)(), a parenthesis is used here, which acts as a grouping symbol, that is, it will not force the reference type to execute the GetValue method, and its execution result is exactly the same as above.

The last three, inside the parentheses, are the assignment operation, the OR operation and the comma operation. They will force the reference type to execute the GetValue method, thereby returning a function object. In this way, the left side of the function call parentheses is no longer a reference type, so this points to the global object.

Summary

Regarding reference types, I actually don’t know much about this. I just saw this chapter in Uncle Tom’s blog. In order to explain the value principle of this in the function call mode, I made a special analysis. This analysis is not allowed. Well, I have always thought that there should be some relationship between reference types and reference-by-value. Unexpectedly, it is only used in bolg to assist in understanding this. As for whether there was a relationship between the two before, and if there was a relationship, what kind of relationship it was, I still need to continue to study and research.

I hope you can communicate more. I would like to express my gratitude to Uncle Tom.