JavaScript之call()和apply()方法详解
简介:apply()和call()都是属于Function.prototype的一个方法属性,它是JavaScript引擎内在实现的方法,因为属于Function.prototype,所以每个Function实例,也就是每个方法都能使用apply和call方法。
作用:call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。(需要理解JavaScript的执行环境和作用域的概念)
介绍完这两个方法后,说下它们的异同点:
相同点:这两个方法都是劫持另外一个对象的方法,继承另外一个对象的属性. 怎样理解这句话呢?代码如下:
例子 一:
function people(){
/*this.name="无名氏";*/
this.sayName=function(){
alert("您的姓名是:"+this.name);
}
}
function xiaohua(){
this.name="小花";
people.call(this); //这里使用call()方法的作用是,当前this对象(xiaohua对象),劫持了people对象,所以people中的this指向了xiaohua对象,所以xiaohua对象拥有了
//所有people对象的方法和属性
}
var aa=new xiaohua();
aa.sayName(); //输出: 您的姓名是:小花
例子二:
function cat() {
}
cat.prototype={
food:"fish",
say:function(){
alert("I love "+this.food)
}
}
var blackcat=new cat();
blackcat.say(); //输出:I love fish
这里做个假设我们有一个对象whiteDog={food:"bone"},我不想对它重新定义say方法,因为这个say方法对需求来说完全适用!这个使用就需要使用call方法了!代码如下:
function cat() {
}
cat.prototype={
food:"fish",
say:function(){
alert("I love "+this.food)
}
}
var blackcat=new cat();
//这里做个假设我们有一个对象whiteDog={food:"bone"},我不想对它重新定义say方法,因为这个say方法对需求来说完全适用
var whiteDog={food:"bone"};
blackcat.say.call(whiteDog); //这句代码的意思是blackcat对象实例里面的say方法属性里面的this指向whiteDog对象,所以say方法里面的food属性就被whiteDog里面的food属性替换掉了
whiteDog.say();//输出I love bone
例子三:
下面这个例子据说是网易的前端面试题,来look,look
var testA = function (b) {
return this.a + b;
};
var obj = {a: 2};
var testB = testA.myBind(obj, 1);
alert(testB);
问题是:怎样实现myBind()方法,才能使testB的值3;
先一步步分析,
(1)我们发现myBind()方法是通过testA()方法调用的,我们知道在JavaScript中所有的方法都是一个对象,而所有的方法都继承自Function对象,所以所有在Function.prototype的方法和属性,将被所有的方法实例共享,比如call,apply。所有的方法实例都能通过fun1.(Function.prototype的中定义方法和属性)的形式调用。
而这里的myBind也是通过方法实例调用的方法,这种情况只有两种可能:
1:是上面所分析的是Function.prototype的方法实例,被所有的方法所共享的方法
2:内嵌函数,嵌套在testA函数中的函数
但是分析testA方法的形参和返回值,排除了第二种可能,那只能是第一种情况,代码如下:
Function.prototype.myBind=function(object,extra){ //当哪个方法调用myBind方法,其this指针就指向该方法
return this.call(object,extra); //传入的object对象劫持了testA对象,所以testA对象中的this指向objetc对象
}
var testA = function (b) {
return this.a + b;//这里的this指向object对象,所以this.a=2,b=1;
};
var obj = {a: 2};
var testB = testA.myBind(obj, 1);
alert(testB);//输出:3
例子四:
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
这样domNodes就可以应用Array下的所有方法了。
<script>
function add(para1,para2) {
alert(this); //输出:function substract(para1,para2) {return para1-para2;}
return para1+para2;
}
function substract(para1,para2) {
return para1-para2;
}
alert(window.add.call(window.substract,1,2));//输出:3
// 这里注意:这里的上下文只和属性和方法有关,也就是说add方法劫持了substract方法的上下文对象,能使用其内部的属性和方法
//但是其return语句并不会被覆盖,还是输出return para1+para2 //首先先分析下上面这段语句的执行过程,首先将add的上下文对象替换成substract方法的对象,
// 然后调用add方法并传入1和2两个参数 </script>
例子六:使用Call()方法实现单继承
<script>
function Animal(name) {
/* console.log(this);//输出Cat对象*/
this.name=name;
this.sayName=function () {
alert(this.name);
}
}
function Cat(name) {
Animal.call(this,name);
//首先Animal劫持了this(Cat)对象,将Animal中的上下文替换成了Cat的上下文,更具上面的输出可以看出,然后调用Animal方法并传入
//name参数给Aniaml方法,我个人觉得应该是js引擎在做完上面的操作后返回一个Animal和Cat的结合的实体引用回去
//所以我改变上面的代码加了一个 return,发现没有影响,也印证了我的猜测
}
var cat=new Cat("cat");
cat.sayName();//输出:cat,根据输出得知,call方法可以实现oop的继承功能
</script>
例子七:使用call实现多继承,上面的单继承如果理解了的话,那么多继承也就很简单了
<script>
function Add()
{
this.a=1;
this.b=2;
this.add=function(a,b)
{
return a+b;
}
}
function Substract()
{
this.sub=function(a,b)
{
return a-b;
}
}
function Operation(a,b)
{
Add.call(this,a,b);
Substract.call(this,a,b);
}
var op=new Operation();
alert(op.add(1,2));//输出:3
alert(op.sub(1,2));//输出:-1 //终极版分析:
//分析上面方法的执行过程,首先初始化Operation对象,然后Add劫持Operation,Add内部的this指向Operation
//其实这个劫持过程可以理解为在初始化Operation对象的时候,将Add对象初始化为自己的内部属性,方便调用
//这个分析我是更具在chrome中的js运行过程看出来的,纯属我个人的观点
</script>
JavaScript之call()和apply()方法详解的更多相关文章
- Js apply 方法 详解
Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- angularJS中$apply()方法详解
这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下 对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...
- Js apply方法详解,及其apply()方法的妙用
Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- 深入学习JavaScript: apply 方法 详解(转)——非常好
主要我是要解决一下几个问题: 1. apply和call的区别在哪里 2. 什么情况下用apply,什么情况下用call 3. apply的其他巧妙用法(一般 ...
- JavaScript: apply 方法 详解(转)——非常好
转载自 http://www.cnblogs.com/KeenLeung/archive/2012/11/19/2778229.html 我在一开始看到javascript的函数apply和call ...
- 深入学习JavaScript: apply 方法 详解
我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...
- angularjs $scope.$apply 方法详解
myApp.controller('firstController',function($scope,$interval){ $scope.date = new Date(); setInterval ...
- Js apply方法详解
我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...
- JavaScript原生对象属性和方法详解——Array对象
http://www.feeldesignstudio.com/2013/09/native-javascript-object-properties-and-methods-array/ lengt ...
随机推荐
- JavaScript压缩混淆 / 格式化 / 美化工具 - aTool在线工具
原文地址:http://www.atool.org/jscompression.php
- ubuntu下tcpdump使用
Ubuntu默认是安装好了tcpdump工具的,如果没有安装的话使用sudo apt-get install tcpdump即可安装. (如果遇到tcpdump: no suitable devi ...
- AndroidUI 视图动画-旋转动画效果 (RotateAnimation)
RotateAnimation,能实现Android的视图的旋转效果,废话不多说直接上代码. 新建一个Android 项目,在activity_main.xml中添加一个按钮,然后使用Relative ...
- C# 连接 Mysql 中文乱码问题
网上有很多解决乱码的方法,什么 set names utf8 .什么在插入数据前进行编码,亲自试了都没有效果,在网上寻觅了很久,终于找到一种方法,并亲试成功: 首先要保证你的数据库是UTF8字符集 ...
- javascript第十二课array数组
数组的声明方式: var add=new array(元素1,元素2,元素3......); 推荐的数组声明方式: var add=[元素1,元素2,元素3,元素4....]; 数组遍历方式: 循环遍 ...
- 2014百度之星第四题Labyrinth(DP)
Labyrinth Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- Java基础笔记-抽象,继承,多态
抽象类: abstract修饰 抽象方法必须定义在抽象类中,抽象类不能创建对象. 在抽象方法中可以不定义抽象方法,作用是:让该类不能建立对象. 特点是: 1.定义在抽象类中 2.方法和类都用abstr ...
- asp.net textbox控件基础
asp.net有两种控件,一种是html控件,一种是asp控件,在说textbox控件之前,先看看按钮的两个命令oncommand和onclick.每次点击按钮后,都会提交命令,但是程序会首先执行Pa ...
- sql server 日期处理datediff
语法: DATEDIFF(datepart,startdate,enddate) datepart 参数可以是下列的值: date-part : year | quarter | month | we ...
- clinit和init(转载)
clinit和init(转载) 今天在看深入Java虚拟机的class文件结构时,看到了这么一句话, 可能出现在class文件中的两种编译器产生的方法是:实例初始化方法(名为<init> ...