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 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
vue仿element实现分页器效果
Sep 13 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
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
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php实现通过ftp上传文件
2015/06/19 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
用JavaScript实现动画效果的方法
2013/07/20 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
javascript常用方法汇总
2014/12/02 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
Python单链表原理与实现方法详解
2020/02/22 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
详解python中的lambda与sorted函数
2020/09/04 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
财产保全担保书范文
2014/04/01 职场文书
班长竞选演讲稿
2014/04/24 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
民间借贷被告代理词
2015/05/23 职场文书
国博复兴之路观后感
2015/06/02 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python