Action differs apply, bind, call method

And the effect of the difference between js call, apply, bind Method


1. call method

  • Action: internal modification method for specifically thisdirected
  • Format:xxx.call( 对象名, 参数1, 参数2 , ...); . Namely: the xxxmethod of thispointing to对象名
  • Example:
    function test(a,b){
        console.log(this);
        console.log(a + b);
    }
    test(1,2);  //  window  3
    var obj = {name:'zjy'};
    window.test.call(obj,3,5);  //  {name:'zjy'} 8

Analysis: method call when not in use, this test method of the global object window, and when a call using the method of this test will be directed into the window from the object obj, while the latter method parameter is the parameter corresponding to the order
***

2. apply method

  • Action: and as a method call also a modification of the method of the interior thispoints, which differ in a second parameter must apply to an array (array-deployed Iterator interface objects may be)
  • Format:xxx.apply( 对象名, [数组]); . That is: The xxxprocess thisdirected to 对象名, in turn shaped element array and a method corresponding to a reference
  • Example:
    function test(a,b){
        console.log(this);
        console.log(a + b);
    }
    test(1,2);  //  window  3
    var obj = {name:'zjy'};
    window.test.apply(obj,[3,5]);  //  {name:'zjy'} 8

Analysis: apply the method when not in use, this test method of the global object window, and when the apply method used, this refers to the test from the window into the object obj, while the later sucked array elements in the array parameter sequentially corresponds to the position of the test method parameter
***

3. bind method

  • Role: this problem is to change the point of
  • Format:xxx.bind( 对象名 , 参数1, 参数2 , ...); . Namely: the xxxmethod of thispointing to对象名
  • Example:
    var obj = {key:"value"}
    var foo = function(){
        console.log(this)
    }
    foo.bind(obj)()  //  obj

Analysis: When the bind method is not used, foo this () pointed to by the global object window, and then points to the use of the method is to bind the object obj
***

4. True array into array-process

  • Writing:
    var arr = [1,3,5];
    var obj = {};
    [].push.apply(obj,arr);     // { 0:1, 1:3 , 2:5 , length:3 }

The array of array-converted to true process

  • ES5 writing:
    // 系统自带类数组对象
    var divs = document.querySelectorAll('div');
    // 自定义类数组对象
    var obj = {0:'zjy' , 1:18 , length:2};
    var arr = [];   //  真数组

    // 在高级的浏览器中使用如下的方法是可以实现类数组对象转换为真数组,但是在 IE8 及其以下是不行的
    // [].push.apply(arr,divs);
    // [].push.apply(arr,obj);
    // 为了兼容 IE8 及其以下的浏览器,需要使用数组的 slice 方法
    // 数组的 slice 方法不传递参数的时候是将数组中的元素依次遍历然后放到一个 新的数组 中原样返回
    var arr2 = [].slice.call(obj);
  • ES6 written:
    Array.from (); a method for converting an array of objects and classes may be traversed (the Iterator) an array of objects is true
    var obj = {0:'zjy' , 1:18 , length:2};
    var arr = Array.from(obj)   // ['zjy',18]

Extended operator ( ...) can also be traversed (the Iterator) an array of objects into true

    [..document.querySelectorAll('div')]

Guess you like

Origin www.cnblogs.com/liuyilong/p/11710798.html