从上一篇可以知道,不同的函式呼叫会造成this的不同,但我们能不能在呼叫时候明确指定呢?

当然可以。会有这个想法是因为往往在执行某支函式时想要用回呼函式(mizumisushi),但发现this总是显示window,为了确保this是我们想要的物件或函式,就必须使用apply及call。

可能有点难以理解,这边我们来看一个示例:

var obj = {

price:20,

sum:function(cb){

cb(100);

}

}

function getData(val){

console.log(this);

}

obj.sum(getData);//Window

可以看到我们预期getData的this是obj物件,但显示出来的却是window。

这是因为,当没有特定指明this的情况下,预设绑定(Default Binding)this为「全局物件」,也就是window。

所以除非我们透过call及apply强制指定this为自己想要的物件或函式,不然getData都会是预设的window。

就算包裹在物件内也是一样:

var obj = {

price:20,

sum:function(cb){

cb(100);

},

getData:function(val){

console.log(this,val);

}

}

obj.sum(obj.getData);//Window

好,现在我们知道call及apply可以强制指定this了,那要怎么用呢?

call及apply的作用完全一样,差别只在传入参数的方式有所不同。

call后面只接受单个值的参数,而apply只接受一个数组的参数:

var obj = {

price:20

};

function funA(x,y){

console.log(this);

console.log(x,y);

}

funA.call(obj,2,3);

//{price: 20}

//2 3

funA.apply(obj,[10,100]);

//{price: 20}

// 10 100

所以刚刚的例子我们可以这样改写:

var obj = {

price:20,

sum:function(cb){

cb.call(obj,100);

},

getData:function(val){

console.log(this,val);

}

}

obj.sum(obj.getData);

我们在第七天时有提到函式重载的示例:

function addMethod(obj,key,fn){

var old = obj[key];

obj[key] = function(){

if(fn.length === arguments.length){

return fn(arguments);

} else if(typeof old ===“function”){

return old(arguments);

}

}

}

其实这样改写会比较妥当:

function addMethod(obj,key,fn){

var old = obj[key];

obj[key] = function(){

if(fn.length === arguments.length){

return fn.apply(this,arguments);

} else if(typeof old ===“function”){

return old.apply(this,arguments);

}

}

}

以上就是call及apply的用法!

参考资料:

忍者JavaScript开发技巧探秘

重新认识JavaScript: Day 20 What's“THIS”in JavaScript

文章来源:(http://www.Lishim.com

学JS的心路历程-函式(四)apply、call的更多相关文章

  1. 学JS的心路历程 -函式(三)this

    this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...

  2. 学JS的心路历程-函式(二)arguments

    参数(argument)与函式参数(parameter) 在讨论函式时,很多人都会把这两个搞混,我自己也不例外. 虽然讲错别人也听得懂,但是我们还是要搞清楚这两个的定义到底是什么! 参数是当我们呼叫函 ...

  3. 学JS的心路历程-函式(六)其余参数及预设参数

    今天我们要来介绍ES6新增的其余参数及预设参数! 其余参数rest parameter …numbers可以让我们表示不确定数量的参数,并将其视为一个数组: function getVal(…numb ...

  4. 学JS的心路历程-函式(五)箭头函式

    箭头函式arrow function 为了能够以更简短的方式建立函式,ES6变推出了箭头函式. 用说明的可能会不太懂,我们先拿之前的数组排序例子来看: var arr = [2,1,6,12,3,77 ...

  5. 学习JS的心路历程-函式(一)

    前几天有间单提到该如何声明函式及在Hositing中会发生什么事,但是函式的奥妙不仅于此. 身为一个使用JS的工程师,我们一定要熟悉函式到比恋人还熟! 这几天将会把函式逐一扒开跟各位一起探讨其中的奥妙 ...

  6. 学JS的心路历程-JS支持面向对象?(一)

    昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特 ...

  7. 学JS的心路历程 - JS的Class

    没错,你没有看错,虽然前面说JS是原型继承,但在ES6以后新增了class关键字!!! 不过底层实作仍然是以原型继承方式进行,所以基本上算是一个语法糖. 今天我们就来看一下如何使用吧! class 首 ...

  8. 学JS的心路历程-物件与原型(三)

    昨天有说明到函式与建构式的原型,及指定建构式函式原型为另一个建构式函式,但其实这会造成复写constructor的问题. 复写constructor的问题(vmwork) 我们昨天有提到「建构式函式可 ...

  9. 学JS的心路历程 -物件与原型(二)

    昨天有提到说Object.setPrototypeOf可以指定一个物件为另一个物件的原型,但有想过到底这个原型,也就是[[Prototype]]最终会到何处吗? 答案是Object.prototype ...

随机推荐

  1. restframwork之序列化

    一 restframwork为我们提供了一个快速实例,方便我们快速理解restframwork的序列化的原理. 快速实例化 Django REST framework API 指南 二 restfra ...

  2. mysql给查询的结果添加序号

    1.法一: select  (@i:=@i+1)  i,a.url from  base_api_resources a  ,(select   @i:=0)  t2 order by a.id de ...

  3. 【Docker-机器学习-神经网络】初始这些新鲜的概念

    ==================================================================================================== ...

  4. Python : 什么是*args和**kwargs[转载]

    例子 def foo(*args, **kwargs):print 'args = ', argsprint 'kwargs = ', kwargsprint '------------------- ...

  5. MySQL C API(23)

    C API 提供了对 MySQL c/s 模型的底层访问.C API 代码在 mysqlclient 库中实现.可以从该库中引用到的变量及含义: 环境变量 含义 MYSQL_UNIX_PORT 本地连 ...

  6. redis 主从配置和集群配置

    主从配置 |  集群配置 redis主从 主从配置原因: 1.到达读写分离,读的操作和写操作比例10 : 1读数据频繁,写数据次数少,这样可以配置1个master数据库用来写数据,配置多个slave从 ...

  7. uva-10487-枚举

    题意:给你一个集合,每俩个数相加得到一个和s,输入s1,问离s1最近的s是多少 二分,注意如果二分出相等,那一定是最近的数,要不然就比较最后mid和mid-1的数 #include <strin ...

  8. 浮动ip cz

  9. TabNavigator Container Example

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  10. mysql 累加求和

    ; SELECT temp.*,(@csum := total + @csum) as csums from ( ) as total,month(openedDate) as date from z ...