call()和apply()方法

1.方法定义

call方法:

语法:obj.call(thisObj, arg1, arg2, ...);

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明:

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:

语法:obj.apply(thisObj, [arg1, arg2, ...]);

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

说明:

如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。

如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

2、用处与区别

call, apply作用就是借用别人的方法来调用,就像调用自己的一样.

call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的。

3、常用实例

a、

function add(a,b) {

alert(a+b);

}

function sub(a,b) {

alert(a-b);

}

add.call(sub,3,1);

这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。

b、

function Animal(){

this.name = "Animal";

this.showName = function(){

alert(this.name);

}

}

function Cat(){

this.name = "Cat";

}

var animal = new Animal();

var cat = new Cat();

通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用了。

//输入结果为"Cat"

animal.showName.call(cat,",");

//animal.showName.apply(cat,[]);

call 的意思是把 animal 的方法放到cat上执行,原来cat是没有showName() 方法,现在是把animal 的showName()方法放到 cat上来执行,所以this.name 应该是 Cat。

c、实现继承

function Animal(name){

this.name = name;

this.showName = function(){

alert(this.name);

}

}

function Cat(name){

Animal.call(this, name);

}

var cat = new Cat("Black Cat");

cat.showName();

Animal.call(this) 的意思就是使用 Animal对象代替this对象,那么 Cat中不就有Animal的所有属性和方法了吗,Cat对象就能够直接调用Animal的方法以及属性了.

d、多重继承

function Class10() {

this.showSub = function(a,b)  {

alert(a-b);

}

}

function Class11() {

this.showAdd = function(a,b) {

alert(a+b);

}

}

function Class2() {

Class10.call(this);

Class11.call(this);

}

很简单,使用两个 call 就实现多重继承了当然,js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴,只是在此说明call 的用法。说了call ,当然还有 apply,这两个方法基本上是一个意思,区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,也可以是arguments。代码如下:

var func=new function(){this.a="func"}

var myfunc=function(x,y){

var a="myfunc";

alert(this.a);

alert(x + y);

}

myfunc.call(func,"var"," fun");// "func" "var fun"

myfunc.apply(func,["var"," fun"]);// "func" "var fun"

javascript中apply()和call()方法及区别的更多相关文章

  1. 关于javascript中apply()和call()方法的区别

    如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语 ...

  2. javascript中apply()和call()方法的区别

    一.方法的定义 call方法: 语法:call(thisObj,Object)定义:调用一个对象的一个方法,以另一个对象替换当前对象.说明:call 方法可以用来代替另一个对象调用一个方法.call ...

  3. JavaScript中apply与call方法

    一.定义 apply:应用某一对象的一个方法,用另一个对象替换当前对象. call:调用一个对象的一个方法,以另一个对象替换当前对象. 二.apply //apply function Person( ...

  4. Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间       ...

  5. javascript 中 apply(或call)方法的用途----对象的继承

    一直以来,我的理解就是  js中的Function.apply(或者是Function.call)方法是来改变Function 这个函数的执行上下文(excute Context),说白了,就是改变执 ...

  6. JavaScript的apply和call方法及其区别

    参考资料: http://blog.csdn.net/myhahaxiao/article/details/6952321 apply和call能“劫持”其他对象的方法来执行,其形参如下: apply ...

  7. javascript中toString和valueOf方法的区别

    toString():将对象转为字符串 valueOf():获取对象的原始值, 1.针对基本类型的变量:如在string,number,boolean类型的变量上调用这两个方法时,直接返回原始值,即变 ...

  8. javascript中apply、call和bind的区别,容量理解,值得转!

    a)  javascript中apply.call和bind的区别:http://www.cnblogs.com/cosiray/p/4512969.html b)  深入浅出 妙用Javascrip ...

  9. 一个简单的例子让你很轻松地明白JavaScript中apply、call、bind三者的用法及区别

    JavaScript中apply.call.bind三者的用法及区别 引言 正文 一.apply.call.bind的共同用法 二. apply 三. call 四. bind 五.其他应用场景 六. ...

随机推荐

  1. JavaWeb学习 (十五)————JSP指令

    一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: pa ...

  2. [Noip2015PJ] 求和

    Description 一条狭长的纸带被均匀划分出了 \(n\) 个格子,格子编号从 \(1\) 到 \(n\) .每个格子上都染了一种颜色 \(color_i\) 用 \([1,m]\) 当中的一个 ...

  3. C++ 日期 & 时间

    C++ 标准库没有提供所谓的日期类型.C++ 继承了 C 语言用于日期和时间操作的结构和函数. 为了使用日期和时间相关的函数和结构,需要在 C++ 程序中引用 头文件. 有四个与时间相关的类型:clo ...

  4. [转]Entity Framework and slow bulk INSERTs

    本文转自:https://weblog.west-wind.com/posts/2013/Dec/22/Entity-Framework-and-slow-bulk-INSERTs I’ve been ...

  5. ES6+ 开发 React 组件

    在这里简要的说一下这些语言新特性对 React 应用的开发有什么影响,这些 ES6+ 特性使得 React 开发更简单更有趣. 类 迄今为止,最能体现我们使用 ES6+ 来编写 React 组件的就是 ...

  6. Hive原理总结(完整版)

    目录 课程大纲(HIVE增强) 3 1. Hive基本概念 4 1.1 Hive简介 4 1.1.1 什么是Hive 4 1.1.2 为什么使用Hive 4 1.1.3 Hive的特点 4 1.2 H ...

  7. RyuJIT的华丽转身【译文】

    2018-06-19 RyuJIT是作为.NET即时编译器的代号称谓,它是.NET运行时的基本组件之一.与此相反的是,Roslyn作为C#编译器,其编译C#代码成为IL字节码.然后,其再将IL字节码编 ...

  8. linux学习笔记-目录相关知识

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! linux的目录结构及作用是根据fhs标准定制的,以下列出一些常用的目录的作用,以及fhs官方网站的连接 FHS官方网站的连接: ...

  9. Harbor 搭建

    环境:centos7.4 docker-ce 18.06.0-ce docker-compose version 1.18.0 harbor 版本: 1.5.2 harbor 安装参考 https:/ ...

  10. 【20181025】win10下Python安装osmnx包

    系统:win10 64位 Python:3.7 在网上查了很多资料,主要有两种方法安装osmnx包,一种是通过anaconda安装,这种方法会自动帮你装好osmnx的依赖包:另一种是用pip安装,需要 ...