一、call、apply、bind的区别
call、apply、bind都是扭转this指向的办法。
call
和 apply
的区别在于传递参数的形式不同:
apply
的第2
个参数为数组call
则是从第2
个至第N
个都是给func
的传参
bind
和 call
、 apply
的区别在于函数是否立刻执行:
call
、apply
是在扭转了函数的this
指向之后立马执行bind
会返回一个函数,尽管扭转了func
的this
指向,但不是马上执行, 而是调用返回的函数才执行
二、call、apply、bind的应用
一、apply
1、获取数组最值
能够通过apply来获取Math.max()最大值和Maxth.min()最小值
let arr = [1, 2, 3];const max = Math.max.apply(null, arr); // es6 Math.max(...arr)const min = Math.min.apply(null, arr); // es6 Math.min(...arr)console.log(max); // 3console.log(min); // 1//比照 简略循环算法max = -Infinity, min = +Infinity;for (var i = 0; i < arr.length; i++) { if (arr[i] > max) max = arr[i]; if (arr[i] < min) min = arr[i];}// 应用apply参数过多时,达到引擎的下限时,传入的参数会被截取,不是残缺的数组,可应用将数组切块后循环传入指标办法:function minOfArray(arr) { var min = Infinity; var QUANTUM = 3; for (var i = 0, len = arr.length; i < len; i += QUANTUM) { var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len))); min = Math.min(submin, min); } return min;}var min = minOfArray([5, 6, 2, 3, 7]); // 2var min = minOfArray([5, 6, 2, 3, 1]); // 1
// 运行后果
二、call
1、判断数据类型
能够通过Object.toString.call来判断所有数据类型
// 判断原生对象const isPlainObject = val => Object.toString.call(val) === '[object Object]'// 判断字符串const isString = val => Object.toString.call(val) === '[object String]'
2、将类数组转为数组
类数组因为不是真正的数组,所有没有数组类型上自带的种种办法,所以要转为数组,能力调用数组的办法.
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3};// ES5的写法let arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']// ES6的写法let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
3、遍历NodeList数据
document.querySelectorAll()
返回的并不是咱们想当然的数组,而是 NodeList
,对 NodeList
,它外面没有 .forEach
办法,咱们应用了这样的办法进行循环:
var divs = document.querySelectorAll('div');[].forEach.call(divs, function(div) { // do whatever div.style.color = "red";});
原先的foreach办法能够接管一个参数
[1,2,3].forEach(function (num) { console.log(num); });
通过下面的代码,能够拜访到this对象,是指向[1,2,3]的,也就是一个数组。
.call是一个prototype,JavaScript内置的,它的第一个参数就是扭转this指向,
[1, 2, 3].forEach.call(["a", "b", "c"], function (item, i, arr) { console.log(i + ": " + item);});// 0: "a"// 1: "b"// 2: "c"
因而, [].forEach.call()
是一种疾速的办法拜访 forEach
,并将空数组的 this
换成想要遍历的list。
三、bind
window.color = 'red';var str = {color: 'yellow'}function sayColor() { console.log(this.color,'say')}var objSayColor = sayColor.bind(str)()// yellow 'say'var objSayColor = sayColor.bind(this)()// red 'say'
学习链接:
https://www.runoob.com/w3cnot...
四、延长点
①prototype
, __proto__
原型与原型链
学习链接:javascript——原型与原型链
②构造函数
学习链接:构造函数
③作用域
学习链接:作用域