JS模拟面向对象全解(一、类型及传递)


Posted in Javascript onJuly 13, 2011

可是,没有类,何来面向对象一说?没有关系,可以模拟。而且这一套方法已经成为公认的JS实现面向对象的方法。
另外,JS内的东西完全开发,也就不存在成员的什么private、protected作用域。
下面切入正题。

一、类型

//从基础开始,省的后面看着吃力

1、类型的区别
基本数据类型和对象类型不是一回事。
a、基本类型只是一个值,没有任何行为;而对象类型有自己的行为。
b、基本类型是值类型,仅表示一个值;对象类型则拥有许多复杂的东西。
c、基本类型传递时传值,对象类型传递时传址。
另外,文本非常特殊,JS里面有两种文本类型——一种基本数据类型,一种对象类型。 举个例子:
var str="The End";//这样是基本数据类型,传递方式就是传值
var str2=new string("The End");//这就不同,有了new这个为对象开辟内存空间的标识符,对应的变量就会成为对象类型,传递时即传址
简单点说: a、直接用字面量赋值的变量,如var a=1;var b="a";var c=true;,都是基本数据类型(常用的有:数值、文本、布尔)
b、用new赋值的变量,如var a=new Object();var b=new string();,都是对象类型(JS有许多对象,算是精简的面向对象语言) 请注意:基本数据类型也可以new,但是很少有那种用法。因此上述区分办法不完全适用所有情况,请加以自行判断。

2、参数传递方式 这一节主要来区分传址、传值。 仍然拿例子来说事:

function changeVar(varible){ 

varible=5; 


alert(varible);//提示5 
} 
var a=3; 
alert(a);//提示3 
changeVar(a);//该函数内部有改变参数的代码 alert(a);//仍然提示3

根据上例可以发现,函数虽然改变了参数,但是并没有改变参数所代表的传递过去变量。这是传值。在调用changeVar时,JS重新拷贝了一份你传递的变量作为参数,所以,在changeVar内部操作的参数实际上是你传递的变量的副本,而非本身。 传递的其实是变量的值,而非变量本身。这叫做传值。
function changeVar(varible){ 

varible.x=5; 


alert(varible.x);//提示5 
} 
var a=new Object; 
a.x=3 alert(a.x);//提示3 
changeVar(a);//该函数内部有改变参数的代码 
alert(a.x);//提示5

上例改成使用Object对象了。发现,changeVar之后,原来的变量的对应属性也发生改变,函数内部就是操作的传递的变量本身。 传址就是这个道理,把你给定的变量的内存地址传递过去,函数内部改变的其实就是你传递的变量。因为操作的都是在统一内存地址的东西。

但是,一定注意这个“但是”!JS的传址还是有些特别之处! JS在传递对象类型时,大概也拷贝了一份相应类型的对象,但是副本对象的所有属性、函数都是原对象的属性、函数。 也许就是,属性传址而对象不传址。 这个特点可以证明。 代码如下:

function changeVar(varible){ 

varible=new Object(); 


varible.x=5; 


alert(varible.x);//提示5 
} 
var a=new Object; 
a.x=3 alert(a.x);//提示3 
changeVar(a);//该函数内部有改变参数的代码 
alert(a.x);//提示3

当你改变了参数代表的对象时,并未改变的了你传递的变量代表的对象。但前面说过,可以通过函数内对参数对象的属性操作改变原变量代表对象的属性。这结合起来就可以证明,JS在传递对象类型时,也拷贝了一份相应类型的对象,但是副本对象的所有属性、函数都是原对象的属性、函数。
Javascript 相关文章推荐
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
vue实现图书管理系统
Dec 29 Vue.js
一些实用的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
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 #Javascript
You might like
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
js类 from qq
2006/11/13 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
深入理解js promise chain
2016/05/05 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
分享15个最受欢迎的Python开源框架
2014/07/13 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
总经理职责范文
2013/11/08 职场文书
进步之星获奖感言
2014/02/22 职场文书
经营管理策划方案
2014/05/22 职场文书
颐和园导游词
2015/01/30 职场文书
介绍长城的导游词
2015/01/30 职场文书
董事长致辞
2015/07/29 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书