call() 、 apply() 、bind()方法的作用和区别！

2021-07-21 10:35:16 阅读：161 来源： 互联网

标签：obj bind test call 数组 var apply 方法

本文转载：https://www.cnblogs.com/liuyilong/p/11710798.html

js中call、apply、bind方法的作用和区别

这三个方法的作用都是改变函数的执行上下文！

1. call方法

作用：专门用于修改方法内部的 this 指向
格式：xxx.call( 对象名, 参数1, 参数2 , ...);。即：将 xxx 方法的 this 指向为 对象名
实例：

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

解析：没有使用 call 方法时，test方法的this指向全局对象window，而当使用了call方法后，将test的this指向从window变成了obj对象，而后面的参数则是对应方法的形参顺序

2. apply方法

作用：和call方法一样也是修改方法内部的 this指向的，它们的区别在于apply的第二个参数必须为一个数组（部署了Iterator接口的类数组对象也可以）
格式：xxx.apply( 对象名, [数组]);。即：将 xxx 方法的 this 指向为 对象名,数组中的元素依次与方法的形参对应
实例：

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

解析：没有使用 apply 方法时，test方法的this指向全局对象window，而当使用了apply方法后，将test的this指向从window变成了obj对象，而后面的数组参数则是将数组中元素依次对应到test方法形参的位置

3. bind方法

作用：也是改变this的指向问题
格式：xxx.bind( 对象名 , 参数1, 参数2 , ...);。即：将 xxx 方法的 this 指向为 对象名
实例：

 var obj = {key:"value"}
 var foo = function(){
    console.log(this)
 }
 foo.bind(obj)()  //  obj

解析：在没有使用bind方法时，foo()中的this指向的是全局对象window,而使用了bind方法之后则指向的是obj对象

4. 真数组转变为类数组过程

写法：

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

5. 类数组转变为真数组过程

ES5写法：

 // 系统自带类数组对象
    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写法：
Array.from();方法用于将类数组对象和可遍历（Iterator）对象转换为真数组

var obj = {0:'zjy' , 1:18 , length:2};
var arr = Array.from(obj)   // ['zjy',18]

扩展运算符（...）也可以将可遍历（Iterator）对象转换为真数组

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

标签：obj,bind,test,call,数组,var,apply,方法
来源： https://www.cnblogs.com/deng-jie/p/15038342.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。