要说js的赋值方式时首先要说明js的数值类型:基本类型和引用类型。

1、基本类型

基本的数据类型有:undefined,boolean,number,string,null。 基本类型存放在栈区,访问是按值访问的,就是说你可以操作保存在变量中的实际的值。

当基本类型的数据赋值时,赋得是实际的值,a和b是没有关联关系的,b由a复制得到,相互独立。(字面量的才是基本类型)

var a=10;

var b=a;

console.log(a+','+b);    // 10,10
a++;
console.log(a+','+b)  // 11,10
 

2、引用类型

引用类型指的是对象。可以拥有属性和方法,并且我们可以修改其属性和方法。引用对象存放的方式是:在栈中存放对象变量标示名称和该对象在堆中的存放地址,在堆中存放数据。

对象使用的是引用赋值。当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在堆中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。

3、数组是引用类型

我们先来看一个例子:

var a = [1,2,3];

var b = a;

a = [4,5,6];

alert(b); //[1,2,3]

好像数组是基本类型一样。。,但是:

var a = [1,2,3];

var b = a;

a.pop();

alert(b); //[1,2]

这是怎么回事?因为:(知乎解释)

a = [4,5,6];//改变的是a引用本身,没有改变数组对象,a和b没有了关系。
a.pop();//改变的是数组对象,a引用没有改变。
b = a;//该操作后,b直接指向数组对象,不是b指向a,a再指向数组。
//所以改变a引用并不会对b引用造成影响,改变数组对象可以。

作者:Intopass
链接:https://www.zhihu.com/question/26042362/answer/31903017
来源:知乎

这个问题就跟我之前在React todo-list 一篇中提到的问题一样:

var tasks=this.state.data;
  tasks=tasks.filter(function(i){
     return i.index!=taskId;  
 });

由于filter函数是返回一个新的数组,虽然仍然用tasks去接收,但这时候tasks的指向已经是新数组啦,所以tasks和data已经不在有关系。(concat也是返回新数组)

而push和splice函数是在原数组上操作,所谓在原数组操作,指的是指向不变,所以tasks和data是相关联的。

4、参数传递

js的函数参数传递为值传递。

当传入的是 基本类型的参数时:就是复制了份内容给i而已,i与age之间没有关系。

function setAge(i)

{

    alert(i);//24

    i = 18;

    alert(i);//18,i的改变不会影响外面的age

};

var age = 24;

setAge(age);

alert(age);//24

当传入的参数为引用类型时:

function setName(obj)

{

    obj.name = 'haha';

};

var obj2 = new Object();

setName(obj2);

alert(obj2.name);    //  haha

这看起来很像是传递的是引用,因为obj.name受到改变了,但其实不是,其实还是值,因为obj2本身的值就是新对象的地址,所以传进去的就是这个地址。

这是阿里2014年的笔试题: 

var a = 1;

var obj = {

    b: 2

};

var fn = function () {};

fn.c = 3;

function test(x, y, z) {

    x = 4;

    y.b = 5;

    z.c = 6;

    return z;

}

test(a, obj, fn);

alert(a + obj.b + fn.c);

答案:12

首先test传递进去的实参中,a是基本类型(,复制了一份值),obj是object(指向地址,你动我也动),fn也当然不是基本类型啦。在执行test的时候,x被赋值为4(跟a没关系,各玩各的,a仍然为1),y的b被赋值为5,那obj的b也变为5,z的c变为6,那fn的c当然也会是6. 所以alert的结果应该是1+5+6 =12. (其实test不返回z也一样,z仍然改变的)。

————————————

参考:http://www.2cto.com/kf/201401/273413.html    , https://segmentfault.com/a/1190000002789651#articleHeader0

