脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js继承call()和apply()方法总结

js继承call()和apply()方法总结

 更新时间：2014年12月08日 09:50:50   投稿：hebedich  
本文介绍了js继承当中的call和apply方法，从定义到常用实例都做了分析，非常的实用，推荐给小伙伴们。

1、方法定义

call方法:
语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply方法：
语法：apply([thisObj[,argArray]])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

2、常用实例

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
还有 callee，caller..

您可能感兴趣的文章:

相关文章

  • 如何理解JS函数防抖和函数节流

    如何理解JS函数防抖和函数节流

    函数防抖和函数节流都是对函数进行特殊的设置，减少该函数在某一时间段内频繁触发带来的副作用。二者只是采用的设置方式和原理不一样，其最终的目的是一样的。
    2021-05-05
  • 微信小程序的注册页面包含倒计时验证码、获取用户信息

    微信小程序的注册页面包含倒计时验证码、获取用户信息

    本文通过实例代码给大家介绍了微信小程序的注册页面包含倒计时验证码、获取用户信息的相关知识，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2019-05-05
  • 通过url查找a元素应用案例

    通过url查找a元素应用案例

    这篇文章主要介绍了通过url查找a元素的实现思路，解决一些比较实际的问题，感兴趣的朋友可以参考下
    2014-04-04
  • JavaScript 编写枚举的最有效方法分享

    JavaScript 编写枚举的最有效方法分享

    这篇文章主要介绍了JavaScript 编写枚举的最有效方法分享，JavaScript语言本身不支持枚举。如果我们想模拟枚举，我们可以使用一个对象。更多相关内容感兴趣的小伙伴可以参考一下
    2022-06-06
  • JS时间戳与日期格式互相转换的简单方法示例

    JS时间戳与日期格式互相转换的简单方法示例

    这篇文章主要给大家介绍了关于JS时间戳与日期格式互相转换的简单方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • js开发插件实现tab选项卡效果

    js开发插件实现tab选项卡效果

    这篇文章主要为大家详细介绍了js开发插件实现tab选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Javascript实现重力弹跳拖拽运动效果示例

    Javascript实现重力弹跳拖拽运动效果示例

    本文为大家详细介绍下使用Javascript实现重力弹跳拖拽运动的具体调用方法，感兴趣的朋友可以参考下哈
    2013-06-06
  • IE8 chrome中table隔行换色解决办法

    IE8 chrome中table隔行换色解决办法

    今天把项目生成好后，发布到万维网上进行测试，发现table的隔行换色在IE8，chorem中不能正常显示。找了许多资料，CSS看样是不能解决，只能用JS来控制了
    2010-07-07
  • JavaScript实现打地鼠游戏

    JavaScript实现打地鼠游戏

    这篇文章主要为大家详细介绍了JavaScript实现打地鼠游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Javascript中各种trim的实现详细解析

    Javascript中各种trim的实现详细解析

    这篇文章主要是对Javascript中各种trim的实现进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12

最新评论