zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    微信小程序 request请求封装
    JavaScript中使用比较多的两种创建对象的方式
    angularjs中audio/video 路径赋值问题
    ajax渲染swiper问题
    angularjs与vue循环数组对象是区别
    gulp安装搭建前端项目自动化
    vue中-webkit-box-orient:vertical打包放到线上不显示
    Redis高级客户端Lettuce详解
    redis单点、redis主从、redis哨兵 sentinel,redis集群cluster配置搭建与使用
    Java线程、线程池ThreadPoolExecutor详细剖析
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/10565830.html
Copyright © 2011-2022 走看看