call, apply, bind 主要实现的功能是改变this的指向.
在正常情况下 console.log(this) 输出的内容是 window 对象
第一个call函数
<script> // 改变函数内this指向 js提供了三种方法 call() apply() bind() var o = { name: 'andy' } function fn(a, b){ console.log(this); console.log(a + b); }; fn.call(o, 1, 2); // call第一个可以调用函数 第二个可以改变函数内的this 指向 function Father(uname, age, sex){ this.uname = uname; this.age = age; this.sex = sex; } function Son(uname, age, sex){ Father.call(this, uname, age, sex); } var son = new Son('刘德华', 18, '男'); console.log(son); </script>
第二个 apply() 与call的区别主要是 apply后面加的是类数组
<script> // apply()应用 运用的意思 var o = { name: 'andy' }; function fn(arr) { console.log(this); console.log(arr); // pink }; fn.apply(o, ['pink']); var arr = [1, 66, 3, 99, 4]; var arr1 = ['red', 'pink']; // The Math.max() function returns the largest of the zero or more numbers given as input parameters, or NaN if any parameter isn't a number and can't be converted into one. var max = Math.max.apply(Math, arr); var min = Math.min.apply(Math, arr); console.log(max, min); </script>
MDN有更加详细的内容https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
第三个 bind() 可看作绑定函数
// bind() 绑定 捆绑的意思 var o = { name: 'andy' }; function fn(a, b) { console.log(this); console.log(a + b); } var f = fn.bind(o, 1, 2) fn(); var btn1 = document.querySelector('button'); btn1.onclick = function() { this.disabled = true; // 这个this 指向的是 btn 这个按钮 // var that = this; setTimeout(function() { // that.disabled = false; // 定时器函数里面的this 指向的是window this.disabled = false; // 此时定时器函数里面的this 指向的是btn }.bind(this), 3000); // 这个this 指向的是btn 这个对象 } // bind改变this指向后不会调用函数
标签:console,log,bind,JS,call,var,apply From: https://www.cnblogs.com/coderatian/p/16598229.html