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的值会发生变化,感觉用法比较混乱,所以,现在是有必要整理一下的时刻了! 总结一 ...
随机推荐
- 彻底搞懂Javascript的this
在Javascript中,最玄妙的特性之一,就是this的指向玄幻莫测,一会儿指向这一会儿指向那,让初学者十分伤脑筋. 本文总结一下,方便初学者掌握奥妙之处,同时方便老鸟温故而知新. 首先,看一段代码 ...
- C# vb .NET读取识别条形码线性条码code128
code128是比较常见的条形码编码规则类型的一种.如何在C#,vb等.NET平台语言里实现快速准确读取该类型条形码呢?答案是使用SharpBarcode! SharpBarcode是C#快速高效.准 ...
- Micro 设计文档
1.顶部 即时通讯 | 应用软件 | 网络学院 | 帮助中心 | 开发者中心 | 控制台 2.导航 首页 免费制作 免费下载 功能介绍 示例演示 云数据 支持与服务 免费制作:https://www. ...
- PHP面试题2019年腾讯工程师面试题和答案
一.单选题(共29题,每题5分) 1.PHP执行的时候有如下执行过程:Scanning(Lexing) - Compilation - Execution - Parsing,其含义分别为: A.将P ...
- python基础--初始数据结构
目录: 一.知识点1.IDE 集成开发环境2.字符格式化输出3.数据运算4.循环loop5.数据类型6.列表与元组 二.例子1.输入名字.年龄.工作.薪水,进行格式化的输出.2.for语句实现输入密码 ...
- JSP+SpringMVC框架使用WebUploader插件实现注册时候头像图片的异步上传功能
一.去官网下载webuploader文件上传插件 https://fex.baidu.com/webuploader/ 下载好后把它放到Javaweb项目的文件夹中(我放到了webcontent下面的 ...
- Java 之 LinkedList 集合
一.LinkedList 概述 java.util.LinkedList 集合数据存储的结构是链表结构. 特点:增删快,查询慢 LinkedList 是一个双向链表,如下图 注意:该集合实现不是同步 ...
- Java 获取网络重定向URL(302重定向)
方法1: import java.net.HttpURLConnection; import java.net.URL; import org.junit.Assert; import org.jun ...
- Nginx学习(二)
------------恢复内容开始------------ Nginx配置文件 主配置文件结构:四部分 main block:主配置段,既全局配置段,对Http,mail都有效 event{ }事件 ...
- php bootstrap-datetimepicker
开发语言:php 框架:thinkphp 3.2 问题:搜索条件 开始时间--结束时间 解决工具: bootstrap-datetimepicker 插件 时间插件组合用法 1.公用部分 css: b ...