js中 原始值和引用值

在 ECMAScript 中,变量可以存在两种类型的值,即原始值和引用值。

原始值-----存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置;
引用值-----存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存处。
如果一个值是引用类型的,那么它的存储空间将从堆中分配。由于引用值的大小会改变,所以不能把它放在栈中,否则
会降低变量查寻的速度。相反,放在变量的栈空间中的值是该对象存储在堆中的地址。地址的大小是固定的,所以把它
存储在栈中对变量性能无任何负面影响。
当我们把变量赋值给一个变量时,解析器首先要确认的就是这个值是基本类型值还是引用类型值。
常见的基本数据类型:
  • Boolean.  布尔值,true 和 false.
  • null. 一个表明 null 值的特殊关键字。 JavaScript 是大小写敏感的,因此 null 与 NullNULL或其他变量完全不同。
  • undefined.  变量未定义时的属性。
  • Number.  表示数字,例如: 42 或者 3.14159。
  • String.  表示字符串,例如:"Howdy"
  • Symbol ( 在 ECMAScript 6 中新添加的类型).。一种数据类型,它的实例是唯一且不可改变的。
基本数据类型是按值访问的,因为可以直接操作保存在变量中 实际值。示例:

  var a = 10;

  var b = a;

  b = 20;

  console.log(a); // 10值

  上面,b获取的是a值得一份拷贝,虽然,两个变量的值相等,但是两个变量保存了两个不同的基本数据类型值。

  b只是保存了a复制的一个副本。所以,b的改变,对a没有影响

   引用类型数据:也就是对象类型Object type,比如:Object 、Array 、Function 、Data等。

  javascript的引用数据类型是保存在堆内存中的对象。

  与其他语言的不同是,你不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地址。

  所以,引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象。

  var obj1 = new Object();

  var obj2 = obj1;

  obj2.name = "我有名字了";

  console.log(obj1.name); // 我有名字了

  说明这两个引用数据类型指向了同一个堆内存对象。obj1赋值给onj2,实际上这个堆内存对象在栈内存的引用地址复制了一份给了obj2,

  但是实际上他们共同指向了同一个堆内存对象。实际上改变的是堆内存对象。

      基本数据类型he 引用类型数据区别

  a 声明变量时不同的内存分配: 

  1)原始值:存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置

    这是因为这些原始类型占据的空间是固定的,所以可将他们存储在较小的内存区域 – 栈中。这样存储便于迅速查寻变量的值。

  2)引用值:存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存地址。

     这是因为:引用值的大小会改变,所以不能把它放在栈中,否则会降低变量查寻的速度。相反,放在变量的栈空间中的值是该对象

存储在堆中的地址。

     地址的大小是固定的,所以把它存储在栈中对变量性能无任何负面影响。

  b 不同的内存分配机制也带来了不同的访问机制

  1)在javascript中是不允许直接访问保存在堆内存中的对象的,所以在访问一个对象时,

    首先得到的是这个对象在堆内存中的地址,然后再按照这个地址去获得这个对象中的值,这就是传说中的按引用访问

  2)而原始类型的值则是可以直接访问到的。

  

  c 复制变量时的不同

    1)原始值:在将一个保存着原始值的变量复制给另一个变量时,会将原始值的副本赋值给新变量,此后这两个变量是完全独立的,他们只是拥有相同的value而已。

  2)引用值:在将一个保存着对象内存地址的变量复制给另一个变量时,会把这个内存地址赋值给新变量,

    也就是说这两个变量都指向了堆内存中的同一个对象,他们中任何一个作出的改变都会反映在另一个身上。

    (这里要理解的一点就是,复制对象时并不会在堆内存中新生成一个一模一样的对象,只是多了一个保存指向这个对象指针的变量罢了)。多了一个指针

 

  d 参数传递的不同(把实参复制给形参的过程

   首先我们应该明确一点:ECMAScript中所有函数的参数都是按值来传递的。

  但是为什么涉及到原始类型与引用类型的值时仍然有区别呢?还不就是因为内存分配时的差别。  

  1)原始值:只是把变量里的值传递给参数,之后参数和这个变量互不影响。

  2)引用值:对象变量它里面的值是这个对象在堆内存中的内存地址,这一点你要时刻铭记在心!

    因此它传递的值也就是这个内存地址,这也就是为什么函数内部对这个参数的修改会体现在外部的原因了,因为它们都指向同一个对象。

