Home > Web Front-end > JS Tutorial > Detailed explanation of issues related to JavaScript variables

Detailed explanation of issues related to JavaScript variables

迷茫
Release: 2017-03-26 17:02:29
Original
1398 people have browsed it

This article focuses on the difference between two different data types contained in JavaScript variables-basic type values ​​and reference type values. In addition, I briefly touched on the relationship between ECMAScript and JavaScript.

The title is JavaScript variables, but more specifically it should be ECMAScript variables.

In the 1990s, Netscape and Microsoft launched two different versions of JavaScript, which was not conducive to the development and use of JavaScript, prompting the European Computer Manufacturers Association (ECMA, The European Computer Manufacturers Association began to deal with the standardization of JavaScript, thus completing the famous ECMA-262 - a standard that defines a new scripting language called ECMAScript.

A complete JavaScript implementation includes ECMAScript, Document Object Model (DOM, Document Object Model), and Browser Object Model (BOM, Browser Object Model). ECMAScript, as the core and implementation basis of JavaScript, is a description of the language in terms of syntax, types, statements, keywords, reserved words, operators and objects specified by the ECMA-262 standard.

ECMAScript variables specified in the ECMA-262 standard are loosely typed and can be used to save any type of data, so the operations of initializing variables of different types can be placed in one statement It is legal to execute the following code.

 var message = "hello",  //string     
 age = 20,           //number3     
 found = false;   //boolean 
Copy after login

  A variable defined with the var operator will become a local variable in the scope in which the variable is defined. The variable will be destroyed immediately after exiting the scope. For example, if you define a variable within a function, the variable is created when the function is called, but after the function exits, the variable can no longer be accessed.

There are 6 data types in ECMAScript (only 6, ECMAScript does not support any mechanism for creating custom types).

The basic data types include 5 types - underfined, null, boolean, number, string. These 5 basic data types are accessed by value, and their values ​​belong to the basic data types mentioned at the beginning of the article. Type values ​​are simple data segments that can manipulate the actual value stored in the variable.

The sixth type is the complex data type - object, which is essentially composed of a set of unordered name-value pairs. It is a reference type value and is stored in memory. object. JavaScript does not allow direct manipulation of the memory space of an object. When operating an object, you are actually operating a reference to the object rather than the actual object.

Although it is not necessary to specify what data type a variable is when defining it, the operations that can be performed on the values ​​of basic types and reference types are still very different.

 Adding attributes

For reference type values, you can add attributes and Methods to add, change and delete, as shown in the following code:

var obj = new object();  //创建对象并保存在obj中
obj.name = "Marry";      //添加名为name的属性,赋予字符串值“Marry”
alert(obj.name);         //弹出"Marry"
Copy after login

If the obj object is not destroyed or the name attribute is not deleted, this attribute will always exist.

Look at the basic type value again:

var name = "Marry";  //创建字符串
name.age = 20;       //添加名为age的属性,赋予number值20
alert(name.age);     //弹出"underfined"
Copy after login

The name string has an age attribute added to it and is assigned a value of 20, but it will be accessed next time This attribute will disappear.

This means that attributes can only be added dynamically to reference type values.

 Copy variable value

 From variable a Copying the basic type value to variable b will create a new value on the variable b object and copy the value to the location assigned to variable a , saved independently. Any operations involving these two variables will not affect each other.

  若从变量c变量d复制引用类型的值,同样会将存储在变量d对象中的值复制一份放到为变量c分配的空间中,但这个值的副本实际是一个指针,与变量d指向堆内存中的同一个对象。两个变量实际引用同一个对象,改变其中一个变量,将影响另一个变量。

  具体区别见如下例子:

//基本类型值
var num1 = 5;var num2 = num1;
num2 = num2 + 5;
alert(num1);                   
//5alert(num2);                   
//10/
/引用类型值
var obj1 = new object();var obj2 = obj1;
obj1.name = "Marry";
alert(obj2.name);            
//"Marry"
Copy after login

  函数传参

  ECMAScript中所有函数的参数都是按值传递的,即将函数外部的值复制给函数内部的参数。鉴于基本类型值与引用类型值复制变量的不同,其函数传参的效果也不同。

  在向参数传递基本类型值时,被传递的参数被赋给一个局部变量,函数内部参数的变化不影响函数外部的变量;向参数传递引用类型值时,会把这个值在内存中的地址复制给一个局部变量,因此这个局部变量的变化将会反映在函数的外部。如下列例子:

//传递基本类型值function addnum(num) {
    num += 10;    return num; 
}var num1 = 5;var num2 = addnum(num1);
alert(num1);                  
//5,无变化alert(num2);                  
//15//传递引用类型值
function setage(obj) {
    obj.age = 20;
}var obj1 = new object();
setage(obj1)
alert(obj1.age);            //20
Copy after login

在局部作用域中修改的对象反映在全局作用域中,很多人会以为这是按引用传递。但函数对象确实都是按值传递,见下列例子:

function setage(obj) {
    obj.age = 20;
    obj = new object();
    obj.age = 30;
}var obj1 = new object();
setage(obj1)
alert(obj1.age);           
//20
Copy after login

  此例中在函数内部为obj重新定义了一个对象,且为其age属性重新赋值,但这一变化并未反映在函数外部,说明obj1 并不是按引用传递的。实际函数内重新定义的对象为局部对象,在退出函数后就会被立即销毁。

  检测类型

  基本类型值可以通过typeof检测,但typeof检测引用类型时只能返回object。所以为了知道某个值是什么类型的对象,ECMAScript提供了instanceof操作符,语法如下:

result = variable instanceof constructor
Copy after login

如果变量是引用类型的实例,instanceof操作符就会返回true。

The above is the detailed content of Detailed explanation of issues related to JavaScript variables. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template