call,apply,bind的理解
阿新 • • 發佈:2021-09-03
call,apply,bind的理解
1. 三者的區別
改變函式執行時的上下文,改變this的指向。
call
,apply
立刻執行
bind
不是立刻執行,而是複製函式更改this
//需求 求陣列中最大的值
let arr = [2, 12, 4, 6, 8, 10];
console.log(Math.max.call(null, 2, 12, 4, 6, 8, 10));
console.log(Math.max.call(null, ...arr));//解構
console.log(Math.max.apply(null, arr));
call
接受的引數為一個一個的值,逗號隔開
apply
接受的引數為陣列形式
2.call,apply,bind的應用
<div>我是第1個div</div> <div>我是第2個div</div> <div>我是第3個div</div> <script> // 應用 1.將 偽陣列 轉換為 陣列 /** * 偽陣列:dom節點類陣列,arguments,物件 */ // 1.1 let div = document.getElementsByTagName("div"); let divArr = Array.prototype.slice.apply(div); console.log(divArr); //(3)[div, div, div] // es6可用擴充套件: console.log([...div]); //(3)[div, div, div] console.log(Array.from(div)); //(3)[div, div, div] // 1.2 function fn() { console.log(Array.prototype.slice.call(arguments)); // (6)[1, 4, 7, 2, 5, 8] } fn(1, 4, 7, 2, 5, 8); // 1.3 let obj = { 0: "fct", 1: true, 2: "gogo", 3: 666, length: 4 } console.log(Array.prototype.slice.call(obj));//(4)["fct", true, "gogo", 666] </script>
/** 應用2
* 使用 apply 進行陣列拼接
*/
let arr11 = [1,2,3];
let arr22 = [4,5,6];
Array.prototype.push.apply(arr11,arr22);// arr11改變了
console.log(arr11); //(6)[1, 2, 3, 4, 5, 6]
// 還可:
console.log([...arr11, ...arr22]);
/** * 3.判斷資料型別 */ let array1 = [1,2]; function isType(arr){ return Object.prototype.toString.call(arr) === "[object Array]" // return Object.prototype.toString.call(arr) === "[object Object]" //判斷是否為Object // return Object.prototype.toString.call(arr) === "[object String]" //判斷是否為String // return Object.prototype.toString.call(arr) === "[object Null]" //判斷是否為Null } console.log(isType(obj)); // false //es6 判斷型別 //instanceof 運算子用於檢測建構函式的 prototype 屬性是否出現在某個例項物件的原型鏈上。 console.log(array1 instanceof Object); //true,array也屬於object console.log(array1 instanceof Array); //true
人生人山人海人來人往,自己自尊自愛自由自在。
本文來自部落格園,作者:青檸i,轉載請註明原文連結:https://www.cnblogs.com/fuct/p/15222603.html