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中的escape及unescape函数的php实现代码
Sep 04 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 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
基于mysql的bbs设计(四)
2006/10/09 PHP
用PHP生成html分页列表的代码
2007/03/18 PHP
PHP关联链接常用代码
2012/11/05 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
python实现图片文件批量重命名
2020/03/23 Python
深入了解Python在HDA中的应用
2019/09/05 Python
python tkinter基本属性详解
2019/09/16 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
班组长安全生产职责
2013/12/16 职场文书
《长相思》听课反思
2014/04/10 职场文书
怀念母亲教学反思
2014/04/28 职场文书
教师读书活动总结
2014/05/07 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
离婚协议书范文2016
2016/03/18 职场文书
详解redis在微服务领域的贡献
2021/10/16 Redis
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS