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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
javascript不同页面传值的改进版
Sep 30 Javascript
JQuery 学习笔记 选择器之五
Jul 23 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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对二维数组进行排序的简单实例
2013/12/19 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
document.getElementById介绍
2011/09/13 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
纬创Java面试题笔试题
2014/10/02 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
超市采购员岗位职责
2014/02/01 职场文书
人事科岗位职责范本
2014/03/02 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
工地质量标语
2014/06/12 职场文书
工厂见习报告范文
2014/10/31 职场文书
欢送领导祝酒词
2015/08/12 职场文书
Python数据类型最全知识总结
2021/05/31 Python