共计 2175 个字符,预计需要花费 6 分钟才能阅读完成。
一、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); // 3
console.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]); // 2
var 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——原型与原型链
②构造函数
学习链接:构造函数
③作用域
学习链接:作用域