原文:JavaScript语法细节——引用与复制

我们都知道,JS中变量的赋值有两种方式,最近在折腾自己写的标签栏插件,碰到了很多平时没注意的问题。正好,那边处理清楚了,稍微整理一下关于引用与复制相关知识,可能会不定期增加新碰到的问题,有错误希望看到的人指出,避免传播不正确的知识。

先大致分一下类,引用类型:Object以及其旗下的Array,Date,RegExp,Function;基本包装类型:Boolean,number,String。

在赋值与传递参数的时候,引用类型传递的是指针,基本包装类型是复制新值传递。常见的情况我就不啰嗦了,一下主要是一些碰到过的容易理解出错的情况,以及探究后得出的个人结论。

修改指针变量不一定会影响到引用对象

可能一下不太好理解这个,来点简单暴力的demo就好说明问题了。

var
arr1 = [1, 2, 3],
arr2 = arr1;

arr2 = [4, 5, 6];

console.log(arr1);
console.log(arr2);

这个demo比较简单,结果是:arr1为[1, 2, 3]  arr2为[4, 5, 6]

为什么修改arr2后arr1没有改变,arr2 = [4, 5, 6]修改的是arr2这个指针变量的指向,并没有碰到原引用的数组。

下面这种情况则会修改到原对象。

var
arr1 = [1, 2, 3],
arr2 = arr1;

arr2.pop();

console.log(arr1);
console.log(arr2);

此时的结果为: arr1 arr2都等于[1, 2],arr2.pop()相当于执行[1, 2, 3].pop(),因此arr2引用的原匿名对象被修改了。

因此在操作引用类型的时候,要注意是否修改的是原对象。来一个稍微啰嗦有点的demo:

var
arr1 = [1, 2, 3],
arr2 = arr1; function test (a) {
console.log(a);
a = [4, 5, 6];
console.log(a);
} test(arr2); console.log(arr1);
console.log(arr2);

上面的输出结果根据之前的测试应该是

var
arr1 = [1, 2, 3],
arr2 = arr1; function test (a) {
console.log(a); // [1, 2, 3]
a = [4, 5, 6];
console.log(a); // [4, 5, 6]
} test(arr2); console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2 ,3]

因为在传递arr2给test的时候,相当于执行了a = arr2因此情况跟第一个demo一样了。同理,将a=[4, 5, 6]改为a.pop(),那么结果如同第二个demo。

来一个函数自己修改自己的demo:

var test = function () {
var a = 1;
test = function () {
var b = 3;
}
}; test(); console.log(test);

此时的test内部为var b = 3;这种方法有个高大上叫法叫惰性载入,具体我就不啰嗦了,可以百度一下或者谷歌两下。利用的就是函数本身也是引用类型的特点。

下面的这个demo是引用类型中引用类型:

var obj1 = {
arr: [1, 2, 3]
},
obj2 = obj1; obj2.arr = [4, 5, 6]; console.log(obj1);

输出结果中,obj1被修改了,不难理解执行obj2.arr = [4, 5, 6]时,相当于执行obj1.arr = [4, 5, 6],直接修改了原对象。因此采用简单的赋值操作得不到一个对象的拷贝。取得拷贝的话可以用for(key in object)的方式遍历对象进行拷贝。

至于原始类型字符串数字之类的基本类型就不多写了,那些都是复制操作,获得的是一个新值。

欢迎纰漏。

