首先,我们还是举个例子来说明对象赋值操作的问题吧:

ps: 本文默认约定log = console.log

 function A(){}
A.prototype.x = 10;
var a1 = new A();
A.prototype = {
x: 20,
y: 20
};
var a2 = new A();
log([a1.x, a1.y, a2.x, a2.y]); // [10, undefined, 20, 20]

js中对象赋值操作我们可以通过c语言中得指针概念来解释。

对象的浅拷贝

直接通过赋值操作符“=”将变量a中的对象赋值给变量b,此时我们更改a、b其中一个,另一个也会随之更改。

var a = [1, 1],
b = a;
b[0] = 2;
log(a[0]); // 2

因为我们在将a的对象赋值给b时,js引擎内部的操作只是简单的将a所指的对象的地址赋值给b,此时a与b指向内存中同一个对象,所以才会出现这种情况。这种赋值方式称为对象的浅拷贝。

我们可以从另一个方面论证我们的观点:

log(a === b); // true,毫无疑问

var c = [2, 1];
log(a === c); // false

出现这种情况的原因就是变量c指向的是另一个和变量a指向的对象的值相同的对象,仅仅只是两个指向的对象的值相同,但两个对象在内存的地址是不一样的,所以是false。

另外,我们知道js数组中有一些方法可以实现数组的完全复制,即两个变量分别指向两个对象:

	b = a.concat([]),
c = a.slice(0),
d = a.splice(0, a.length);
log(b === a); // false

但是我们要针对对象进行复制的话,只能手动进行模拟,即所谓的对象深拷贝。

对象的深拷贝

顾名思义,就是利用“=”对于基本类型的操作不存在上述问题,通过for-in深度遍历对象的属性,然后将其赋值给另一个新的对象。

function cloneObj(obj) {
var tempObj = {}; if (obj instanceof Array) {
tempObj = [];
} for (var prop in obj) {
if (typeof prop === 'Object') {
cloneObj(prop);
} tempObj[prop] = obj[prop];
} return tempObj;
} var myCountry = {
name: 'China',
birth: 1949
}, country = cloneObj(myCountry); log(country === myCountry); // false

结束语

最后,我们回到第一个例子,会发现,引擎内部对于new对象的原型链也是通过简单的赋值操作的方式,即对象的浅拷贝。而ES5新增的Object.create()也是浅拷贝的一种封装:

var myCountry = {
name: 'China',
birth: 1949
}, country = Object.create(myCountry); console.log(country.__proto__ === myCountry); // true

Javascript对象赋值操作的更多相关文章

  1. C风格字符串和C++ string 对象赋值操作的性能比较

    <<C++ Primer>> 第四版 Exercise Section 4.3.1 部分Exercise 4.2.9 习题如下: 在自己本机执行如下程序,记录程序执行时间: # ...

  2. javascript数组赋值操作的坑

    描述:数组对象赋值,即arr1=[{},{},{}]这种数据结构的对象赋值,将arr1赋值给arr2:然后删除arr2里的元素 一.最常用的= arr2 = arr1; detect(val) { l ...

  3. javascript数组赋值操作

    最近在司徒正美的<javascript框架设计>,在里面发现了一个段代码 ...... var _len = arr1.length; while (_len) { arr2[--_len ...

  4. JavaScript对象属性赋值操作的逻辑

    对象进行属性赋值操作时,其执行逻辑如下所示: 1. 当前对象中是否有该属性?有,进行赋值操作:没有,进行下一步判断. 2. 对象的原型链中是否有该属性?没有,在当前对象上创建该属性,并赋值:有,进行下 ...

  5. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  6. javascript:面向对象和常见内置对象及操作

    本文内容: 面向对象 常见内置对象及操作 首发日期:2018-05-11 面向对象: JavaScript 是面向对象的编程语言 (OOP).OOP 语言使我们有能力定义自己的对象和变量类型. 对象是 ...

  7. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  8. JavaScript 对象的创建和操作

    <script>         // 对象是属性的无序集合,每个属性都是一个名/值对. 属性名称是一个字符串.         // 对象种类         // 内置对象(nativ ...

  9. Javascript对象的方法赋值

    Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method).今天在写代码过程中,又犯了一个低级错误. <!DOCTYPE html> < ...

随机推荐

  1. 再探 Ext JS 6 (sencha touch/ext升级版) 变化篇 (编译命令、滚动条、控制层、模型层、路由)

    从sencha touch 2.4.2升级到ext js 6,cmd版本升级到6.0之后发生了很多变化 首先从cmd说起,cmd 6 中sencha app build package不能使用了,se ...

  2. 测试GeoGebra博客

    已知函数 \(\textit{f}(\textit{x})=2\textit{m}\ln\textit{x}-\textit{x}^2\), \(\textit{g}(\textit{x})=\tex ...

  3. PE渲染引擎 一

    PE是我业余时间做的一个纯dx11的渲染框架.主要就是练手.如果有时间,会把它“扩展”成真正的引擎(标配至少要有个对应的编辑器吧 -_!!). 目前实现的有: obj文件加载,binormal计算. ...

  4. js中加密及设置cookie

    1.设置cookie及有效期时长 //cname:cookie的名称,cvalue:cookie的内容,exdays:cookie有效期时长: function setCookie(cname, cv ...

  5. linux shell 流程控制(条件if,循环【for,while】,选择【case】语句实例 --转载

    http://www.cnblogs.com/chengmo/archive/2010/10/14/1851434.html nux shell有一套自己的流程控制语句,其中包括条件语句(if),循环 ...

  6. Transact-SQL 示例 - 使用脚本备份数据库的示例

    在常规的数据库开发与维护的过程中,常常需要对数据库进行数据备份,最入门的办法就是使用SSMS图形化界面提供的数据库备份向导一步一步操作进行备份,这种方式虽然简单快捷但是日子久了就会觉得重复且繁琐.下面 ...

  7. 移除了css框架,世界干净了

    在之前的webapp项目里,我使用了bootstrap作为三方的css库,只调取了其中一部分源码的less使用,大部分代码仍然是自己写的. 自己的代码也是参照bootstrap的目录结构和它的一些规范 ...

  8. ASP.NETC#通用扩展函数之TypeParse 类型转换方便多了

    用法: var int1 = "2".TryToInt();//转换为int失败返回0 var int2 = "2x".TryToInt(); var int3 ...

  9. 希望早几年知道的5个Unix命令

    原文: http://spin.atomicobject.com/2013/09/09/5-unix-commands/ 希望早几年知道的5个Unix命令 使用*nix系统已经有一段时间了.但是还是有 ...

  10. MySQL 备份与还原详解

    相关阅读: MySQL备份和恢复具体实施 http://www.linuxidc.com/Linux/2012-12/76257.htm MySQL备份与恢复的三种方法总结 http://www.li ...