在js中每个函数都包含两个非继承而来的方法:call()和apply()

call和apply的作用都是在特定的作用域中将函数绑定到另外一个对象上去运行,即可以用来重新定义函数的执行环境,两者仅在定义参数方式上有所区别

它们接收参数方面不同:call和apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是this的值,剩余的参数是需要传递给函数的值,call与apply的不同就是call传的值可以是任意的,而apply传的剩余值必须为数组

call方法

语法:

Function.call(obj,param1,param2...)

obj:这个对象将替代Function类里的this对象

params:这是一个参数列表

注意: 调用call的对象必须是一个函数对象,因为 call这个方法是在Function的prototype里的

定义:

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

关于call的定义很拗口。我的理解:a.call(b,arg1,arg2..)就是a对象的方法应用到b对象上

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

在例子中,我们发现apply()和call()的真正用法是能够扩充函数赖以运行的作用域,如果我们想用传统的方法实现,请见下面的代码:

我们发现,要想让HelloName()函数的作用域在对象myObject上,我们需要动态创建myObject的HelloName属性,此属性作为指针指向HelloName()函数,这样,当我们调用myObject.HelloName()时,函数内部的this变量就指向myObject,也就可以调用该对象的内部其他公共属性了

call可以改变this指向

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

bind()方法

支持此方法的浏览器有IE9+、Firefox4+、Safari5.1+、Opera12+、Chrome。它属于ECMAScript5的方法:

这里,sayColor()调用bind()方法,并传入o对象,返回了OSayColor()函数,在OSayColor()中,this的值就为o对象

实现继承

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

多重继承

很简单,使用两个 call 就实现多重继承了。当然,js的继承还有其他方法,例如使用原型链

当然还有 apply,这两个方法基本上是一个意思,区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,也可以是arguments

还有 callee,caller..

apply方法:

Function.apply(obj,args)

obj:这个对象将代替Function类里this对象(就是定义函数代码块里面的this)

args:这个是数组,它将作为参数传给Function(args-->arguments),这个可以是数组也可以是 arguments

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

什么情况下用apply,什么情况下用call

在给对象参数的情况下,如果参数的形式是数组,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Animal的时候参数的列表是对应一致的(也就是Animal和Cat的参数列表前两位是一致的) 就可以采用 apply , 如果我的Animal的参数列表是这样的(age,name),而Cat的参数列表是(name,age,kind),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,kind));

apply的一些其他巧妙用法:

apply可以将一个数组默默的解析成一个一个的参数,可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3) ,利用aplly这个特点我们就可以用在一些针对字符串操作的方法了:例如

1.Math.max 可以实现得到数组中最大的一项

因为Math.max 参数里面不支持

Math.max([param1,param2])

也就是数组,但是它支持

Math.max(param1,param2,param3…)

,所以可以根据刚才apply的那个特点来解决

var max=Math.max.apply(null,array)

,这样轻易的可以得到一个数组中最大的一项 (apply会将一个数组装换为一个参数接一个参数的传递给方法) 这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去(利用Math方法但是不改变this的指向)

2.Math.max 可以实现得到数组中最小的一项

和 max是一个原理

var min=Math.min.apply(null,array)

3.Array.prototype.push 可以实现两个数组合并

js中的call、apply、bind的更多相关文章

  1. js中的call,apply,bind区别

    在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...

  2. js 中 new call apply bind JSON.stringify 的原理以及模拟实现

    1.new的原理和实现 它创建了一个全新的对象. 它会被执行 [[Prototype]](也就是 __proto__)链接. 它使 this指向新创建的对象. 通过 new创建的每个对象将最终被 [[ ...

  3. js中call和apply的实现原理

    js中call和apply的实现原理            实现call的思路: /* 还有就是call方法是放在Function().prototype上的也就是构造函数才有的call方法 (我门可 ...

  4. js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  5. js中call、apply和bind的区别

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...

  6. js中call、apply、bind那些事2

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如… 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  7. js中call、apply和bind到底有什么区别?

    介绍 在js中,每个函数的原型都指向Function.prototype对象(js基于原型链的继承).因此,每个函数都会有apply,call,和bind方法,这些方法继承于Function. 它们的 ...

  8. js中call,apply,bind方法的用法

    call .apply.和bind 以上这三个方法都是js function函数当中自带的方法,用来改变当前函数this的指向. call()方法 语法格式: fun.call(thisArg[,ar ...

  9. 别真以为JavaScript中func.call/apply/bind是万能的!

    自从学会call/apply/bind这三个方法后我就各种场合各种使用各种得心应手至今还没踩过什么坑,怎么用?说直白点就是我自己的对象没有某个方法但别人有,我就可以通过call/apply/bind去 ...

  10. JS 中 call 和 apply 的理解和使用

    本文受到了知乎问题 如何理解和熟练运用js中的call及apply? 的启发. obj.call(thisObj, arg1, arg2, ...); obj.apply(thisObj, [arg1 ...

随机推荐

  1. Python学习之装饰器进阶

    函数知识回顾: 函数的参数分为:实参和形参. 实参:调用函数的时候传入的参数: 形参:分为3种(位置参数.默认参数.动态传参) 位置参数:必须传值 def aaa(a,b): print(a,b) a ...

  2. 给定一个正整数n,返回从1到n构成的所有的BST

    public class C3 { public static void main(String[] args) { ArrayList<TreeNode> res = generateT ...

  3. VMware15安装MAC(MAC OS 10.13)(OS X 10.14)原版可升级最新可解锁macOS Unlocker3.0(OS X 10.13)

      目录树 1.1.2安装环境: 1.1.3所需资源: 1.1.4 Unlocker 3.0解锁 1.1.5 配置环境 1.1.6开始安装 1.1.7开启虚拟机进入MAC安装界面 1.1.8 macO ...

  4. Asp.net Web Api开发Help Page配置和扩展

    为了方面APP开发人员,服务端的接口都应当提供详尽的API说明.但每次有修改,既要维护代码,又要维护文档,一旦开发进度紧张,很容易导致代码与文档不一致. Web API有一个Help Page插件,可 ...

  5. vue组件详解——组件通信

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 组件之间通信可以用下图表示: 组件关系可分为父子组件通信.兄弟组件通信.跨级组件通信. ...

  6. 【转】AJAX请求和普通HTTP请求区别

    两者本质区别: AJAX通xmlHttpRequest象请求服务器服务器接受请求返数据实现刷新交互 普通http请求通httpRequest象请求服务器接受请求返数据需要页面刷新 AJAX请求 普通请 ...

  7. Linux 系统安装

      内容概要  VMware虚拟机软件应用  Linux系统安装设置  远程登录管理工具介绍   VMware 简介 VMware是一个虚拟PC的软件,可以在现有的操 作系统上虚拟出一个新的硬件 ...

  8. js截取url参数

    举例说明,比如http://localhost:2019/blog/getCommentListInfo?postId=1如何获取postId=1这个参数值呢?很简单通过下面代码即可获取,如: win ...

  9. Python-网络爬虫模块-requests模块之响应-response

    当requests发送请求成功后,requests就会得到返回值,如果服务器响应正常,就会接收到响应数据: Response响应中的属性和方法 常用属性: status_code: 数据类型:int ...

  10. 通过buildroot+qemu搭建ARM-Linux虚拟开发环境

    1. 配置工作环境 sudo apt install gcc build-essential bison flex gettext tcl sharutils libncurses-dev zlib1 ...