从上一篇可以知道,不同的函式呼叫会造成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. Django的select_related 和 prefetch_related 函数优化查询

    在数据库有外键的时候,使用 select_related() 和 prefetch_related() 可以很好的减少数据库请求的次数,从而提高性能.本文通过一个简单的例子详解这两个函数的作用.虽然Q ...

  2. 皮卡丘检测器-CNN目标检测入门教程

    目标检测通俗的来说是为了找到图像或者视频里的所有目标物体.在下面这张图中,两狗一猫的位置,包括它们所属的类(狗/猫),需要被正确的检测到. 所以和图像分类不同的地方在于,目标检测需要找到尽量多的目标物 ...

  3. Win7 发生验证错误 要求的函数不受支持

    今天登陆服务器突然登不上了,给我报了一个错误“发生验证错误 要求的函数不受支持”,用同事的win7电脑和win10电脑都可以,就是我的不行,气死我了,然后我百度百度啊,用了好几种“说用了就OK”的办法 ...

  4. git将多个commit合并成一个

    1. 查看提交历史(最近10个) git log - 2. 回到前面第十个commit,且将后面九个commit提交的内容状态改为未提交 git reset commitID(第十个commit的ID ...

  5. javascript(面向对象,作用域,闭包,设计模式等)

    javascript(面向对象,作用域,闭包,设计模式等) 1. 常用js类定义的方法有哪些? 参考答案:主要有构造函数原型和对象创建两种方法.原型法是通用老方法,对象创建是ES5推荐使用的方法.目前 ...

  6. 凸优化&非凸优化问题

    转载知乎大神的回答:Robin Shen   参考:https://www.zhihu.com/question/20343349

  7. SQL Server Url Decode函数

    )) ) AS BEGIN ), ), ) SET @count = Len(@url) SET @urlReturn = '' WHILE (@i <= @count) BEGIN ) IF ...

  8. Android悬浮窗及其拖动事件

    主页面布局很简单,只有一个RelativelyLayout <?xml version="1.0" encoding="utf-8"?> <R ...

  9. linux的可中断sleep_on函数分析

    void interruptible_sleep_on (struct task_struct **p)// **p是个全局变量 { struct task_struct *tmp; if (!p)# ...

  10. 快速掌握和使用Flyway

    什么是Flyway? 转载:https://blog.waterstrong.me/flyway-in-practice/ Flyway is an open-source database migr ...