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 相关文章推荐
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 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
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
利用js对象弹出一个层
2008/03/26 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
Vue父子传递实例讲解
2020/02/14 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
三月学雷锋活动总结
2014/06/26 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
小学生家长意见
2015/06/03 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
js判断两个数组相等的5种方法
2022/05/06 Javascript