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中的style.display属性操作
Mar 27 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
浅析JS异步加载进度条
May 05 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
layui select动态添加option的实例
Mar 07 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 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
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
浅谈$('div a') 与$('div>a')的区别
2016/07/18 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python实现的多线程端口扫描工具分享
2015/01/21 Python
python和opencv实现抠图
2018/07/18 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
python读取文件名并改名字的实例
2019/01/07 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
西班牙手机之家:Phone House
2018/10/18 全球购物
在C#中如何实现多态
2014/07/02 面试题
数控技术专业毕业自荐书范文
2014/02/05 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
迟到检讨书300字
2014/02/14 职场文书
四年级小学生评语
2014/12/26 职场文书
2015年生产车间工作总结
2015/04/22 职场文书