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 相关文章推荐
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
JS中Location使用详解
May 12 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
微信小程序下拉菜单效果的实例代码
May 14 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
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
脚本收藏iframe
2006/07/21 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
Python深入学习之特殊方法与多范式
2014/08/31 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
python简单操作excle的方法
2018/09/12 Python
python实现汉诺塔算法
2021/03/01 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
python基于opencv检测程序运行效率
2019/12/28 Python
python 下划线的不同用法
2020/10/24 Python
Python 使用office365邮箱的示例
2020/10/29 Python
HTML5新标签兼容——> 的两种方法
2018/09/12 HTML / CSS
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
财务主管的岗位职责
2013/12/30 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
美德少年事迹材料
2014/01/23 职场文书
2014年情人节活动方案
2014/02/16 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
组工干部对照检查材料
2014/08/25 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python