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 相关文章推荐
iphone safari不支持position fixed的解决方法
May 04 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
微信小程序自定义底部弹出框
Nov 16 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
js实现橱窗展示效果
Jan 11 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下使用iconv需要注意的问题
2010/11/20 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
CSS常用网站布局实例
2008/04/03 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
Go 语言结构实例分析
2021/07/04 Golang
MySQL导致索引失效的几种情况
2022/06/25 MySQL