在js编程中实现继承时 用到了两个很特殊的方法,call和apply。

在ECMAScript v3中,给Function原型定义了这两个方法,这两个方法的作用都是一样的:使用这两个方法可以像调用其他对象方法一样调用函数,这句话是从书上抄的,至少我是没读明白这是什么意思。
下面说简单易懂的,先看段代码:

  1. function Introduce(name,age)
  2. {
  3. document.write("My name is "+name+".I am "+age);
  4. }
  5. var p=new People();
  6. Introduce.call(p,"Windking",20);

就说上面的这段代码,用了call之后,Introduce就成了p的方法,不知道这样说你明白了么?

使用了call方法,上述的代码就等同于了这个代码:

  1. function People(name,age)
  2. {
  3. this.name=name;
  4. this.age=age;
  5. this.Introduce=function(){
  6. document.write("My name is "+name+".I am "+age);
  7. };
  8. }

明白意思了么?apply也是一样的作用。

好,我们不管这个方法到底能在实际中用到什么,先讲语法。
call接受至少一个参数,call的第一个参数是指你所需要的对象,比如说上面的那个例子,Introduce方法希望他能够被对象p所调用,那么就把p作为call的第一个参数。剩余的参数个数是任意的,作用是作为Introduce方法的参数。顺序按照Introduce参数声明的顺序。比如Introduce.call(p,"Windking",20),假如Introduce是p的一个实例方法,那么也就是这样的:p.Introduce("Windking",20)。明白了么?记住,传入参数的顺序要与函数声明参数的顺序保持一致。  www.jbxue.com
了解了call,apply方法就容易理解了,apply和call唯一的区别是call接受至少一个参数,而apply只接受两个参数,第一个参数与call一样,第二个参数是一个带下标的集合,比如说Introduce.call(p,"Windking",20)就可以改写成Introduce.apply(p,["Windking",20])了。这次明白了么?
那究竟这两个方法有什么用呢?如果我们只是为了实现上面的那个功能,把Introduce实现为People的方法不是更好么?

我把应用总结为两条:
1.共享方法。先看代码:

  1. function Introduce(name,age)
  2. {
  3. document.write("My name is "+name+".I am "+age);
  4. }

这是一个自我介绍的方法,现在假设有一个男孩的类,和一个女孩的类(在这里我只是为了演示,在实际中,会用一个People的父类),因为他们的Introduce都是一样的,于是我们就可以共享这个方法。

  1. function Boy()
  2. {
  3. this.BoyIntroduce=function(){
  4. Introduce.call(this,name,age);
  5. };
  6. }

同理,Girl中也是一样,这样的话,我们就可以避免写代码了。其实这个有些牵强,因为我们完全也可以写成:

  1. function Boy()
  2. {
  3. this.BoyIntroduce=function(){
  4. Introduce(name,age);
  5. }
  6. }

但是这个时候,我们如果用Apply的话,就看上去简单多了:

  1. function Boy()
  2. {
  3. this.BoyIntroduce=function(){
  4. Introduce.apply(this,arguments);
  5. };
  6. }

是不是简单了很多呢?如果参数很多的话,那么是不是不用再写那么一场串密密麻麻的参数了呢!

2.跨域调用 www.jbxue.com
一个简单的例子(仅为演示,无任何价值):

  1. function Boy(name,age)
  2. {
  3. this.BoyIntroduce=function(){
  4. document.write("My name is "+name+".I am "+age);
  5. }
  6. }
  7. function Girl(name,age)
  8. {
  9.  
  10. }

这是一个Boy和一个Girl类,然后我们写如下的代码:

  1. var b=new Boy("Windking",20);
  2. b.BoyIntroduce();

这没有任何异议。假设有一天有一个女孩也希望做一下自我介绍,只是偶然用一下,那么我就没有必要修改Girl类,因为其他的女孩比较害羞,不喜欢自我介绍。那么这个时候我就可以这样。

  1. var g=new Girl("Xuan",22);
  2. Introduce.call(g,"Xuan",22);

3,真正用处——继承

下面才是call和apply最广泛的应用,就是用于构造继承。

