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 圆角div的实现代码
Oct 15 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
js中null与空字符串""的区别讲解
Jan 17 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 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
BBS(php & mysql)完整版(六)
2006/10/09 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP实现计算器小功能
2020/08/28 PHP
理清apply(),call()的区别和关系
2011/08/14 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
原生js实现购物车功能
2020/09/23 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python实现的HTTP并发测试完整示例
2020/04/23 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
护士毕业自我鉴定
2014/02/07 职场文书
租房协议书怎么写
2014/04/10 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
面试复试通知单
2015/04/24 职场文书
聘任通知书
2015/09/21 职场文书
SpringBoot详解执行过程
2022/07/15 Java/Android