JavaScirpt之apply&call和bind _JavaScirpt

天下之事常成于困约，而败于奢靡。这篇文章主要讲述JavaScirpt之apply& call和bind相关的知识，希望能为你提供帮助。
一.call()和 apply()概念和区别1.概念
在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。
【JavaScirpt之apply& call和bind】2.区别
call()和 apply()唯一区别在于传参数,apply()接收两个参数,一个是在其运行函数中的作用域,另外一个是参数数组其中,第二参数可以是 Array 的实例,也可以是 arguments 对象,call()第一个参数和 apply()一样,第二个参数必须逐个列举出来,通过代码展示

function sum(num1, num2) { return num1 + num2; }function applySum(num1, num2) { console.log(arguments); //此时this对象是全局window对象 return sum.apply(this, arguments); // 或者 return sum.apply(this, [num1, num2]); } console.log(applySum(1, 2)); /** call()和apply()发放唯一区别在于传参数.call()传参数必须逐个列举出来 */ function callSum(num1, num2) { console.log(...arguments); //此时this对象是全局window对象 return sum.call(this, num1, num2); // 或者使用ES6的语法 return sum.call(this, ...arguments); } console.log(callSum(1, 2));

3.传递参数并非 apply 和 call 的真正的用武之地,他们真正强大的地方是能够扩充函数赖以运行的作用域

var o = { name: " kebi" }; window.name = " heyushuo" ; function sayName() { console.log(this.name); } sayName.call(this); //heyushuo sayName.call(window); //heyushuo sayName.call(o); //kebi此时函数的执行环境不一样了,因为此时函数体内的this对象指向了o,于是结果显示的是' kebi' //call和apply来扩充作用域的最大好处就是对象不需要与方法有任何耦合关系,

4.apply 和 call 的一些骚操作

//1.数组合并 var arr1 = [1, 2, 3]; var arr2 = [" heyushuo" , " kebi" ]; //arr1改变数组的作用域,arr2传的参数 Array.prototype.push.apply(arr1, arr2); //[1,2,3,' heyushuo' ,' kebi' ] //或者 arr1.concat(arr2) // 或者ES6的语法 [...arr1, ...arr2]; //2.数组中的最大值 Math.max.apply(Math,arr1); //或者es6的语法 Math.max(...arr1); //3.判断对象的数据类型 //在最原始的对象中进行,不能直接arr1.toString()或者 o.tosString() 因为对象和数组已经把原始对象的toString()方法进行了修改 Object.prototype.toString.call(arr1); // [object Array] Object.prototype.toString.call(o)); //[object Object]//4.可以把伪数组变成真正的数组,例如 arguments / document.getElementsByTagName(" span" ) Array.prototype.slice.call(document.getElementsByTagName(" span" ), 0)) //或者使用es6的语法 [...document.getElementsByTagName(" span" )]

二.bind()方法,ES5 提供了另外一个方法解释: bind()和 call,apply 的作用是一样的,bind()这个方法会创建一个函数的实例,该方法可传入两个参数，第一个参数作为 this，第二个及以后的参数则作为函数的参数调用,这个方法和 call,apply 最重要的区别是,绑定 bind()后会创建一个新的函数,并且不会自动执行,需要调用执行

//通过这个例子看一下三者的区别 var o = { name: " kebi" }; window.name = " heyushuo" ; function sayName() { console.log(this.name); }sayName.call(window); //heyushuo sayName.call(o); //kebi sayName.apply(window); //heyushuo sayName.apply(o); //kebi //这是bind的用法 var objName = sayName.bind(o); //ie9+ objName(); //kebi

三.总结