Js的引用赋值与传值赋值的更多相关文章

  1. JS 的引用赋值与传值赋值

    这个问题说大不大说小不小,如果你有幸踩了这个坑,一定会找这篇文章,哈哈~ 现说一下JS数字的类型:基本类型和引用类型 先看下下面两个栗子: var a = 30; var b = a; a = 20; ...

  2. PHP变量传值赋值和引用赋值,变量销毁

    <?php $a = 100; $b = 200; var_dump($a,$b); //int(100) int(200) ?> php中,上面的代码,变量是怎么存放的呢? 上面的代码变 ...

  3. PHP变量引用赋值与变量赋值变量的区别

    变量默认总是传值赋值.那也就是说,当将一个表达式的值赋予一个变量时,整个原始表达式的值被赋值到目标变量.这意味着,例如,当一个变量的值赋予另外一个变量时,改变其中一个变量的值,将不会影响到另外一个变量 ...

  4. js和jquery给iframe src赋值的3种方法

    js和jquery给iframe src赋值的3种方法   网页使用iframe嵌入网页时,有时候需要动态处理src的值,而不是写死的,所以我们需要知道如何给iframe src赋值,通常是使用js或 ...

  5. php地址赋值值和传值赋值

    下面这是php的赋值的两种方式: <?phpheader("Content-Type: text/html;charset=utf-8");$a="我是原始数据a& ...

  6. js对div取值与赋值

    js对div取值与赋值 因为JavaScript运行时,id="test1" 的那个div元素可能还没解析和加载,js加载是有顺序的.只需把 js 整个搬到 后面即可. 还有一个特 ...

  7. JS变量作用域与解构赋值

    用var变量是有作用域的 变量在函数内部声明时,那么该变量只属于整个函数体,函数外不可调用 当两个不同的函数里,使用了用一个相同的变量名,二者不互相影响,相互独立 遇到嵌套函数时,外部函数不可调用内部 ...

  8. jquery根据选择器进行页面赋值,封装赋值方法

    可以进行文本框赋值,文本域赋值,下拉列表赋值,单选框赋值,多选框赋值, 传入对象,可以根据元素name进行比对赋值,不用每个进行单独赋值 <!DOCTYPE html> <html ...

  9. JS调用OC方法并传值,OC调用JS方法并传值////////////////////////zz

     iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码)     最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点 ...

随机推荐

  1. Oracle连接出现TNS:no listener或者ORA-12514: TNS:listener does not currently know

    1.Message 850 not found; No message file for product=network, facility=NL 提示框:TNS:no listener 解决办法: ...

  2. CIO谈:基于K2 BPM平台怎么做报销?

    即时!可视!可控!高效! 面对报销系统四大业务目标,有一个对策——用K2! 演讲人:沈明 大鹏天然气CIO 查看完章分享内容请关注K2官方微信

  3. CSS实现图片变灰色及透明度

    [图片变灰] 每当遇到哀悼日,很多网站快速变灰色,来看看实现方式吧: 方式一,仅支持ie) html{filter:progid:DXImageTransform.Microsoft.BasicIma ...

  4. C/C++文件结构

    总结者:kate (1).h 为头文件:存放 版权和版本声明,预处理块 ,函数和类结构声明 (2).cpp文件:代码文件,存放程序的实现 大都数时候,源文件和头文件是对应出现的,比如有一个A.cpp  ...

  5. new 动态分配数组空间

    (一)定义一个整数              int *p =new int;        int *p =new int(4); //赋初值4 (二)定义一个一维数组                ...

  6. C/C++中函数参数传递详解(二)

    昨天看了内存管理的有关内容,有一点了解,但不是很深入,发现之前写代码时有很多细节问题没有注意到,只知道这样做可以实现功能,却不知道为什么可以这样,对于采用自己的方法造成的隐患也未知,更不晓得还有其他方 ...

  7. struts2内Action方法调用

    1.struts2流程: jsp页面-->web.xml-->struts.xml-->user.acrion-->UserAction.java 中的execute()--r ...

  8. == 和 isEqualToString的区别之备忘

    == 比较的是指针 isEqualToString 比较的是指针指向的内容 比如: NSString * strA = @"abc"; NSString * strB = @&qu ...

  9. JVM-class文件完全解析-类索引,父类索引和索引集合

    类索引,父类索引和接口索引集合 前面介绍了class文件,从头开始的魔数,次版本号,主版本号,常量池入口,常量池,访问标志.那么再接下来的就是用来确定这个类的继承关系的类索引,父类索引和接口索引集合这 ...

  10. poj2264 dp+路径

    //Accepted 208K 0MS //dp //最长公共子序列+路径 #include <cstdio> #include <cstring> #include < ...