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 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
js实现日历与定时器
Feb 22 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
ES6学习教程之Promise用法详解
Nov 22 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php数组键名技巧小结
2015/02/17 PHP
php格式化电话号码的方法
2015/04/24 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
原生js实现日期联动
2015/01/12 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Python中str.join()简单用法示例
2018/03/20 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python获取txt文件词向量过程详解
2019/07/05 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
详解python logging日志传输
2020/07/01 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
编辑找工作求职信分享
2014/01/03 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
欠条样本
2015/07/03 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android