An explanation of JavaScript reference types-JS Tutorial-php.cn

Object type

 1 //创建方式一 2 var person = new Object(); 3 person.name = "jack"; 4 person.age = 12; 5  6 //创建方式二 7 var person = { 8       name:"jack", 9       age:1210 }11 //创建空对象12 var person = {};//与new Object()相同13 14 //访问方式15 person["name"];  jack16 person.name;  jack17 //以上两种方式区别在于使用中括号方式可以通过变量访问18 var propertyName="name";19 person[propertyName];  jack20 person["first name"] = "jack";//如果属性名有空格

Copy after login

Array type　

//定义var array = new Array();var array2 = new Array("a","b","c");var array3 = ["a","b","c"];//修改array3[2] = "d";//array3:a,b,d//新增array3[3] = "d";//array3:a,b,c,darray3[length] = "d";//array3:a,b,c,d第二种新增方式//末尾删除元素//数组的length属性不是只读的，所以通过改变length可以从数组末尾移除array3.length=3;//array3:a,b,c

Copy after login

Detect array:

To determine which basic type a value is (Undefined, Null, Boolean, Number, String), use the typeof operator, and to determine which reference type a value is, use instanceof operator.

The reason why the Array.isArray() method is added to Array is because the instanceof operator is used when there is only one global execution environment; if it contains multiple frameworks, there will be more than two different ones. In the global environment, there are more than two different versions of the Array constructor. Stack method (LIFO) : Array passes push (receives any number of parameters and adds them to the end of the array one by one) and pop (removes the last item from the end of the array and reduces the length value) , returns the removed item) Two methods can achieve stack-like behavior.

Queue method (FIFO) : Array passes shift (get items from the front of the array) and push or unshift (add any items to the front of the array and return a new array Both the length) and pop can realize the form of simulated queue.

Reordering method: reverse (reverse the order of array items); sort (implement sorting, receive a custom function, pass negative numbers, 0, positive numbers )

Operation method: concat (add to the copy array based on the received parameters and return a copy of the array); slice (return the starting and ending positions) items between, but excluding items at the end position);

splice() method: You can delete any number of items splice(0,2) will delete the first two items (the position and the position of the first item are to be deleted) The number of items to be deleted); multiple items can be inserted into the specified position; any number of items can be inserted into the specified position and any number of items can be deleted at the same time.

Positional methods: ECMAScript 5 adds two positional methods for array instances: indexOf() and lastIndexOf()

Iteration method:

##every(): Receives a function, if true is returned for each item in the array, the result returns true.
some(): Receives a function. If there is an item in the array that returns true, the result will be true. Note the difference from every.
filter(): Receives a function and returns items that satisfy the condition, which is true.
forEach(): Runs the given function on each item in the array.
map(): Runs the given function and returns an array of the results of each function call.

Merge method: reduce (starting from the first item of the array) and reduceRight (starting from the last item of the array).

Function type

Functions are actually objects. Each function is an instance of the Function type and has the same properties and methods as other reference types. So the function name is actually a pointer to the function object.

 1 //使用函数声明语法定义 2 function sum(num1,num2) 3 { 4      return num1+num2;          
 5 } 6 //使用函数表达式定义，注意结尾要加分号 7 var sum = function(num1,num2) 8 { 9     return num1+num2;10 };

Copy after login

There is a difference between function declaration and function expression. When the parser loads data into the execution environment, it will first read the function declaration and make it available before executing any code. access; and function expressions need to wait until the parser executes to the line of code where it is located before they are actually interpreted and executed. That is to say, the function expression must be written in front of the code that calls the function.

Function can be used as a value, either as a parameter or as a return value, as shown in the following example:

//根据属性名来创建一个比较函数，来指明按照哪个属性来排序function createComparisonFunction(propertyName)
{return function(object1,object2)
     {         var value1 = object1[propertyName];         var value2 = object2[propertyName];         
         if(value1<value2){             return -1;
         }else if(value1<value2){             return 1;
         }else{ 
             return 0;
         }
     }
}    
//利用数组data调用sort()方法data.sort(createComparisonFunction("name"));

