JavaScript语法细节——引用与复制

原文: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)的方式遍历对象进行拷贝。

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

欢迎纰漏。

时间: 2024-10-08 04:18:52

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

JavaScript语法中分号使用的细节

关于JavaScript中可选分号的问题有几个细节要注意: 一般来说,JavaScript和其他语言一样都是使用分号,将语句隔开,但在JavaScript中,如果语句各自独立一行,有时也可以省略分号的 细节1: 如果当前语句和随后的非空格字符不能当成一整体来解析的话,JavaScript就在当前语句行结束处自动填补分号 var a a = 3 console.log(a); JavaScript将上述代码解析为: var a; a=3; console.log(a); 第一行代码 var a自动

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

谈谈javascript语法里一些难点问题(一) 1)    引子 前不久我建立的技术群里一位MM问了一个这样的问题,她贴出的代码如下所示: var a = 1; function hehe() { window.alert(a); var a = 2; window.alert(a); } hehe(); 执行结果如下所示: 第一个alert: 第二个alert: 这是一个令人诧异的结果,为什么第一个弹出框显示的是undefined,而不是1呢?这种疑惑的原理我描述如下: 一个页面里直接定义在

JavaScript语法支持严格模式 -- "use strict"

JavaScript 严格模式(use strict) JavaScript 严格模式(strict mode)即在严格的条件下运行. 使用 "use strict" 指令 "use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增. 它不是一条语句,但是是一个字面量表达式,在 JavaScript 旧版本中会被忽略. "use strict" 的目的是指定代码在严格条件下执行. 严格模式下你不能使用未

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

昨天泡了大半天的读书馆,一口气看完了<javascript语法精粹>这本书,总体来说这本书还是写的不错,难怪那么多的推荐.<javascript语法精粹>主要是归纳与总结了javascript中的重点知识,下面我把我看玩后觉得比较重要的知识点分享出来. <javascript语言精粹>重要知识点 一.比较有意思的递归函数 1.一个有意思的递归,形成数据结构,0,1,1,2,3,5,8,13--(其实在我的<javascript常用知识点集>中也写过这个递归,

Javascript语法基础

Javascript语法基础   一.基本数据类型   JavaScript中支持数字.字符串和布尔值三种基本数据类型: 1.数字 数字型是JavaScript中的基本数据类型.在JavaScript中的数字不区分整型和浮点型,所有的数字都是以浮点型来表示的. 2.字符串 字符串型是JavaScript中用来表示文本的数据类型,是由Unicode字符.数字和标点符号组成的一个字符串序列.字符串通常都是用单引号或双引号括起来的.如果在字符串中包括着特殊字符,可以使用转义字符来代替.例如: “”  

JavaScript DOM 编程艺术(1)---&gt; JavaScript语法

一.  JavaScript语法目录 语法 操作 条件语句 循环语句 函数 对象 二.  具体内容 2.1 语法 javaScript代码要通过HTML/XHTML文档才能执行.可以有两种方式完成这一点,第一种是将JavaScript代码放到文档<head>标签中的<Script>标签之间: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

JavaScript学习——JavaScript语法 语句

JavaScript 语法 JavaScript 是一个脚本语言. 它是一个轻量级,但功能强大的编程语言. JavaScript 字面量 在编程语言中,一般固定值称为字面量,如 3.14. 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e). 3.14 1001 123e5 字符串(String)字面量 可以使用单引号或双引号: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

JavaScript中对象的浅复制和深复制

在JavaScript中,如果要复制一个变量我们应该怎么做呢?下面这种做法是最简单的一种形式: //把a复制给b let a = 12; let b = a; 这种复制方法只能适用于基本类型,如果a是对象怎么办呢?我们先来看看上面的代码在内存中做了什么事: 声明了变量a = 12,栈内存会分配一块区域来存储,如上图所示.把a赋给b,会在栈中重新开辟一块区域来存储b,并且b的值就是a的值. 假如a是对象,内存做了什么事呢?来看下面的例子: let a = {}; let b = a; 如图所示,对

初探 -5 JavaScript 语法

JavaScript 是一个程序语言.语法规则定义了语言结构. JavaScript 语法 JavaScript 是一个脚本语言. 它是一个轻量级,但功能强大的编程语言. JavaScript 字面量 在编程语言中,一般固定值称为字面量,如 3.14. 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e). 3.14 1001 123e5 <!DOCTYPE html> <html> <head> <meta charset="utf-