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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 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
SESSION存放在数据库用法实例
2015/08/08 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
python中的yield使用方法
2014/02/11 Python
深入理解python函数递归和生成器
2016/06/06 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python判断两个对象相等的原理
2017/12/12 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
Python远程方法调用实现过程解析
2020/07/28 Python
详解Python高阶函数
2020/08/15 Python
怎么写好自荐信
2013/10/30 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
农村改厕实施方案
2014/03/22 职场文书
健康状况证明书
2014/11/26 职场文书
办公用房租赁协议书
2014/11/29 职场文书
干部培训工作总结2015
2015/05/25 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js