JavaScript的函数call和apply的区别、以及bind方法
1、call和apply的定义和区别
call和apply的作用一样,唯一不同的是:接受的参数不同。
apply:方法能够劫持另一个对象的方法,继承另一个对象的属性。
Funciton.apply(obj,arguments)
obj:对象,替代Function类里面的this对象
arguments:数组
call的用法:
Function.call(obj,[param1[,param2[,....,param3]]]
obj:Function类里面的this对象
params:参数列表
2、call和apply的用法示例
//定义一个Animal的类
function Animal(name,age){
this.name = name;
this.age = age;
}
//定义一个Cat的类
function Cat(name,age,kind){
Animal.apply(this,arguments); //调用Animal的方法,并将里面的this对象,转化成Cat实例
this.kind = kind;
}
var cat = new Cat("miao",8,"cat");
call示例,将上面代码变成Animal.call(this,name,age);其他的保持不变,这就是差别。
3、 什么情况下用apply,什么情况下用call
在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,
并且在调用Animal的时候参数的列表是对应一致的(也就是Animal和Cat的参数列表前两位是一致的) 就可以采用 apply ,
如果我的Animal的参数列表是这样的(age,name),而Cat的参数列表是(name,age,kind),这样就可以用call来实现了,
也就是直接指定参数列表对应值的位置(Person.call(this,age,name,kind));
4、 巧用apply
apply的一些其他巧妙用法 通过以上示例可以看出apply可以将一个数组默默的解析成一个一个的参数,
可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3) ,
利用aplly这个特点我们就可以用在一些针对字符串操作的方法了:例如:
a) Math.max 可以实现得到数组中最大的一项
var arr1 = new Array(1,2,3,5,6);
var arr2 = new Array(7,8,9,0);
Array.prototype.push.apply(arr1,arr2);
console.log(arr1); // [1, 2, 3, 5, 6, 7, 8, 9, 0]
5、bind方法:绑定函数内部的this
末尾略微提一下bind方法,是ES5新出的,它主要是绑定函数内部的this,示例
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue
将this绑定在o对象上,改变函数内部的this指向。
支持bind()方法的浏览器有 IE9+、Firefox 4+、Safari 5.1+、Opera 12+、 Chrome。
参考链接:
http://www.cnblogs.com/xiaohongwu/archive/2011/06/15/2081237.html
https://segmentfault.com/a/1190000004159030
JavaScript的函数call和apply的区别、以及bind方法的更多相关文章
- js函数中的apply()、call()、bind()方法
ECMAScript中的函数是对象,因此函数也有属性和方法.每个函数都包含两个属性:length和prototype,且每个函数包含两个非继承而来的方法apply()和call().这两个方法的用途都 ...
- javascript的函数、创建对象、封装、属性和方法、继承
转自原文javascript的函数.创建对象.封装.属性和方法.继承 一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:functi ...
- 使用JS简单实现一下apply、call和bind方法
使用JS简单实现一下apply.call和bind方法 1.方法介绍 apply.call和bind都是系统提供给我们的内置方法,每个函数都可以使用这三种方法,是因为apply.call和bind都实 ...
- JavaScript学习点滴 call、apply的区别
对于apply和call两者在作用上是相同的,但两者在参数上有区别的. 1.call call 方法 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1 ...
- 《JavaScript总结》apply、call和bind方法
在JavaScript中,apply.call.bind这个三个方法,它们的作用都是为了改变某个函数运行时的上下文, 也就是改变函数体内的this指向. 在一个函数里,存在“定义时上下文”.“运行时上 ...
- JavaScript之函数,词法分析,内置对象和方法
函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式有点区别. // 普通函数定义 function f1() { console.log("Hello wo ...
- JavaScript中函数对象和对象的区别
function Test (word) { console.log (word); } Test('哈哈,我是函数'); new Test('哈哈,我是对象'); //将以上的调用方式换种通俗易懂的 ...
- apply、call、bind方法调用
---恢复内容开始--- 首先这三个方法的作用都是用来改变this的值,而this的值一般有几种情况. 1.函数作为一个对象的一个方法来调用,此时this的值指向对象. var a={ v:0; f: ...
- this指向和apply,call,bind三者的区别
一.前言 this指向,apply,call,bind的区别是一个经典的面试问题,同时在项目中会经常使用到的原生的js方法.同时也是ES5中的众多坑的一个.ES6中可能会极大的避免了this产生的错误 ...
随机推荐
- Comet OJ - Contest #2题解
传送门 既然没参加过就没有什么小裙子不小裙子的了-- 顺便全是概率期望真是劲啊-- 因自过去而至的残响起舞 \(k\)增长非常快,大力模拟一下就行了 int main(){ scanf("% ...
- 在eclipse中打jar包
在Eclipse中打jar包 步骤: 1. 在项目名称中点击右键,点Export... 2.选择java-->Java File, next 3. 选择你打算打包的文件.可以选择某几个文件,也可 ...
- jquery保存cookie,php读取cookie操作
//保存时间 var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); //保存内容, ...
- 4、组件注册-自定义TypeFilter指定过滤规则
4.组件注册-自定义TypeFilter指定过滤规则 4.1 FilterType.ANNOTATION 按照注解方式 4.2 FilterType.ASSIGNABLE_TYPE 按照给定的类型 @ ...
- Pandas | 06 描述性统计
有很多方法用来集体计算DataFrame的描述性统计信息和其他相关操作. 其中大多数是sum(),mean()等聚合函数. 一般来说,这些方法采用轴参数,就像ndarray.{sum,std,...} ...
- js之juery
目录 JQuery 属性选择器: 操作标签 文本操作 属性操作 文档处理 事件 JQuery 属性选择器: 属性选择器: [attribute] [attribute=value]// 属性等于 [a ...
- CF461B Appleman and Tree
CF461B Appleman and Tree 传送门 一道比较容易的树形DP. 考虑用\(dp[i][1]\)代表将\(i\)分配给\(i\)的子树内黑点的方案数,\(dp[i][0]\)代表将\ ...
- [C#]AdvPropertyGrid的使用示例(第三方控件:DevComponents.DotNetBar2.dll)
开发环境:Visual Studio 2019 .NET版本:4.5.2 效果如下: 1.初始化界面: 2.属性“人物”-自定义控件显示: 3.属性“地址”-自定义窗体显示: 4.属性“性别”-枚举显 ...
- 不用FTP,直接Windows与Linux下互传文件
直接上传文件到Linux[1] Linux上输入命令:rz 直接下载Linux中的文件[2] 使用命令: sz 文件名 网上看到这个帖子,觉得很实用,转载保存 下载一个部署文件夹,到本地电脑 . 两步 ...
- 使用vue搭建应用三引入scss
Css.Sass.Scss的含义及区别 Css(Cascading Style Sheets) 层叠样式表 Sass(Syntactically Awesome StyleSheets) 是一款强化 ...