js方法call和apply实例解析的更多相关文章

  1. jQuery CSS()方法改变CSS样式实例解析

    转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一 ...

  2. C# 解析js方法,并调用js方法

    本文转载:http://www.cnblogs.com/StudyLife/archive/2013/03/11/2953516.html 本文不是基于B/S的 后台调用前台js方法,而是给你一段js ...

  3. jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行?

    jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行? 因为在解析时最新解析的就是JA ...

  4. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  5. 使用JS简单实现一下apply、call和bind方法

    使用JS简单实现一下apply.call和bind方法 1.方法介绍 apply.call和bind都是系统提供给我们的内置方法,每个函数都可以使用这三种方法,是因为apply.call和bind都实 ...

  6. 第164天:js方法调用的四种模式

    js方法调用的四种模式 1.方法调用模式 function Persion() { var name1 = "itcast", age1 = 19, show1 = functio ...

  7. Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

    一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...

  8. .net mvc 站点自带简易SSL加密传输 Word报告自动生成(例如 导出数据库结构) 微信小程序:动画(Animation) SignalR 设计理念(一) ASP.NET -- WebForm -- ViewState ASP.NET -- 一般处理程序ashx 常用到的一些js方法,记录一下 CryptoJS与C#AES加解密互转

    .net mvc 站点自带简易SSL加密传输   因项目需要,传输数据需要加密,因此有了一些经验,现简易抽出来分享! 请求:前端cryptojs用rsa/aes 或 rsa/des加密,后端.net ...

  9. JS中call和apply区别有哪些 记录

    一.call和apply区别 传递参数的方式.用法上不同,主要是参数不完全同 (1).B.Function.call(A,arg,arg) 这个例子是讲A对象“调用”B对象的Function(某个具体 ...

随机推荐

  1. C#.NET常见问题(FAQ)-在VS程序如何取消.vshost的进程

    双击执行一个EXE程序,会有两个进程,程序关闭之后,貌似只能关闭你的程序,附加的vshost.exe仍然存在   在调试页面,改成release,同时取消最后一项启用承载进程   在生成页面,将高级选 ...

  2. Office WORD如何在图片上添加文字

    如图所示,在图片格式中选择图片衬于文字下方即可,这样看起来感觉就像在图片上直接加字一样,没有生硬的感觉. 最终效果: Word如何在图片上添加文字Word如何在图片上添加文字Word如何在图片上添加文 ...

  3. ubuntu server 安装 mantis bug tracker 中文配置

    ubuntu server 安装 mantis bug tracker 中文配置 官网:http://www.mantisbt.org/ 一:安装: 1:进入到 apache2的网站目录: cd /v ...

  4. 测试storm异常信息(时时更新)

    Exception in thread "main" java.lang.RuntimeException: org.apache.thrift7.protocol.TProtoc ...

  5. Linux学习笔记——Ubuntu更新软件源

    0.前言     通过改动ubuntu软件源可提高apt命令下载安装软件的速度.     參考资料     [官方资料]--配置文件改动方法     [Ubuntu如何改动软件源地址]--使用ubun ...

  6. 算法笔记_172:历届试题 波动数列(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 观察这个数列: 1 3 0 2 -1 1 -2 ... 这个数列中后一项总是比前一项增加2或者减少3. 栋栋对这种数列很好奇,他想知道长度 ...

  7. java面试第五天

    修饰符abstract:抽象的,定义框架不去实现,可以修饰类和方法 abstract修饰类: 会使这个类成为一个抽象类,这个类将不能生成对象实例,但可以做为对象变量声明的类型,也就是编译时类型 抽象类 ...

  8. redis_session_store.py

    # -*- coding: utf-8 -*- """ Created on 09/11/2011 @author: Carlo Pires <carlopires ...

  9. springmvc自己定义拦截器

    Spring MVC也能够使用拦截器对请求进行拦截处理,用户能够自己定义拦截器来实现特定的功能,自己定义的拦截器必须实现HandlerInterceptor接口. 直接看下样例: package co ...

  10. 〖Linux〗build ssh for Arm

    1. 交叉编译环境: export ARCH=arm export SUBARCH=arm export PATH=/opt/FriendlyARM/toolschain//bin:$PATH exp ...