一、 起因 
那天用到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。

解析 this.initialize.apply(this, arguments)的更多相关文章

  1. 理解 this.initialize.apply ( this, arguments )定义对象的一种方式

    var Class = { create:function() { return function() { this.initialize.apply(this, arguments); }; } } ...

  2. apply 与arguments的用法

    一个小练习: 用一个 函数来代替console.log()的功能 function log(a){ console.log.apply(null,arguments);//arguments 是传的实 ...

  3. jquery 中 fn.apply(this, arguments)是什么函数?有什么作用?能举个例子吗

    function Person(name){ this.name=name; this.sayname=function (){ alert(this.name); } } function Stud ...

  4. 关于this的全面解析(call,apply,new)

    我们在写代码的时候,时常会被this弄的傻傻分不清楚,看源码的时候也经常被call啊apply啊弄的头皮发麻.this到底是什么?本文主要根据书上和实际应用做了一些归纳.一般情况下this有4种绑定规 ...

  5. js基础篇——call/apply、arguments、undefined/null

    a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...

  6. 利用apply和arguments复用方法

    首先,有个单例对象,它上面挂了很多静态工具方法.其中有一个是each,用来遍历数组或对象. var nativeForEach = [].forEach var nativeMap = [].map ...

  7. 解析JavaScript中apply和call以及bind

    函数调用方法 在谈论JavaScript中apply.call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些: 作为函数 作为方法 作为构造函数 通过它们的call()和apply()方法间 ...

  8. JS 关于 bind ,call,apply 和arguments p8

    关于这3个货,网上有很多文章介绍,我这边还是记录下并加上自己的理解,还有arguments函数内置对象顺便也记录下: 简单的说apply和call 会绑定第一个参数的作用域给调用函数对象实例,并会执行 ...

  9. 【进阶3-3期】深度广度解析 call 和 apply 原理、使用场景及实现(转)

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记  https://github.com/yygmind/blog/issues/22 call() 和 apply() call() 方法调用一个 ...

随机推荐

  1. cctype函数 (字符类型判断)

    这些函数都在cctype头文件定义 isalnum(c)  如果C是字母或数字,则为TRUE isalpha(c)  如果C是字母,返回TRUE iscntrl(c) 如果C是控制字符,返回TRUE ...

  2. XML文件操作类--创建XML文件

    这个类是在微软XML操作类库上进行的封装,只是为了更加简单使用,包括XML类创建节点的示例. using System; using System.Collections; using System. ...

  3. 增量升级(省流量更新)的Android客户端实现

    转载与 zhouhuiah的专栏 http://blog.csdn.net/zhouhuiah/article/details/16939937 本文在以上两篇博客的基础上再增加了异常处理,并将生成的 ...

  4. Ubuntu14.04 caffe 配置

    1.前置条件验证 (1) Ubuntu14.04操作系统. (2) 检验计算机是否为NVIDIA显卡,终端输入命令 $ lspci | grep -invidia  (3) 检验计算机是否为x86_6 ...

  5. cygwin中运行命令提示command not found的解决方法

    在cygwin下运行ls等linux常见命令时出现“command not found”的提示,原因是环境变量没有配置好,因此只要将环境变量配置正确,即可正常使用.举例说明,cygwin安装在C盘根目 ...

  6. K均值算法实现

    运行环境:Ubuntu+Code::Blocks(G++) K-均值:在D(数据集)中随机地选择k个对象,每个对象代表一个簇的初始均值或中心.对剩下的每个对象,根据其与各个簇中心的欧式距离,将它分配到 ...

  7. java(POI):基于模版的Excel导出功能,局部列写保护总结

    需求描述: 1.导出的Excel中部分列包含有下拉列表,并没有尝试过用代码实现这种功能,个人感觉比较棘手,故采用了模版的形式,直接导出数据到已经创建好的Excel模版中 2.Excel的第一列需要写保 ...

  8. 图说苹果工作站-MAC PRO

    图说苹果工作站-MACPRO MacPro是苹果电脑公司(Apple)推出的高阶桌上型电脑(上一代产品叫做PowerMacG5),搭载英特尔(Intel)"Xeon"微处理器以及& ...

  9. 【spring 4】AOP:动态代理

    一.动态代理简介 动态代理与普通代理相比较,最大的好处是接口中声明的所有方法都被转移到一个集中的方法中处理(invoke),这样,在接口方法数量比较多的时候,我们可以进行灵活处理,而不需要像静态代理那 ...

  10. 法线贴图——Normal Mapping

    对于不曾学过.用过法线贴图的人来说,提到法线贴图,经常会提到的问题是什么是法线贴图?法线贴图用于解决什么问题?法线贴图的原理是什么?本文将就这三个问题阐述本人的一些见解,各位不喜勿喷!!! 谈到法线贴 ...