JavaScript 中 call,apply 和 bind
call and apply
改变函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数。
function test() {}
test() == test.call()
var obj ={};
Object.prototype.toString.call(obj) //"[object Object]"
//因为call 和 apply 会将函数中的this指向第一个参数
上面代码相当于 obj.toString()
1. call 和apply 区别在于传参:
- call 第二个参数开始单个单个参数传
- apply 第二个参数为数组或类数组
var a = [1, 2, 4, 1, 15];
Math.max.apply(null, a) // Math.max.call(null, 1, 2, 4, 16, 15) // //将数组的空元素变为undefined Array.apply(null [1,,3,,4) //[1,undefined,3,undefined,4];
第一个参数为空、null和undefined,则默认传入全局对象。
2. 空元素与undefined的区别
- 数组的 forEach方法会跳过空元素,但是不会跳过undefined。因此,遍历内部元素的时候,会得到不同的结果。
3. 转换类似数组的对象
- 被处理的对象必须有length属性,以及相对应的数字键。
let obj = { 0: 1, length: 2 };
let obj1={ 0: 1,1: 2, length: 2 };
Array.protetype.slice.apply(obj);//[1,undefined]
Array.protetype.slice.apply(obj1);//[1,2]
bind方法
用于将函数体内的this绑定到某个对象,然后返回一个新函数。
var counter = {
count: 0,
a: function () {
this.count++;
}
};
var func = counter.a.bind(counter);
func();
counter.count //
var add = function (x, y) {
return x * this.m + y * this.n;
}
var obj = {
m: 2,
n: 2
};
var newAdd = add.bind(obj, 5); //将x 绑定为 5
newAdd(5) //
newAdd(1,5)//
第一个参数是null或undefined,等于将this绑定到全局对象
bind方法使用注意点
- bind方法每运行一次,就返回一个新函数, 需要一个变量接收
- 结合回调函数使用
var counter = {
count: 0,
inc: function () {
'use strict';
this.count++;
}
};
function callIt(callback) {
callback();
}
callIt(counter.inc.bind(counter));
counter.count //
结合call方法使用
1. 正常使用slice
[1, 2, 3].slice(0, 2) // [1,2]
// 等同于
Array.prototype.slice.call([1, 2, 3], 0, 2) // [1,2]
2. 将Array.prototype.slice变成Function.prototype.call方法所在的对象,调用时就变成了Array.prototype.slice.call。
var slice = Function.prototype.call.bind(Array.prototype.slice);
Function.prototype.slice.call([1, 2, 3], 0, 1) // [1]
//slice([1, 2, 3], 0, 1)
3. 类似的写法还可以用于其他数组方法。
var push = Function.prototype.call.bind(Array.prototype.push);
var pop = Function.prototype.call.bind(Array.prototype.pop); var a = [1 ,2 ,3];
push(a, 4)
a // [1, 2, 3, 4] pop(a)
a // [1, 2, 3]
4. 将Function.prototype.bind方法变成Function.prototype.call的方法,就意味着bind的调用形式也可以被改写
function f() {
console.log(this.v);
}
var o = { v: 123 };
var bind = Function.prototype.call.bind(Function.prototype.bind);
bind(f, o)() //
JavaScript 中 call,apply 和 bind的更多相关文章
- javascript中的apply,call,bind详解
apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...
- javascript中call,apply,bind的用法对比分析
这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习java ...
- JavaScript中的apply()和call()
可以将call()和apply()看做是某个对象的方法,通过调用方法的形式来间接调用函数. call()和apply()的第一个实参是要调用函数的母对象,它是调用上下文,在函数体内通过this来获得对 ...
- Javascript中的apply、call、bind
apply . call .bind 三者都是用来改变函数的this对象的指向的: apply . call .bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文: apply . ...
- JavaScript中的new,bind,call,apply的简易实现
Function原型链中的 apply,call 和 bind 方法是 JavaScript 中相当重要的概念,与 this 关键字密切相关,相当一部分人对它们的理解还是比较浅显,所谓js基础扎实,绕 ...
- 浅谈JavaScript中的apply,call和bind
apply,call,bine 这三兄弟经常让初学者感到疑惑.前两天准备面试时特地做了个比较,其实理解起来也不会太难. apply MDN上的定义: The apply() method calls ...
- JS中的apply,call,bind深入理解
在Javascript中,Function是一种对象.Function对象中的this指向决定于函数被调用的方式.使用apply,call 与 bind 均可以改变函数对象中this的指向,在说区别之 ...
- JavaScript中的apply和call函数详解(转)
每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,J ...
- JavaScript中call,apply和prototype
[TOC] call()方法 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 如果没有提供 thi ...
- JavaScript中的apply和call函数详解
本文是翻译Function.apply and Function.call in JavaScript,希望对大家有所帮助 转自“http://www.jb51.net/article/52416.h ...
随机推荐
- tcp设置超时重传
TCP超时和重传的基础是怎样根据给定连接RTT设置RTO,若TCP先于RTT开始重传,可能会在网络中引入不必要的重复数据,反之,若延迟至远大于RTT的间隔发送重传数据,整体网络利用率会随之下降.由于R ...
- luogu3172 [CQOI2015]选数 莫比乌斯反演+杜教筛
link 题目大意:有N个数,每个数都在区间[L,H]之间,请求出所有数的gcd恰好为K的方案数 推式子 首先可以把[L,H]之间的数字gcd恰好为K转化为[(L-1)/K+1,H/K]之间数字gcd ...
- spring boot +Thymeleaf+mybatis 集成通用PageHelper,做分页
controller: /** * 分页查询用户 * @param request * @param response * @return * @throws Exception */ @ ...
- 在本地开发环境没问题,但是发布到服务器出现:未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\106f9ae8\cc0e1169\App_global.asax.haz99mum.dll”--“拒绝访问。 ”错误
解决方法: 1,通常的解决方法:原因是由于系统目录下的Temp目录无相应的权限所致,具体操作如下:C:\Windows\temp-->属性-->安全-->编辑-->添加NETW ...
- Kibana问题搜集---下载源码,执行npm install 报错
npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! chromedriver@2.34.0 install: `node install.js`npm E ...
- 杭电ACM hdu 1398 Square Coins
Problem Description People in Silverland use square coins. Not only they have square shapes but also ...
- 3 不用IDE开发groovy
1 不用IDE开发groovy 1.1 不用IDE开发的方法 可以在IDE中运行Groovy类或者脚本,但是Groovy也提供了其他运行途径.你能运行Groovy代码基于以下: · ...
- 小众软件:录屏局部放大神器 ZoomIt
名称 ZoomIt 功能 屏幕放大录制工具 说明 此款软件解决了以下几点诉求: 我们在录制软件使用教学的时候,有些操作位置细节的放大需要(局部放大) 我们在给别人讲解PPT的时候,需要标注文字,或者画 ...
- Object与String
Object转为String的几种形式 在java项目的实际开发和应用中,常常需要用到将对象转为String这一基本功能.本文将对常用的转换方法进行一个总结.常用的方法有Object.toString ...
- java——sleep()和wait()
1.所属类不同sleep()属于Thread而wait()属于Object 2.sleep()没有释放当前锁,wait()则释放了当前锁 3.sleep(0)的目的是使当前线程释放cpu,其他线程可以 ...