按值传递 VS 按引用传递

按值传递(call by value)是最常用的求值策略:函数的形参是被调用时所传实参的副本。修改形参的值并不会影响实参。

按引用传递(call by reference)时,函数的形参接收实参的隐式引用,而不再是副本。这意味着函数形参的值如果被修改,实参也会被修改。同时两者指向相同的值。

按引用传递会使函数调用的追踪更加困难,有时也会引起一些微妙的BUG。

按值传递由于每次都需要克隆副本,对一些复杂类型,性能较低。两种传值方式都有各自的问题。

基本类型是不可变的(immutable),只有对象是可变的(mutable). 有时我们会尝试“改变”字符串的内容,但在JS中,

任何看似对string值的”修改”操作,实际都是创建新的string值。   任何方法都无法改变一个基本类型的值,

var str = "abc";
    str[0]; // "a"
    str[0] = "d";
    console.log(str); //abc
    var name = ‘jozo‘;
    var upName=name.toUpperCase();
    console.log(upName,name); // 输出 ‘JOZO‘ ‘jozo‘

我们不能给基本类型添加属性和方法

 var person = ‘kn‘;
    person.age = 24;
    person.method = function(){};
    console.log(person.age); // undefined
    console.log(person.method); // undefined

 引用类型的值是可变的

 var obj = {x : 0};
    obj.x = 100;
    var o = obj;
    o.x = 1;
    console.log(obj.x)// 1, 被修改
    o = {x:100};  //等同于重新赋值,重新开辟内存,不是修改
    console.log(JSON.stringify(obj),JSON.stringify(o))//{"x":1} {"x":100}
    obj.x; // 1, 不会因o = {"x":100}改变

引用类型的值是同时保存在栈内存和堆内存中的对象

javascript和其他语言不同,其不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间,那我们操作啥呢? 实际上,是操作对象的引用,
所以引用类型的值是按引用访问的。
准确地说,引用类型的存储需要内存的栈区和堆区(堆区是指内存里的堆内存)共同完成,栈区内存保存变量标识符和指向堆内存中该对象的指针,
也可以说是该对象在堆内存的地址。

假如有以下几个对象:

var person1 = {name:‘jozo‘};
var person2 = {name:‘xiaom‘};
var person3 = {name:‘xiaoq‘};

则这三个对象的在内存中保存的情况如下图:

 var person1 = {};
 var person2 = {};
 console.log(person1 == person2); // false引用类型时按引用访问的,换句话说就是比较两个对象的堆内存中的地址是否相同,那很明显,person1和person2在堆内存中地址是不同的。

两种数据类型在实参和形参中的区别

首先要明白什么实参什么是形参。

实参:可以是常量、变量、表达式、函数等, 无论实参是何种类型的量,在进行函数调用时,它们都必须具有确定的值, 以便把这些值传送给形参。 因此应预先用赋值,输入等办法使实参获得确定值。

形参:全称为“形式参数”是在定义函数名和函数体的时候使用的参数,目的是用来接收调用该函数时传递的参数。

形参的作用是实现主调函数与被调函数之间的联系,通常将函数所处理的数据,影响函数功能的因素或者函数处理的结果作为形参.

当将 num作为实参传入方法 addNum是 param作为形参接受 并在方法体内使用,且num在全局中没改变,但当实参为引用类型时在方法体内改变形参将同时改变实参。

值为基本数据类型
function addNum(param)  //相对于addNum方法来说 param是形参
{
    param+=10;
     return param;
}
var num=10;
var result=addNum(num); //相对于addNum方法来说 num是实参
console.log(num);  //10
console.log(result);//20

值为引用数据类型
function fun(param)  //相对于fun方法来说 param是形参
 {
     param[0]=99;
      return param;
 }
 var num=[10];
 var result=fun(num); //相对于fun方法来说 num是实参
 console.log(num[0]);  //99
 console.log(result);//[99]

正因为js中 function的形参若为引用类型时,可以影响实参! 推断 callback中参数原理,如下例子 在回调函数中修改了 变量 data;

 function fun(data,callback){
          var json=[1,2,3];
          callback(json)
      }

      var data=[];
      fun(data,function(result){
          data=result;
      })
     console.log(data)//[1, 2, 3]

