JavaScript pre-analysis, object details

1. Pre-analysis

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, before the JS code is executed, the browser will declare or define variables with var and function declarations in memory in advance by default.
• Code execution: Execute JS statements from top to bottom.

Preparing only happens for variables and functions defined with var. Learning pre-analysis can help us understand why the value of a variable is undefined when accessed before it is declared, and why a function can be called before it is declared. Preparing is also called variable and function promotion.

1. Variable pre-parsing

Variable pre-parsing: Variable declarations will be promoted to the top of the current scope, and variable assignments will not be promoted.

For example:

  /* Parse the var variable num first
  Then execute the console output and finally assign 10 to num*/
console.log(num); // What is the result?
var num = 10; // ?

2. Function pre-analysis

Function pre-analysis : The function declaration will be promoted to the top of the current scope, but the function will not be called.

/*First parse the definition of the fn function and 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-analysis case

Let's do a little exercise and see what the output is.

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

The result is:

2. Target

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

• Attribute : a characteristic of something, represented by an attribute in an object (common noun)
• Method : The behavior of something, expressed in an object using a method (common verb)

1. Three ways to create objects

1. Create objects using literals

Object literal: The curly braces { } contain the properties and methods that express this specific thing (object). { } is expressed in the form of key-value pairs.

• Key: Equivalent to the attribute name
• Value: Equivalent to the attribute value, which can be any type of value (numeric type, string type, Boolean type, function type, etc.)

var star = {
    name : 'xl',
    age: 18,
    sex : 'female',
    sayStudy : function(){
        console.log('Study hard');
    }
};

The property call in the object is: object.property name, the dot . is understood as "of". For example: star.name

Another way to call the attributes in an object: object['attribute name'], note that the attributes in the square brackets must be quoted. For example: star['age']

2. Create an object using new Object

This is the same as the principle of creating an array using new Array() that we learned earlier.

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

• Object() : The first letter is capitalized
• new Object(): requires the new keyword
• The format used is: object.property = value;

3. Create objects using constructors

Constructor: A special function that is mainly used to initialize objects, that is, to assign initial values ​​to object member variables. It is always used with the new operator. We can extract some common properties and methods from the object and encapsulate them into this function.

In js, when using the constructor, pay attention to the following two points:

• Constructors are used to create objects of a certain type, and their first letter should be capitalized.
• Constructors only 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('熊柳','18','女');
var huan = new MyName('王欢','16','女');
console.log('xl.name='+xl.name);
console.log('huan:');
console.log(huan);

The print result is:

Notice

• Constructors are usually capitalized.
• This needs to be added before the properties and methods within the function to indicate the properties and methods of the current object.
• There is no need to return the result in the constructor.
• When we create an object, we must use new to call the constructor.

4. Constructors and objects

• Constructor, abstracts the common parts of the object and encapsulates them into a function. It refers to a general class.
• Creating an object, specifically one, through the new keyword we also call the process of creating an object instantiation.

2. New Keyword

new does four things when executed:

1. Create a new empty object in memory.

2. Let this point to the new object.

3. Execute the code in the constructor to add properties and methods to the new object.

4. Return this new object (so no return is needed in the constructor).

3. Traversing object properties

The for...in statement is used to loop over the properties of an array or object.

Its syntax is as follows:

for (variable in object name) {
    // Execute code here }

The variables in the syntax are custom and need to comply with naming conventions. Usually we write this variable as k or key.

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

For example, the following object is constructed

function Hero(name,type,blood,attack){
    this.name = name;
    this.type = type;
    this.blood = blood;
    this.attack = attack;
}
var lianpo = new Hero('Lian Po', 'Power', '500 HP', 'Melee');
var houyi = new Hero('Houyi','shooter type','100 health','long range');

When executing the for..in statement, printing k and obj[k] will produce the following results respectively:

function Hero(name,type,blood,attack){
    this.name = name;
    this.type = type;
    this.blood = blood;
    this.attack = attack;
}
var lianpo = new Hero('Lian Po', 'Power', '500 HP', 'Melee');
var houyi = new Hero('Houyi','shooter type','100 health','long range');

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

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!