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 布尔操作符解析  && || !
Aug 10 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
javascript每日必学之循环
Feb 19 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 #Javascript
You might like
PHP学习之整理字符串
2011/04/17 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
php实现头像上传预览功能
2017/04/27 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python机器学习之决策树算法
2017/12/22 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
python tkinter实现屏保程序
2019/07/30 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
心得体会范文
2014/01/04 职场文书
2014离婚协议书范文
2014/09/10 职场文书
离职报告格式
2014/11/04 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
检察院起诉书
2015/05/20 职场文书
爱国之歌(8首)
2019/09/29 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书