JS面向对象、prototype、call()、apply()


Posted in Javascript onMay 14, 2009

一、 起因
那天用到prototype.js于是打开看看,才看几行就满头雾水,原因是对js的面向对象不是很熟悉,于是百度+google了一把,最后终于算小有收获,写此纪念一下^_^。
prototype.js代码片段

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
} 
// Class使用方法如下 
var A = Class.create(); 
A. prototype={ 
initialize:function(v){ 
this .value=v; 
} 
showValue:function(){ 
alert(this.value); 
} 
} 
var a = new A(‘helloWord!'); 
a. showValue();//弹出对话框helloWord!

l initialize是什么?
l apply方法是干什么的?
l arguments变量呢?
l 为什么new A后就会执行initialize方法?
寻找答案:
二、 Js的面向对象
initialize是什么?
只不过是个变量,代表一个方法,用途是类的构造函数。
其具体功能靠js的面向对象支持,那么js的面向对象是什么样子的那?和java 的有什么相同与不同?
看代码:
var ClassName = function(v){ 
this.value=v; 
this.getValue=function(){ 
return this.value; 
} 
this.setValue=function(v){ 
this.value=v; 
} 
}

那么JS中的函数和类有什么不同呢?
其实是一样的,ClassName就是一个函数,当出现在new后面的时候就作为一个构造函数来构造对象。

var objectName1 = new ClassName(“a”);//得到一个对象

其中objectName1就是执行ClassName构造函数后得到的对象,而在ClassName函数中的this指的就是new之后构造出来的对象,所以objectName1会后一个属性和两个方法。可以通过这样来调用他们:
objectName1.setValue(''hello''); 
alert(objectName1.getValue());//对话框hello 
alert(objectName1.value) ;//对话框hello

那么
var objectName2 = ClassName(“b”);//得到一个对象

这样objectName2得到的是什么呢?显然是方法的返回值,这里ClassName只作为了一个普通的函数(虽然首字母大写了)。但是在之前写的ClassName中并没有返回值,所以objectName2会是undifinded那么“b”赋给谁了呢?在这并没有产生一个对象,而只是单纯的执行这个方法,所以这个“b”赋值给了调用这个方法的对象window,证据如下:
var objectName2 = ClassName(“b”);//得到一个对象
alert(window.value);//对话框b
所以JS中的所有function都是一样的,但是用途可能是不同的(用作构造对象抑或是执行一个过程)。
下面该回到主题了initialize是干什么的?
var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
} 
var A = Class.create();

这段代码是构造个一个function复制给A,这个function是
function() { 
this.initialize.apply(this , arguments); 
}

并且后面这个方法是用来做构造函数的。当使用这个构造函数来构造对象的时候,会让构造出来的这个对象的initialize变量执行apply()方法,apply()的用途后面在说,继续说initialize。这样在初始化对象的时候会联系到initialize(怎么联系就要看apply的了)。
那么
A.prototype={ 
initialize:function(v){ 
this .value=v; 
} 
showValue:function(){ 
alert(this.value); 
} 
}

是什么意思呢?
Prototype是“原型”的意思。A是一个function(),那么A. prototype,就是function中的一个变量,其实是个对象。这个对象拥有什么方法,那么function产生的对象就拥有什么方法,故
var a = new A(‘helloWord!');
a. showValue();//弹出对话框helloWord!
所以a对象也会有initialize方法,不只如此,每一个有A构造出来的对象都会有一个initialize方法,而在前面说过,构造的时候会调用构造函数,构造函数里面会让initialize去调用apply方法,于是在new A(‘helloWord!')的时候initialize回去调用apply方法。这也就是调用了一个初始化的方法。
三、 call()和apply()
下面开始研究apply(),在网上找了几个资料,并结合自己的研究,了解了call()和apply()的功能。功能基本一样,function().call(object,{},{}……)或者function().apply (object,[……])的功能就是对象object调用这里的funciton(),不同之处是call参数从第二个开始都是传递给funciton的,可以依次罗列用“,”隔开。而apply只有两个参数,第二个是一个数组,其中存储了所有传递给function的参数。
this.initialize.apply(this , arguments);
是什么意思?
这里的第一个this,是指用new调用构造函数之后生成的对象,也就是前面的a,那么第二个this也当然应该是指同一个对象。那这句话就是this(也就是a)调用initialize方法,参数是arguments对象(参数的数组对象),所以在构造函数执行的时候,对象a就会去执行initialize方法来初始化,这样就和单词“initialize”的意思对上了。
那么执行initialize方法的参数怎么传递进去的呢?
四、 Arguments对象
这段代码能说明一切了:
function test(){ 
alert(typeof arguments); 
for(var i=0; i<arguments.length; i++){ 
alert(arguments[i]); 
} 
} 
test("1","2","3"); 
test("a","b");

执行后alert(typeof arguments);会显示object,说明arguments是对象。然后会依次打出1、2、3。说明arguments就是调用函数的实参数组。
var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
}

arguments 就是create返回的构造函数的实参数组,那么在
var a = new A(‘helloWord!');
的时候‘helloWord!'就是实参数组(虽然只有一个字符串),传递给方法apply,然后在调用initialize 的时候作为参数传递给初始化函数initialize。
Javascript 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
JavaScript Date对象使用总结
May 14 #Javascript
jQuery 技巧大全(新手入门篇)
May 12 #Javascript
JS 字符串连接[性能比较]
May 10 #Javascript
javascript获取当前ip的代码
May 10 #Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 #Javascript
extjs fckeditor集成代码
May 10 #Javascript
一组JS创建和操作表格的函数集合
May 07 #Javascript
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
Jquery 基础学习笔记
2009/05/29 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
快速查询Python文档方法分享
2017/12/27 Python
Python logging模块用法示例
2018/08/28 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
学校联谊活动方案
2014/02/15 职场文书
演讲比赛策划方案
2014/06/11 职场文书
入党函调证明材料
2015/06/19 职场文书
汽车销售员工作总结
2015/08/12 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书