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框架
Aug 13 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
使用JS动态显示文本
Sep 09 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
javaScript中"=="和"==="的区别详解
Mar 16 Javascript
微信小程序 冒泡事件原理解析
Sep 27 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 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python中自定义函数的教程
2015/04/27 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
python实现键盘输入的实操方法
2019/07/16 Python
python实现ip地址的包含关系判断
2020/02/07 Python
python如何快速生成时间戳
2020/07/21 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
电气技术员岗位职责
2013/11/19 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
信访工作经验交流材料
2014/05/23 职场文书
航空学院求职信
2014/06/11 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
大连导游词
2015/02/12 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js