JavaScript对象拷贝与赋值操作实例分析


Posted in Javascript onDecember 10, 2018

本文实例讲述了JavaScript对象拷贝与赋值操作。分享给大家供大家参考,具体如下:

今天在做公司面试题的时候,遇到了一道关于JavaScript之对象拷贝与赋值的问题,突然觉得很有意义,想和大家一起来分享一下!

首先,先摆出代码,如下:

/**
* Created by Administrator on 2016/12/7.
*/
var obj={
name:"dahuang",
age:10
}
var newObj=obj;
newObj.name="xiaohuang";
console.log(obj.name);
console.log(newObj.name);

这个程序的结果是两个都输出了被修改后的名字:xiaohuang。

上述代码使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun得到如下运行结果:

JavaScript对象拷贝与赋值操作实例分析

那么,大家是不是感觉到很奇怪呢,明明只修改了newObj这个对象的name值,为什么obj对象的name值也被篡改了呢?

其实原因很简单,这是因为实际上newObj对象获得的只是一个内存地址,而不是真正的拷贝,所以obj对象被篡改。

但是当我们用Object.create这个函数创建一个对象时,obj对象就不会被篡改,话不多说,先上代码:

var obj2 = {
  name: "dahuang",
  age: 10
}
var newObj2 = Object.create(obj2);
newObj2.name = "xiaohuang";
console.log(obj2.name);
console.log(newObj2.name);

这个程序的结果是newobj2.name的值为xiaohuang,而obj2.name的值为dahuang,仍然保持不变。

上述代码使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun得到如下运行结果:

JavaScript对象拷贝与赋值操作实例分析

使用Object.create()方法进行对象的拷贝,Object.create()方法可以创建一个具有指定原型对象和属性的新对象。

Object.create()方法简介:

Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。

语法

Object.create(proto, [ propertiesObject ])

参数

proto 一个对象,作为新创建对象的原型。 propertiesObject可选。该参数对象是一组属性与值,该对象的属性名称将是新创建的对象的属性名称,值是属性描述符(这些属性描述符的结构与Object.defineProperties()的第二个参数一样)。注意:该参数对象不能是 undefined,另外只有该对象中自身拥有的可枚举的属性才有效,也就是说该对象的原型链上属性是无效的。

抛出异常

如果 proto 参数不是 null 或一个对象值,则抛出一个 TypeError 异常。

eg:

//Shape - superclass
function Shape() {
 this.x = 0;
 this.y = 0;
}
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info("Shape moved.");
};
// Rectangle - subclass
function Rectangle() {
 Shape.call(this); //call super constructor.
}
Rectangle.prototype = Object.create(Shape.prototype);
var rect = new Rectangle();
rect instanceof Rectangle //true.
rect instanceof Shape //true.
rect.move(1, 1); //Outputs, "Shape moved."

上述代码使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun得到如下运行结果:

JavaScript对象拷贝与赋值操作实例分析

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
浅谈javascript回调函数
Dec 07 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
Bootstrap精简教程
Nov 27 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
express 项目分层实践详解
Dec 10 #Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 #Javascript
微信小程序分享海报生成的实现方法
Dec 10 #Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 #jQuery
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 #Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 #jQuery
微信小程序与后台PHP交互的方法实例分析
Dec 10 #Javascript
You might like
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
鼠标图片振动代码
2006/07/06 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
python实现目录树生成示例
2014/03/28 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python 上下文管理器使用方法小结
2017/10/10 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
高级工程师英文求职信
2014/03/19 职场文书
就业协议书
2014/09/12 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
2014年图书室工作总结
2014/12/09 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书