Copy after login

Function internal attributes:

In Inside the function, there are two special objects: arguments and this. The main purpose of arguments is to save function parameters, of which there is a callee attribute, which is a pointer to the function that owns the arguments object.

//简单的递归算法，但是函数内部的执行和函数名factorial耦合在一起function factorial(num)
{if(num<=1)
    {return 1;
    }else{return num*factorial(num-1);
    }
}//利用arguments.callee解决function factorial(num)
{if(num<-1){return 1;
    }else{return num*arguments.callee(num-1);
    }
}

Copy after login

Another attribute of the function object is: caller. It holds a reference to the function that called the current function. That is, whoever calls the function, the caller saves its reference.

function outer()
{
   inner();
}function inner()
{
   alert(inner.caller);//弹出outer()函数的源代码
   alert(arguments.callee.caller);//和上一句一样}

Copy after login

函数属性和方法：

每个函数都包含两个属性：length（函数接收的命名参数的个数）和prototype。

每个函数都包含两个非继承而来的方法：apply()和call()，在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。apply()接收两个参数，一个在其中运行函数的作用域，拎一个是参数数组（可以是array或arguments对象）。call()第一个参数和apply一样，后面必须明确传入每个参数。除了用法不同其他的没什么不同。另外他们真正强大的地方是能够扩充函数赖以运行的作用域。

function sum(num1,num2)
{     return num1+num2;  
}
sum.apply(this, [num1,num2] );
sum.call(this,num1, num2);//扩充函数作用域window.color = "red";var o = {color:"blue"};function showColor(){
    alert(this.color);
}

showColor();//redshowColor.call(this);//redshowColor.call(window);//redshowColor.call(o);//blue

Copy after login

也可以使用bind()方法。

基本包装类型

为了便于操作基本类型值，ECMAScript引入3个特殊的引用类型：Boolean,Number,String。所谓包装类型，就是将基本类型包装起来，放一些操作方法和属性等。

每当读取一个基本类型值的时候，后台就会创建与一个对应的基本包装类型的对象，从而能让我们可以调用某些方法操作这些数据。

var s1 = "some text";var s2 = s1.substring(2);//后台内部相当于如下代码var s1 = new String("some text");var s2 = s1.substring(2);
s1 = null;

Copy after login

当第二行代码访问s1时，访问过程处于一种读取模式，也就是要从内存中读取这个字符串的值，读取模式访问字符串时，后台都会自动完成下列处理：

创建String类型的一个实例。
在实例上调用指定的方法。
销毁这个实例。

引用类型与基本包装类型的主要区别就是对象的生存期。使用new 操作符在执行流离开当前作用域之前一直保存在内存中。而自动创建的基本包装类型的对象，则只存在一行代码的执行瞬间，然后立即销毁。

单体内置对象

内置对象：

由ECMAScript实现提供的，不依赖于宿主环境的对象，程序执行之前就已经存在，比如：Object,Array和String。另外还有Global和Math。

Global对象：

URI编码方法：通过encodeURI()和encodeURICOMponent()方法对URI进行编码，以便发送给浏览器。区别在于第一个不会对本身属于URI的特殊字符进行编码，例如冒号，正斜杠，问号和井号。而另一个则会对它发现的任何非标准字符进行编码。与这两个方法对应的是：decodeURI(只能对使用encodeURI()替换的字符进行解码)和decodeURIComponent(针对encodeURIComponent()编码的字符)。
eval()方法像是一个解析器。比如eval("function say(){ alert(' Hi '); }");但是创建的任何变量或者函数都不会被提升，只有在eval执行时候才创建。
window对象，全局作用域中声明的所有变量和函数，都成为了window对象的属性。

The above is the detailed content of An explanation of JavaScript reference types. For more information, please follow other related articles on the PHP Chinese website!