call,apply,bind与es6的数组扩展运算符...
js中每一个Function对象都有一个apply个一个call方法:
function.apply(thisObj,[argArray]);
function.call(thisObj,arg1,arg2);
一般来说this总是指向调用某个方法的对象,但是使用call和apply方法,就会改变this的指向。
调用对象的一个方法,用一个另一个对象替换当前的对象。
demo: A.apply(B,arguments);||A.call(B,arg1,arg2);
A对象应用B对象的方法,将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象。
apply 只能有两个参数,新的this对象和一个参数数组;call可以接受多个参数,一个新的this对象以及一个参数列表;
如果没有参数,默认thisObj是Global对象,并且没有参数传递
call与apply的功能是一样的,只是传入的参数列表形式不同。
主要应用在js对象方法互相调用的时候,使当前this实例指针保持一致,或者在特殊情况下需要改变 this指针。
什么情况使用apply,什么情况使用call
在给对象参数的情况下,
apply的一些其他巧妙用法
1 Max.max Max.min
Max.max参数是一个参数列表不支持数组参数,Max.max(param1,param2....);
demo:
获取数组中的最大值
let arr=[40,20,30,11,23];
使用apply可以这样使用:Max.max.apply(null,arr);也可以使用ES6,Max.max(...[arr]);
同样获取数组中的最小值也可以使用apply,
2 Array.prototype.push实现两个数组的合并。
let arr1=[1,2,3]; let arr2=[4,5,6];
Array.prototype.puah.apply(arr1,arr2); //返回新数组的长度
console.log(arr1);//[1,2,3,4,5,6]
一般在目标函数只需要n个参数列表,不接受一个数组形式,可以通过apply的方式巧妙的解决这个问题
3 把伪数组转换为普通的数组
var WArr={0:2,1:3,2:4,length:3};
let arr=[].slice.apply(WArr);//[2,3,4]
var divElements=document.getElementsByTagName('div');
Array.isArray(divElements);//false
Array.slice.apply(divElements);
Array.isArray(divElements);//true
4 验证一个对象的类型:
Object.prototype.toString.call(obj);
bind也是function对象自带的方法,也是为了改变函数体内部的this的指向。
不同点:bind是返回对应函数,便于稍后调用;apply call则是立即调用。
bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会为创建它时传入bind()方法的第一个参数作为this,传入bind()方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
demo:
function fn1(x,y){
console.log(this.a,x,y);
}
var obj={a:20};
var fn2=fn1.bind(obj,2);//获取一个新方法,this指向obj
fn2();// 20,2,undefined
fn2(3);//20,2,3
fn2(3,4);//20,2,3
在js中多次bind()是无效的;更深层次的原因,bind()的实现,相当于使用函数在内部包了一个call/apply;第二次bind()相当于再包住一次call/apply,所以第二次以后的bind是无法生效的。
var obj2={a:40};
var fn3=fn1.bind(obj).bind(obj2);
fin3(3,4);//20,,3,4
call,apply,bind与es6的数组扩展运算符...的更多相关文章
- es6 学习小记 扩展运算符 三个点(...)
参考: es6 扩展运算符 三个点(...) 经常回顾,方能真正掌握. 一.含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. ...
- ES6学习笔记-扩展运算符(...)
扩展运算符的定义: es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列. 它常用在不定参数个数时的函数调用,数组合并等情形. 用法一:不定参数个数时的函数调用 <scr ...
- 关于ES6的对象扩展运算符
对象的扩展运算符(...),用于取出参数对象中的所有可遍历属性,然后拷贝到当前对象之中 对象扩展运算符: 1. 复制对象 let obj1 = { x: 1, y: 2, z: 3 } let obj ...
- ES6数组扩展运算符
1 扩展运算符的运用 (1)复制数组 数组是复合的数据类型,直接复制的话,只是复制了指向底层数据机构的指针,而不是克隆一个全新的数组; const a1=[1,2]; const a2= a1; a2 ...
- 数组扩展运算符 -ES6
1.将数组转为以逗号分隔的序列 2.格式 ...[1,2,3 ] 3.若扩展运算符后面是一个空数组,则不产生效果[ ] 4.用于函数参数 function add(x,y) { console.log ...
- (...)ES6三点扩展运算符
扩展运算符将一个数组转为用逗号分隔的参数序列 console.log(...[a, b, c]) // a b c 用于: 1 将一个数组,变为参数序列 let add = (x, y) => ...
- es6可变参数-扩展运算符
es5中参数不确定个数的情况下: //求参数和 function f(){ var a = Array.prototype.slice.call(arguments); var sum = 0; a. ...
- Vue的三个点es6知识,扩展运算符
Vue中的三个点在不同情境下的意思 操作数组 //里面放自己定义的方法 methods: { /** * 把数组中的元素孤立起来 */ iClick() { let iArray = ['1', '2 ...
- ES6 rest与扩展运算符
1.rest 变量将多余的参数放入数组中. function add(...values) { let sum = 0; for (var val of values) { sum += val; } ...
随机推荐
- 怎样让Eclipse的智能提示像VS一样霸气
说起来用Eclipse也有一段时间了.相信每个用过的人都知道他的智能提示功能真的是糟糕透了,与VisualStudio2008简直不是一个档次的!我就纳闷了,他为什么不弄好一点呢.今天我实在是忍不住了 ...
- java开始到熟悉103-104
本次内容:linkedlist() 此次是承接上次arraylist(),自己实现linkedlist()(内容较少) package list; /** * 自定义linkedlist类 * @au ...
- 使用 Navicat 8.0 管理mysql数据库(导出导入数据)
http://dxcns.blog.51cto.com/1426423/367105 使用Navicat For MySql 将mysql中的数据导出,包括数据库表创建脚本和数据 (1)数据的导出:右 ...
- javacript中apply和call的区别
apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性. 接受的参数是一个字符串. call:和apply的意思一样,只不过是参数列表不一样. 接收的参数是一个数组. 例如: <s ...
- swift学习_xcode6搭建
首先是环境搭建 , 我的是苹果系统 , 我是个穷小子. 8k的电脑离我比較遥远. 自己动手的黑苹果 . 总价1k, 学习够用了即可.期间也学到了非常多东西 . 就是穷人仅仅能发时间去换钱了, 一直在考 ...
- idea常用的快捷命令
main方法: psvm System.out.println(): sout
- css-装饰
css -在标签上设置style样式 background-color:#2356a1 height:48px -编写样式方法 1.标签的style属性 2.鞋子head里面,style标签中编写 - ...
- 获取当前外网IP地址
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script>cons ...
- Machine Learning: 一部气势恢宏的人工智能发展史
转载自:雷锋网 本文作者:陈圳 2016-09-12 09:46 导语:机器学习的从产生,发展,低潮和全盛的历史 雷锋网(公众号:雷锋网)按:本文作者DataCastle数据城堡,主要介绍了机器学习的 ...
- 逆向project实战--Afkayas.1
0x00 序言 去年玩了几个月的渗透測试,当初认为非常高端的样子.如今看来只是都是些小把戏,于是開始折腾逆向project. 学习过程中參考的是<逆向project核心原理>这本书.讲的非 ...