JS模拟面向对象全解(二、类型与赋值)


Posted in Javascript onJuly 13, 2011

类型赋值类似变量传递的问题。
基本数据类型不必说,传值的。

var a=5; 
var b=a; 
b=3; 
alert(a);//提示5 
alert(b);//提示3

由此观之,发现改变b不会改变a,因为都是变量的值在来回传递,和变量本身没有关系。
对象类型,传址的。
var a=new Object(); 
a.x=5; 
var b=a; 
b.x=3; 
alert(a.x);//提示3 
alert(b.x);//提示3

这样,由于传址,所以b即是a,a即是b,互相改变。
如若还不清楚,再举个例子:
var a=new Object(); 
a.x=5; 
var b=a; 
alert(b.x);//提示5,b.x即a.x,都是5 
a.x=3;//改a.x即改b.x,都是3了 
alert(a.x);//提示3 
alert(b.x);//提示3

不过,对象类型的属性互相赋值,就与对象类型没关系了,就和其属性的类型有关系。
属性是基本数据类型则传值,属性是对象类型则传址。举个例子吧,简单点:
var a=new Object(); 
a.x=5; var b=new Object(); 
b.x=a.x; b.x=3; 
alert(a.x);//提示5 
alert(b.x);//提示3

上面来回赋值的不过是两个不同对象的属性,都是互相孤立的,也都是基本数据类型,因此只是互相传值,不会互相影响。
var a=new Object(); 
a.x=5; 
var b=a.x; 
b=3; 
alert(a.x);/提示/5 
alert(b);//提示3

这也是一样,b这个基本数据类型与a的基本数据类型的属性x相互赋值,同样不会互相影响,只是互相传值。
可是,对象的属性如果也是对象类型,那就也是传址了。
var a=new Object(); 
a.x=new Object; 
a.x.n=5; 
var b=a.x; 
alert(b.n);//提示5 
b.n=3;//也就改了a.x的n 
alert(a.x.n);//提示3 
alert(b.n);//提示3

a对象的属性x,被定义为一个Object对象类型。因此b赋值为a.x时,他们就是互通的了,其实就是同一个了,可以互相影响、改变。
————
可是,如果我想让对象类型变量赋值时,只是拷贝属性,而不是达到“你就是我,我就是你”的境界、“同生共死”的高尚品格。怎么办?
木有什么特别好的办法,用下面这个函数吧。
var DeepCopy = function(destination, source) 
{ 
for (var property in source) 
{ 
var copy = source[property]; 
if ( destination === copy ) continue; 
if ( typeof copy === "object" ) 



{ 
destination[property] = DeepCopy(destination[property] || {}, copy); 
  } 



 else 



 { 

 destination[property] = copy; 

 } 
} 
return destination; 
}

用法
var a=new Object; 
a.x=5; 
a.y=3; 
var b=new Object; 
DeepCopy(b,a); 
alert(b.x);//提示5 
alert(b.y);//提示3 
b.x=8; 
alert(a.x);//提示5

看,修改了b.x却不能影响a.x了吧?
这个DeepCopy是个不错的函数。
上面实现了对象类型的模拟“传值”
那么怎么做才能模拟基本数据类型的“传址”?
就是用Array对象。
function change(a) 
{ 
a[0]=5; 
alert(a);//提示5 
} 
var x=[3]; 
alert(x);//提示3 
change(x); 
alert(x);//提示5

赋值为一个[xx],其实就是赋值为一个有数据的Array对象。这里就是利用含有一个元素的数组来模拟传址。因为数组是对象类型,传递时传址。
当然,你也可以用任意对象类型的属性来模拟。
Javascript 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
使用express来代理服务的方法
Jun 21 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 #Javascript
一些实用的jQuery代码片段收集
Jul 12 #Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 #Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 #Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 #Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 #Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 #Javascript
You might like
用php将任何格式视频转为flv的代码
2009/09/03 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
详解用python生成随机数的几种方法
2019/08/04 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
Python datetime 如何处理时区信息
2020/09/02 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
工程力学专业毕业生求职信
2013/10/06 职场文书
最新的咖啡店创业计划书
2013/12/30 职场文书
12月红领巾广播稿
2014/02/13 职场文书
小学教师培训方案
2014/06/09 职场文书
应急管理培训方案
2014/06/12 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
工资证明格式模板
2015/06/12 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript