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 相关文章推荐
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
json数据的列循环示例
Sep 06 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php读取msn上的用户信息类
2008/12/05 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
Symfony生成二维码的方法
2016/02/04 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
轮播的简单实现方法
2016/07/28 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
python简易远程控制单线程版
2018/06/20 Python
python实现kmp算法的实例代码
2019/04/03 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
pandas 对group进行聚合的例子
2019/12/27 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
群众路线教育实践活动总结
2014/10/30 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
春晚观后感
2015/06/11 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python