and the difference between using the bind call apply: https://www.jianshu.com/p/015f9f15d6b3
Before talking about this to understand some of the concepts that are important, it was said javascript learned of this would basically half javascript
In javascript, Call and apply both to change contexts (context) runs a function exists, in other words, this is to change the function of the internal body points.
JavaScript is a major feature of functions exist:
When a context is defined
context running
context can be changed
If you want to understand the depth of knowledge to open a javascript memory management mechanisms and operating principles, and not do too much here introduced.
function Fruits() {} Fruits.prototype = { color: "red", printf: function() { console.log("My color is " + this.color); } } var apple = new Fruits; apple.printf(); //My color is red // 改变this banana = { color: "yellow" } apple.printf.call(banana); //My color is yellow apple.printf.apply(banana); //My color is yellow // 通过call apply这两个来改变上下文的this指向 call, apply the same method with different parameters just passed it, Call (obj, args1, args2)
the Apply (obj, [args1, args2]), so it is clear to see the difference it!
An array of additional
var array1 = [12 , "foo" , {name "Joe"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); /* array1 值为 [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */ // 这样子优雅的解决了push 方法子传递一个参数的问题了。当然数组合并有contact 方法来合并的 // 比较数组的大小，使用 apply 作为传递数组的必选方法。 var numbers = [5, 458 , 120 , -215 ]; var maxInNumbers = Math.max.apply(Math, numbers), //458 maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458 // 判断是否是数组 前提是toString 方法没有被重写。 functionisArray(obj){ return Object.prototype.toString.call(obj) === '[object Array]' ; } // 将伪数组转成数组 // ES6 有方法 Array.from(args) 转化 var dom = Array.prototype.slice.call(document.getElementsByTagName("div")); // 这样 domNodes 就可以使用pop() ,push() 等方法了。 In-depth understanding of call apply
The method of packaging console.log
function log(){ console.log.apply(console, arguments); }; log(1); //1 log(1,2); //1 2 // 这是一道面试题这样的方法可以说是最优雅的了 // 我也是今天才知道他们两能力这么大 function log(){ var args = Array.prototype.slice.call(arguments); var tim = new Date.getTime() args.unshift(tim); console.log.apply(console, args); }; // 这个就可以优雅的给log 方法带上一个时间搓的前缀啦，是不是非常的棒。函数的不定参 arguments 是伪数组来的 //写了这么多相信各位已经明白了，我现在才知道这两个方法的强大，以前一直认为只是改变this这么简单，其实也改变this啊！ Details of the method bind
Come talk bind. bind () method is very similar to apply and call, but also can be changed to point to this function in vivo.
My explanation is: bind () method creates a new function, called binding function, when calling the binding function, binding the first argument will be created when it passed bind () method as this the incoming bind () method of the second and subsequent parameter per se adding parameters as parameters in the order of the original function call to the function is to bind the original function.
Direct look at the specifics of how to use the monomer in common mode, we usually use _this, that, self preservation such as this, so that we can continue to refer to changing the context after it. like this:
var foo = {
bar : 1, eventBind: function(){ var _this = this; $('.someClass').on('click',function(event) { /* Act on the event */ console.log(_this.bar); //1 }); } } // 使用 bind 方法 var foo = { bar : 1, eventBind: function(){ $('.someClass').on('click',function(event) { /* Act on the event */ console.log(this.bar); //1 }.bind(this)); } } // 多个bind var bar = function(){ console.log(this.x); } var foo = { x:3 } var sed = { x:4 } var func = bar.bind(foo).bind(sed); func(); //? var fiv = { x:5 } var func = bar.bind(foo).bind(sed).bind(fiv); func(); //3 第一个值，第二个失效了 bind compatible wording
Function.prototype.bind= function(obj){ if (Function.prototype.bind) return Function.prototype.bind; var _self = this, args = arguments; return function() { _self.apply(obj, Array.prototype.slice.call(args, 1)); } } // 可能大家会有疑惑，这里为什么return 一个函数回去，因为bind()不是调用就执行的所以在这里返回一个函数。 // MDN的方法 if (!Function.prototype.bind) { Function.prototype.bind = function(oThis) { if (typeof this !== 'function') { // closest thing possible to the ECMAScript 5 // internal IsCallable function throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); } var aArgs = Array.prototype.slice.call(arguments, 1), fToBind = this, fNOP = function() {}, fBound = function() { return fToBind.apply(this instanceof fNOP ? this : oThis, // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的 aArgs.concat(Array.prototype.slice.call(arguments))); }; // 维护原型关系 if (this.prototype) { // Function.prototype doesn't have a prototype property fNOP.prototype = this.prototype; } fBound.prototype = new fNOP(); return fBound; }; } // 也就是加了比较严格的判断。 From bind the source code can be seen with the call, you apply but do it!
bind after the call completes execution, call, apply is immediately executed. Is a mutual exchange between the
bind is not compatible (IE5,6,7,8)
References:
https://www.cnblogs.com/coco1s/p/4833199.html
https://blog.csdn.net/u012443286/article/details/78633540