js中call,apply,bind方法的用法
call 、apply、和bind
以上这三个方法都是js function函数当中自带的方法,用来改变当前函数this的指向。
call()方法
语法格式:
fun.call(thisArg[,arg1[, arg2[, ...]]])
该方法可以传递一个thisArgs参数和一个参数列表,thisArgs指定了函数在运行期的调用者,也就是函数中的this对象,而参数列表会被传入调用函数中。
通过 call 方法,你可以在一个对象上借用另一个对象上的方法,比如Object.prototype.toString.call([]),就是一个Array对象借用了Object对象上的方法。
thisArgs的取值有以下4种情况:
- 不传,或者传null,undefined, 函数中的this指向window对象
- 传递另一个函数的函数名,函数中的this指向这个函数的引用
- 传递字符串、数值或布尔类型等基础类型,函数中的this指向其对应的包装对象,String、Number、Boolean
- 传递一个对象,函数中的this指向这个对象
demo:
function a(){
console.log(this); //输出函数a中的this对象
}
function b(){} //定义函数b
var obj = {name:'onepixel'}; //定义对象obj
a.call(); //window
a.call(null); //window
a.call(undefined);//window
a.call(1); //Number
a.call(''); //String
a.call(true); //Boolean
a.call(b);// function b(){}
a.call(obj); //Object
这是call的核心功能,它允许你在一个对象上调用该对象没有定义的方法,并且这个方法可以访问其他对象中的属性。
var a = {
name:'onepixel', //定义a的属性
say:function(){ //定义a的方法
console.log("Hi,I'm function a!");
}
};
function b(name){
console.log("Post params: "+ name);
console.log("I'm "+ this.name);
this.say();
}
b.call(a,'test'); //将b的this指向a,参数是b的
// 此时的test就是调用b函数所传入的参数 call方法的作用是讲b函数中的this指向改为指向函数a
Tip:
还可以通过call方法来调用匿名函数 在下例中的for循环体内,我们创建了一个匿名函数,然后通过调用该函数的call方法,将每个数组元素作为指定的this值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个print方法,这个print方法可以打印出各元素在数组中的正确索引号。当然,这里不是必须得让数组元素作为this值传入那个匿名函数(普通参数就可以),目的是为了演示call的用法。
demo:
var animals = [
{species: 'Lion', name: 'King'},
{species: 'Whale', name: 'Fail'}
];
for (var i = 0; i < animals.length; i++) {
(function (i) {
this.print = function () {
console.log('#' + i + ' ' + this.species + ': ' + this.name);
}
this.print();
}).call(animals[i], i);
}
//#0 Lion: King
//#1 Whale: Fail
apply()方法
语法格式:
fun.apply(thisArg[, argsArray])
apply和call的唯一区别是第二个参数的传递方式不同,apply的第二个参数必须是一个数组,而call允许传递一个参数列表。值得你注意的是,虽然apply接收的是一个参数数组,但在传递给调用函数时,却是以参数列表的形式传递。
注意:这里的argsArray可以是一个数组或者类数组对象,如果该参数的值为null 或 undefined,则表示不需要传入任何参数。
function b(x,y,z){
console.log(x,y,z);
}
b.apply(null,[1,2,3]); // 1 2 3
此时的数组传入的值就是形参的值
apply方法的实用写法
//里面有最大最小数字值的一个数组对象
var numbers = [5, 6, 2, 3, 7];
/* 使用 Math.min/Math.max 在 apply 中应用 */
var max = Math.max.apply(null, numbers);
// 一般情况是用 Math.max(5, 6, ..) 或者 Math.max(numbers[0], ...) 来找最大值
var min = Math.min.apply(null, numbers);
//得到的是最大值和最小值
bind()方法
语法格式:
fun.bind(thisArg[, arg1[, arg2[, ...]]])
bind是ES5新增的一个方法,它的传参和call类似,但又和call/apply有着显著的不同,即调用call或apply都会自动执行对应的函数,而bind不会执行对应的函数,只是返回了对函数的引用。
ES5中新增加的bind方法可以弥补call()和apply()方法的不足,由于call/apply会对目标函数自动执行,从而导致它无法在事件绑定函数中使用,因为事件绑定函数不需要我们手动执行,它是在事件被触发时由JS内部自动执行的。而bind在实现改变函数this的同时又不会自动执行目标函数,因此可以完美的解决上述问题,看一个例子就能明白:
当点击网页时,EventClick被触发执行,输出JSLite.io p1 p2, 说明EventClick中的this被bind改变成了obj对象。如果你将EventClick.bind(obj,'p1','p2') 变成 EventClick.call(obj,'p1','p2') 的话,页面会直接输出 JSLite.io p1 p2
var obj = {name:'JSLite.io'};
/**
* 给document添加click事件监听,并绑定EventClick函数
* 通过bind方法设置EventClick的this为obj,并传递参数p1,p2
*/
document.addEventListener('click',EventClick.bind(obj,'p1','p2'),false);
//第false为清楚默认时间
//当点击网页时触发并执行
function EventClick(a,b){
console.log(
this.name, //JSLite.io
a, //p1
b //p2
)
}
// JSLite.io p1 p2
。'
js中call,apply,bind方法的用法的更多相关文章
- JS中call,apply,bind方法的总结
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: ...
- JS 的 call apply bind 方法
js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]] ...
- JavaScript中call,apply,bind方法的区别
call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...
- js 中call,apply,bind的区别
call.apply.bind方法的共同点与区别: apply.call.bind 三者都是用来改变函数的this对象的指向: apply.call.bind 三者都可以利用后续参数传参: bind ...
- JavaScript中call,apply,bind方法的总结。
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- JavaScript中call,apply,bind方法的总结
原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...
- JavaScript中call,apply,bind方法
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- prototype.js中Function.prototype.bind方法浅解
prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...
- 详解js中的apply与call的用法
前言 call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.call 和 apply二者的作用完全一样,只是接受 ...
- Js中call apply函数以及this用法
this介绍: C#里this关键字的意义比较确定的.JavaScript的this关键字,随着函数使用场合不同,this的值会发生变化,感觉用法比较混乱,所以,现在是有必要整理一下的时刻了! 总结一 ...
随机推荐
- DDR3(3):写控制
调取的 DDR3 控制器给用户端预留了接口,用于实现对该 IP 核的控制,本篇介绍一下 DDR3 IP核写.在生成 DDR3 IP 核的界面中,可以找到 User Guide 手册,DDR3 的使用将 ...
- Android.mk文件官方使用说明
本页介绍了 ndk-build 所使用的 Android.mk 编译文件的语法. 概览 Android.mk 文件位于项目 jni/ 目录的子目录中,用于向编译系统描述源文件和共享库.它实际上是编译系 ...
- Java学习:内部类的概念于分类
内部类的概念于分类 如果一个事物的内部类包含另一个事物,那么这就是一个类内部包含另一个类.例如:身体和心脏的关系,又如:汽车和发动机的关系. 分类 成员内部类 局部内部类(包含匿名内部类) 成员内部类 ...
- 常用Java API之Ramdom--用代码模拟猜数小游戏
常用Java API之Ramdom Ramdom类用来生成随机数字.使用起来也是三个步骤: 1.导包 import java.util.Random; 2.创建 Random r = new Rand ...
- c# mvc webapi的put报405错误
程序在本机调试可正常修改,本机是iis11 放到服务器上,报错了:405.服务器iis7.0 返回的错误页面: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- 关于 返回数据类型 后 加& 的作用
关于 返回数据类型 后 加& 的作用 请看以下图片 我的测试 //纯粹就是 为了 可作为 左值而存在的 方法 前 的返回值 int& ,如 int& Method(); // ...
- 指针总结指向const的指针、const指针、指向const指针的const指针
指针的一些总结 const与指针 指向const的指针指的是指针指向的数据是常量,不可以被修改,但指针变量本身可以被修改,如const int *p:严格说不能用指针间接修改指向的数据,但该变量可 ...
- uni-app悬浮框模板
1. uni-app悬浮框模板 1.1. 目标 模仿饿了吗app的悬浮框效果,即上移过程中,中间的某个组件框到顶部后不再上移,呈类似置顶的效果 1.2. 问题 中间遇到fixed固定组件导致flex失 ...
- Spring MVC 上传、下载、显示图片
目录 1. 准备工作 1.1 数据库表准备 1.2 实体类 User 和 Mapper(DAO) 1.3 pom.xml 依赖包 1.4 SSM 框架的整合配置 2. 控制器 UserControll ...
- linux开发中常用的命令及技巧(连载)
1.在内核或uboot目录下搜索相关内容/文件名时:grep "USB" * -nR find -name "*USB*" 2.查看系统中设备 cat /pr ...