JavaScript Preparsing, Objects

Keywords: Javascript Front-end ECMAScript

1. Pre-resolution

1. Variable Pre-parsing and Function Pre-parsing

JavaScript code is executed by the JavaScript parser in the browser. The JavaScript parser runs JavaScript code in two steps: pre-parsing and code execution.

  • Pre-parsing: In the current scope, variables with var and function declarations are declared or defined in memory by default by the browser before the JS code is executed.
  • Code execution: Execute JS statements from top to bottom.

Pre-parsing only occurs on variables and functions defined by var. Learning pre-parsing lets us know why accessing a variable's value is undefined before it is declared and why a function can be called before it is declared. Pre-resolution is also called variable, function promotion.

1. Variable Pre-parsing

Variable pre-parsing: The declaration of a variable is promoted to the top of the current scope, and the assignment of a variable is not promoted.
For example:

  /*Parse var variable num first
  Then execute console output
  Last assign 10 to num*/
console.log(num);  // What are the results?
var num = 10;      // ?

2. Function Pre-parsing

Function pre-parsing: The declaration of the function is promoted to the top of the current scope, but the function is not called.

/*First parse the definition of the fn function
 Then execute the console statement*/
console.log("1+2+3+...+100=",fn());
		function fn(){
			var s = 0;
			for(var i=1;i<=100;i++){
				s += i;
			}
			return s;
		}

2. Pre-parsed Cases

Let's do a little exercise to see what the output is?

console.log((a));
var a = 1;
 console.log((a));
 function a(){
    return a;
 }

The results are:

2. Objects

In JavaScript, objects are an unordered collection of related properties and methods, everything is an object, such as strings, numbers, arrays, functions, and so on.
Objects are made up of properties and methods.

  • Attributes: The characteristics of things, expressed as attributes in objects (common nouns)
  • Method: The behavior of an object, represented by a method in the object (common verbs)

1. Three ways to create objects

1. Create Objects by Literal Quantity

Object Literal Quantity: The curly brackets {} contain attributes and methods to express this specific thing (object). The {} is represented as a key-value pair.

  • Key: equivalent to property name
  • Value: Equivalent to an attribute value and can be any type of value (number type, string type, Boolean type, function type, etc.)
var star = {
    name : 'xl',
    age : 18,
    sex : 'female',
    sayStudy : function(){
        console.log('Study hard');
    }
};

Property calls inside an object: object. property name, this dot. is understood as "yes". For example: star.name
Another way to call attributes inside an object: object ['attribute name'], note that attributes inside square brackets must be quoted. For example: star['age']

2. Create Objects with new Object

Consistent with the previous study of new Array() creating arrays

var andy = new Object();
andy.name = 'xl';
andy.age = 18;
andy.sex = 'female';
andy.sayStudy = function(){
   console.log('Study hard');
}

  • Object(): First letter uppercase
  • new Object(): Need new keyword
  • Format used: Object. Attribute = Value;

3. Creating objects with constructors

Constructor: A special function used to initialize objects, that is, to assign initial values to object member variables, which are always used with the new operator. We can extract some common properties and methods from the object and encapsulate them in this function.
In js, there are two things to note when using constructors:

  • Constructors are used to create a class of objects whose initial letters are capitalized
  • Constructors make sense when used with new
    For example:
function MyName(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
var xl = new MyName('Bear Willow','18','female');
var huan = new MyName('Wang Huan','16','female');
console.log('xl.name='+xl.name);
console.log('huan:');
console.log(huan);

The printout is:

Be careful

  • The constructor conventions capitalize the first letter.
  • Attributes and methods within a function need to be preceded by this to represent the properties and methods of the current object.
  • Return is not required in the constructor to return the result.
  • When we create an object, we must call the constructor with new.

4. Constructors and Objects

  • Constructor, which abstracts the common part of an object and encapsulates it in a function, refers generally to a large class
  • Creating objects, specifically one of them, through the new keyword is also known as object instantiation.

2. new keywords

new does four things when it executes:

  1. Create a new empty object in memory.
  2. Let this point to this new object.
  3. Execute the code inside the constructor to add properties and methods to this new object.
  4. Returns this new object (so return is not required inside the constructor).

3. Traversing Object Properties

The for...in statement is used to loop through the properties of an array or object.
Its syntax is as follows:

for (variable in Object Name) {
    // Execute code here
}

Variables in the grammar are custom and need to conform to the naming conventions. Usually, we write this variable as k or key.

for (var k in obj) {
    console.log(k);      // Where k is the attribute name
    console.log(obj[k]); // Where obj[k] is the attribute value
}

For example, the following objects are built

function Hero(name,type,blood,attack){
    this.name = name;
    this.type = type;
    this.blood = blood;
    this.attack = attack;
       
}
var lianpo = new Hero('Cheap Po','Strength type','500 Blood Volume','Civil War');
var houyi = new Hero('Hou Yi','Sagittarius','100 Blood Volume','Long-range');

When the for..in statement is executed, printing K and obj[k] yields the following results, respectively:

for(k in lianpo){
    console.log(lianpo[k]);
}

for(k in lianpo){
    console.log(lianpo[k]);
}

Posted by rthconsultants on Mon, 08 Nov 2021 15:38:19 -0800