知识点1、 function 是一种数据类型,可以当做参数传递 2、数组是引用类型 3、引用类型的形参会影响实参

 1 <body>
 2     <button onclick=‘log()‘>ajax</button>
 3 </body>
 4 <script>
 5     function fun(data,callback){
 6         setTimeout(function(){
 7             var json=[1,2,3];
 8             callback(json)
 9         },4000)
10
11     }
12
13     var data=[];
14     fun(data,function(res){
15         data=res;
16     })
17     console.log(data)//[]
18     function log(){
19         console.log(data)//[1, 2, 3]  4秒后输出
20     }
21
22 </script>
 
时间: 2024-10-13 01:34:59

js中 原始值和引用值的相关文章

ECMAScript 原始值和引用值

在 ECMAScript 中,变量可以存在两种类型的值,即原始值和引用值. 原始值和引用值 在 ECMAScript 中,变量可以存在两种类型的值,即原始值和引用值. 原始值 存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置. 引用值 存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存处. 为变量赋值时,ECMAScript 的解释程序必须判断该值是原始类型,还是引用类型.要实现这一点,解释程序则需尝试判断该值是否

js中获取css样式属性值

关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. (2)currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. (3)getComputedStyle同currentStyle作用相同,但是适用于FF.opera.safari.chrome. 注意: ① currentStyle和getComputedS

原始值和引用值

在 ECMAScript 中,变量可以存在两种类型的值,即原始值和引用值. 原始值 存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置. 引用值 存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存处. 为变量赋值时,ECMAScript 的解释程序必须判断该值是原始类型,还是引用类型.要实现这一点,解释程序则需尝试判断该值是否为 ECMAScript 的原始类型之一,即 Undefined.Null.Boolean.

js中Number数字相乘后值不对

问题: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎么可能多出这么小数点出来. 我Google了一下,发现原来这是JavaScript浮点运算的一个bug. 比如:7*0.8 JavaScript算出来就是:5.6000000000000005解决方法:网上找到了一些解决办法,就是重新写了一些浮点运算的函数. 下面就把这些

JavaScript-原始值和引用值

一.原始值和引用值的概念 在 ECMAScript 中,变量可以存在两种类型的值,即原始值和引用值. 1.1 原始值 (1)原始值指的是 原始类型 的值,也叫 基本类型,例如 Number.Stirng.Boolean.Null.Underfined . (2)存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置. (3)注意 在许多语言中,字符串都被看作引用类型,而非原始类型,因为字符串的长度是可变的.ECMAScript 打破了这一传统. 1.2 引用值 (1)引

JS浅谈原始值与引用值操作

值的操作分为三大类:复制,传递,比较 一:复制 原始值 let a = 10; let b = a; 注释:2018-7-30 17:33:49 1 原始类型的值都是存放在栈内存当中,所以他们的赋值操作,其实相当于在栈内存开辟新的空间,然后将值的副本赋给新的内存,所以他们互不干扰 引用值 let obj = { name:'panrui' }; let obj1 = obj; 1 引用类型的值是存放在堆内存当中,栈内存中变量保存的只是一个堆内存的地址,所以赋值操作,也是开辟一个新的栈内存,然后将

js中switch/case分支的值可以是变量或表达式

在一些高级语言如C#中,switch分支的值只能是常量,而js中可以是变量或表达式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.

php与js中函数参数的默认值设置

php函数参数默认值设置: <?phpfunction test($val=3){   echo $val."<br/>";}test(11);test();?> javascript函数参数默认值设置function test(){alert("test函数");} function test2(val,func){ val=val||"";//利用js中的或操作,第一个参数值为false(为空)时返回第二个参数的值.第

js中全局变量修改后的值不生效【jsp页面中各个js中内容的加载顺序】

一个老项目中,一个jsp文件中有很多个js文件, 现在要在页面上的一个地方判断一个状态,因为一直找不到原来是在哪里修改的那个状态,所以决定不找了,而是在比较靠前引入的一个js中定义一个全局变量,然后在这个js的 $(function(){}} 方法中通过一个ajax向后台获取正确的状态,然后在所有的js都加载完之后根据全局变量的值的状态来修改页面上的逻辑. 但是发现,全局变量被一个外部js修改赋值后,我在jsp页面的最下面居然取不到修改过的值. 请教同事才发现原来原因是 任何一个js文件中的 $