JavaScript语法细节——引用与复制的更多相关文章

  1. 谈谈javascript语法里一些难点问题(一)

    1)    引子 前不久我建立的技术群里一位MM问了一个这样的问题,她贴出的代码如下所示: var a = 1; function hehe() { window.alert(a); var a = ...

  2. <JavaScript>谈谈javascript语法里一些难点问题(一)

    1)    引子 前不久我建立的技术群里一位MM问了一个这样的问题,她贴出的代码如下所示: var a = 1; function hehe() { window.alert(a); var a = ...

  3. Javascript语法基础

    Javascript语法基础   一.基本数据类型   JavaScript中支持数字.字符串和布尔值三种基本数据类型: 1.数字 数字型是JavaScript中的基本数据类型.在JavaScript ...

  4. JavaScript DOM 编程艺术(1)---> JavaScript语法

    一.  JavaScript语法目录 语法 操作 条件语句 循环语句 函数 对象 二.  具体内容 2.1 语法 javaScript代码要通过HTML/XHTML文档才能执行.可以有两种方式完成这一 ...

  5. 读《javascript语法精粹》知识点总结

    昨天泡了大半天的读书馆,一口气看完了<javascript语法精粹>这本书,总体来说这本书还是写的不错,难怪那么多的推荐.<javascript语法精粹>主要是归纳与总结了ja ...

  6. JavaScript DOM 编程艺术 ---> JavaScript语法

    二.  JavaScript语法目录 2.1 语法 javaScript代码要通过HTML/XHTML文档才能执行.可以有两种方式完成这一点,第一种是将JavaScript代码放到文档<head ...

  7. 初探 -5 JavaScript 语法

    JavaScript 是一个程序语言.语法规则定义了语言结构. JavaScript 语法 JavaScript 是一个脚本语言. 它是一个轻量级,但功能强大的编程语言. JavaScript 字面量 ...

  8. JavaScript中的对象引用和复制

    在JavaScript分为两种原始值和引用值类型,原始值之间的复制是值对值得复制,而引用类型则是引用对引用的复制: // 原始值的复制: let num1 = 1; let num2 = num1; ...

  9. SharePoint 2010自定义母版页小技巧——JavaScript和CSS引用

    通常在我们的项目中,都会涉及到母版页的定制.并且必不可少的,需要配合以一套自己的JavaScript框架和CSS样式.你有没有遇到过这样的情况呢,在开发环境和UAT时都还算顺利,但是当最终部署到生产服 ...

随机推荐

  1. OpenCV:Mat元素访问方法、演出、代码的复杂性和安全性分析

    欢迎转载.尊重原创,因此,请注明出处: http://blog.csdn.net/bendanban/article/details/30527785 本文讲述了OpenCV中几种訪问矩阵元素的方法, ...

  2. CSS——(2)与标准流盒模型

    部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品 ...

  3. 开发随笔——NOT IN vs NOT EXISTS

    原文:开发随笔--NOT IN vs NOT EXISTS 原文出处: http://blog.csdn.net/dba_huangzj/article/details/31374037  转载请引用 ...

  4. (初稿)SQL Server 复制(Replication)系列(2)——事务复制搭建

    原文:(初稿)SQL Server 复制(Replication)系列(2)--事务复制搭建 本文演示如何搭建最基本的事务复制. 环境准备: 虚拟机2台: 服务器名分别为RepA和RepB,RepA为 ...

  5. 于SharePoint经营SharePoint Designer建立

    于SharePoint经营SharePoint Designer建立 SharePoint Designer 2010(SPD)它是一种强大的工具,帮助建立一个高速解决方案. 通过连接到现场,能够自由 ...

  6. Top与ROW_NUMBER

    论Top与ROW_NUMBER读取第一页的效率问题   前一段时间研究关于分页的问题,由于数据库属于百万级的,考虑了关于优化方面的问题.其中一个考虑是:第一页展现的频率肯定是最高的,所以我想第一页就使 ...

  7. tomcat配置sqlserver数据库

    1. 首先确保Tomcat安装文件夹中的\common\lib(对于Tomcat5.5)或者是\lib(Tomcat6.0)文件夹中已包括JDBC连接数据库所必须的三个.jar文件(msbase.ja ...

  8. Python中国的学习方式处理问题

    a = '你们' 至 str 物 a = u'你们' 至 unicode 物 1. >>> print 'u'  + '你们' >>> u欢 输出乱码 2. > ...

  9. C#采用的是“四舍六入五成双”、上取整、下取整

    c# 四舍五入.上取整.下取整 Posted on 2010-07-28 12:54 碧水寒潭 阅读(57826) 评论(4) 编辑 收藏 在处理一些数据时,我们希望能用“四舍五入”法实现,但是C#采 ...

  10. 有关windows在调试ODOO8.0有些问题

    继Ubuntu建筑物8.0调试环境后,,尝试windows设置开发环境. 最后的调试和开发,或将返回Linux环境,由于前一段时间手贱,改变分区表,该grub搞哈.哎!后来重建mbr,手动检索分区表( ...