站長資訊網(wǎng)
es6有arguments，但箭頭函數(shù)是不識別arguments的，所以用rest（剩余參數(shù)）來取代arguments；剩余參數(shù)直接就固定到數(shù)組里了，而arguments是類數(shù)組（本質(zhì)是個對象），還需要轉(zhuǎn)換。剩余參數(shù)語法允許將一個不定數(shù)量的參數(shù)表示為一個數(shù)組，不定參數(shù)定義方式，這種方式很方便的去聲明不知道參數(shù)情況下的一個函數(shù)。
前端（vue）入門到精通課程：進入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
一、arguments用法
1. 說明
es6中箭頭函數(shù)是不識別arguments的。所以用rest來取代arguments。
ES6之后，都用剩余參數(shù)代替arguments了，剩余參數(shù)直接就固定到數(shù)組里了，而arguments是類數(shù)組(本質(zhì)是個對象)，還需要轉(zhuǎn)換。
2. arguments的常用操作
(1). 獲取參數(shù)長度
(2). 根據(jù)索引獲取參數(shù)
(3). 獲取當前arguments所在的函數(shù)
代碼分享：
{ console.log("----------------1. arguments常用操作-------------------"); function Test1() { // arguments長什么樣？---本質(zhì)是一個對象 // { // '0': 1, // '1': 2, // '2': 3, // '3': 4, // '4': 5, // '5': 6, // '6': 7, // '7': 8 // } console.log(arguments); // 常見的對arguments的操作是三個 // 1.獲取參數(shù)的長度 console.log(arguments.length); // 2.根據(jù)索引值獲取某一個參數(shù) console.log(arguments[0]); console.log(arguments[1]); console.log(arguments[2]); // 3.callee獲取當前arguments所在的函數(shù) console.log(arguments.callee); } //調(diào)用 Test1(1, 2, 3, 4, 5, 6, 7, 8); }
3. 將arguments轉(zhuǎn)換成數(shù)組
{ console.log("----------------2. 將arguments轉(zhuǎn)換成數(shù)組-------------------"); function Test2() { // 方案1-自己遍歷 { let newArray = []; for (let i = 0; i < arguments.length; i++) { newArray.push(arguments[i]); } console.log(newArray); } // 方案2-Array.prototype.slice將arguments轉(zhuǎn)成array { let newArray2 = Array.prototype.slice.call(arguments); console.log(newArray2); } // 方案3-ES6語法 Array.From { console.log(Array.from(arguments)); } // 方案4-ES6語法 剩余參數(shù) { console.log([...arguments]); } } //調(diào)用 Test2(1, 2, 3, 4, 5, 6, 7, 8); }
4. 箭頭函數(shù)中沒有arguments
{ console.log("----------------3. 箭頭函數(shù)中沒有arguments-------------------"); let Test3 = () => { console.log(arguments); }; Test3(1, 2, 3, 4); }
二. ES6剩余參數(shù)和展開運算符
1. 剩余參數(shù)（Rest Parameter）
剩余參數(shù)語法允許我們將一個不定數(shù)量的參數(shù)表示為一個數(shù)組，不定參數(shù)定義方式，這種方式很方便的去聲明不知道參數(shù)情況下的一個函數(shù)。
代碼分享
{ console.log("-----------------1. 剩余參數(shù)---------------------"); function sum1(...nums) { console.log(nums); console.log( nums.reduce((preValue, currentValue) => preValue + currentValue, 0) ); //求和 } //調(diào)用 sum1(1, 2); //[1,2] sum1(1, 2, 3); //[1,2,3] sum1(1, 2, 3, 4); //[1,2,3,4] function sum2(num1, num2, ...nums) { console.log(nums); console.log( nums.reduce( (preValue, currentValue) => preValue + currentValue, num1 + num2 ) ); //求和 } //調(diào)用 sum2(1, 2); //[] sum2(1, 2, 3); //[3] sum2(1, 2, 3, 4); //[3,4] }
2. 展開運算符（Spread Operator）
把固定的數(shù)組內(nèi)容“打散”到對應(yīng)的參數(shù)。
代碼分享：
{ console.log("-----------------2. 展開運算符---------------------"); function sum1(num1, num2) { console.log(num1 + num2); } // 調(diào)用 let arry1 = [10, 20]; sum1(...arry1); function sum2(num1, num2, num3) { console.log(num1 + num2 + num3); } //調(diào)用 let arry2 = [10, 20, 30]; sum2(...arry2); }
總結(jié)：
1. Spread Operator 和 Rest Parameter 是形似但相反意義的操作符，簡單的來說 Rest Parameter 是把不定的參數(shù)“收斂”到數(shù)組，而 Spread Operator 是把固定的數(shù)組內(nèi)容“打散”到對應(yīng)的參數(shù)。
2. Rest Parameter 用來解決函數(shù)參數(shù)不確定的場景，Spread Operator 用來解決已知參數(shù)集合應(yīng)用到固定參數(shù)的函數(shù)上
三. apply/call/bind用法總結(jié)
1. apply 和 call都是為了改變被調(diào)用函數(shù)中this的指向, 同時立即執(zhí)行該函數(shù)
2. bind也是為了改變函數(shù)中this的指向，但它返回的是一個函數(shù)，需要被調(diào)用才能執(zhí)行
3. apply 和 call的第一個參數(shù)都是傳入綁定到對象，用于改變this指向，但是
(1). apply是將需要傳入函數(shù)的參數(shù)放到一個數(shù)組里，傳入到第二個參數(shù)的位置
(2). call是從第2,3,4…..位置依次傳入需要的參數(shù)
4. bind 后續(xù)傳入?yún)?shù)的形式和call相同，從第2,3,4…..位置依次傳入需要的參數(shù)，bind返回的是一個函數(shù)，需要再次調(diào)用。
代碼分享：
// 案例1--隱式綁定 { console.log("----------------案例1--------------------"); let name = "ypf1"; let age = 18; let obj = { name: "ypf2", myAge: this.age, getMsg: function () { console.log(this.name, this.age); }, }; // 調(diào)用 console.log(obj.myAge); //undefined （隱式綁定，this指向obj） obj.getMsg(); //ypf2,undefined （隱式綁定，this指向obj） } //案例2--只綁定，不傳參 /* 注意1個細節(jié)，bind后面多了個(),bind返回的是一個新函數(shù)，必須調(diào)用才能執(zhí)行 */ { console.log("----------------案例2--------------------"); let name = "ypf1"; let age = 18; let obj = { name: "ypf2", myAge: this.age, getMsg: function () { console.log(this.name, this.age); }, }; let obj2 = { name: "ypf3", age: 35 }; // 調(diào)用 obj.getMsg.apply(obj2); //ypf 35 (apply顯式綁定優(yōu)先級高于隱式綁定，this指向obj2) obj.getMsg.call(obj2); //ypf 35 (call顯式綁定優(yōu)先級高于隱式綁定，this指向obj2) obj.getMsg.bind(obj2)(); //ypf 35 (bind顯式綁定優(yōu)先級高于隱式綁定，this指向obj2) } // 案例3--傳遞參數(shù) /* apply傳遞數(shù)組 call和bind都是依次寫參數(shù) 特別注意:bind可以多次傳遞參數(shù) */ { console.log("----------------案例3--------------------"); let name = "ypf1"; let age = 18; let obj = { name: "ypf2", myAge: this.age, getMsg: function (msg1, msg2) { console.log(this.name, this.age, msg1, msg2); }, }; let obj2 = { name: "ypf3", age: 35 }; //調(diào)用 obj.getMsg.apply(obj2, ["消息1", "消息2"]); obj.getMsg.call(obj2, "消息1", "消息2"); //bind用法1 obj.getMsg.bind(obj2, "消息1", "消息2")(); //bind用法2--多次傳參 let fn1 = obj.getMsg.bind(obj2, "消息1"); fn1("消息2"); }
四. apply/call/bind用js實現(xiàn)
1. apply
(1). xxFn.ypfapply()， 在ypfapply中，this指向xxFn函數(shù)
(2). 需要實現(xiàn)出入 null 或 undefined的時候，this指向window
(3). 使用 delete 可以刪除對象的某個屬性
(4). 通過Function.prototype原型添加
(5). || 用法
argArray = argArray?argArray:[] 等價于
argArray = argArray || []
代碼分享：
/** * 利用js手寫call函數(shù) * @param {Object|null|undefined} thisArg 待綁定的對象 * @param {Array} argArray 調(diào)用函數(shù)的數(shù)組參數(shù) */ Function.prototype.ypfapply = function (thisArg, argArray) { // 1. this指向調(diào)用函數(shù) let fn = this; // 2. 獲取傳遞參數(shù) thisArg = thisArg != null && thisArg != undefined ? Object(thisArg) : window; //3. 賦值函數(shù)并調(diào)用 thisArg.fn1 = fn; argArray = argArray || []; let result = thisArg.fn1(...argArray); //4. 刪除thisArg綁定的屬性 delete thisArg.fn1; //5.返回結(jié)果 return result; }; // 測試 function test1() { console.log(this); } function sum(num1, num2) { console.log(this, num1, num2); return num1 + num2; } // 1. 利用系統(tǒng)自帶的apply測試 console.log("----------1.利用系統(tǒng)自帶的call測試---------------"); test1.apply(null); let result1 = sum.apply("ypf1", [10, 20]); console.log(result1); // 2. 利用自己寫的測試 console.log("----------2.利用自己寫的測試---------------"); test1.ypfapply(null); let result2 = sum.ypfapply("ypf1", [10, 20]); console.log(result2);
2. call
(1). xxFn.ypfcall()， 在ypfcall中，this指向xxFn函數(shù)
(2). 需要實現(xiàn)出入 null 或 undefined的時候，this指向window
(3). 使用 delete 可以刪除對象的某個屬性
(4). 通過Function.prototype原型添加
代碼分享：
/** * 利用js手寫call函數(shù) * @param {Object|null|undefined} thisArg 待綁定的對象 * @param {...any} args 調(diào)用函數(shù)的參數(shù) */ Function.prototype.ypfcall = function (thisArg, ...args) { // 1. 指向待調(diào)用的函數(shù) let fn = this; //2. 獲取綁定對象 thisArg = thisArg != null && thisArg != undefined ? Object(thisArg) : window; //3.調(diào)用函數(shù) thisArg.fn1 = fn; let result = thisArg.fn1(...args); //4. 刪除多余的屬性 delete thisArg.fn1; //5. 最終返回 return result; }; // 測試 function test1() { console.log(this); } function sum(num1, num2) { console.log(this, num1, num2); return num1 + num2; } // 1. 利用系統(tǒng)自帶的call測試 console.log("----------1.利用系統(tǒng)自帶的call測試---------------"); test1.call(undefined); let result1 = sum.call("ypf1", 10, 20); console.log(result1); // 2. 利用自己寫的測試 console.log("----------2.利用自己寫的測試---------------"); test1.ypfcall(undefined); let result2 = sum.ypfcall("ypf1", 10, 20); console.log(result2);
3. bind
(1). bind和call相同，接收到參數(shù)是依次傳遞，另外bind返回的是函數(shù)！！
(2). xxFn.ypfbind()， 在ypfbind中，this指向xxFn函數(shù)
(3). 需要實現(xiàn)出入 null 或 undefined的時候，this指向window
(4). 使用 delete 可以刪除對象的某個屬性
(5). 由于bind返回的是函數(shù)，所以需要聲明1個函數(shù), 并返回這個函數(shù)
函數(shù)內(nèi)部核心點：由于bind可以一次性傳遞參數(shù)，也可以多次傳遞參數(shù)，所以需要對兩個參數(shù)進行一下合并
代碼分享：
Function.prototype.ypfbind = function (thisArg, ...argArray) { // 1. this指向調(diào)用的函數(shù) let fn = this; // 2. 處理綁定參數(shù) thisArg = thisArg != null && thisArg != undefined ? Object(thisArg) : window; // 3. 聲明一個函數(shù) function DyFun(...argArray2) { // 綁定函數(shù) thisArg.fn1 = fn; // 合并參數(shù) let finalArgArray = [...argArray, ...argArray2]; // 調(diào)用函數(shù) let result = thisArg.fn1(...finalArgArray); // 刪除用完的屬性 delete thisArg.fn1; // 返回結(jié)果 return result; } //4. 返回一個函數(shù) return DyFun; }; // 測試 function test1() { console.log(this); } function sum(num1, num2) { console.log(this, num1, num2); return num1 + num2; } // 1. 利用系統(tǒng)自帶的bind測試 console.log("----------1. 利用系統(tǒng)自帶的bind測試---------------"); test1.bind(undefined)(); let result1 = sum.bind("ypf1", 10, 20); console.log(result1()); let result2 = sum.bind("ypf2", 10); console.log(result2(30)); // 2. 利用自己寫的測試 console.log("----------2.利用自己寫的測試---------------"); test1.bind(undefined)(); let result3 = sum.bind("ypf1", 10, 20); console.log(result3()); let result4 = sum.bind("ypf2", 10); console.log(result4(30));
【
