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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
优化网页之快速的呈现我们的网页
Jun 29 Javascript
用JavaScript编写COM组件的步骤
Mar 17 Javascript
js 字符串操作函数
Jul 25 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
js实现验证码功能
Jul 24 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抓取https的内容的代码
2010/04/06 PHP
php如何获取文件的扩展名
2015/10/28 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
Prototype Array对象 学习
2009/07/19 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
Python中用于计算对数的log()方法
2015/05/15 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python数据正态性检验实现过程
2020/04/18 Python
python删除某个目录文件夹的方法
2020/05/26 Python
Django REST 异常处理详解
2020/07/15 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
XML文档面试题
2015/08/05 面试题
2014年国庆晚会主持词
2014/09/19 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
生日答谢词
2015/01/05 职场文书
《迟到》教学反思
2016/02/24 职场文书
Vue操作Storage本地化存储
2022/04/29 Vue.js