函式宣告的多種方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> </style> </head> <body> <script> // let str = new String('cyy'); // console.log(str); // let str2 = 'cyy2'; // console.log(str2.substr(0, 2)); // let func = new Function('title', 'console.log(title)'); // func('cyy'); // 字面量形式 // function func(name) { // console.log(name); // } // func('cyy'); // let func = function (name) { // console.log(name); // }; // func('cyy2'); let user = { name: null, // setName: function (name) { // this.name = name; // }, // getName() { // return this.name; // }, setName(name) { this.name = name; }, getName() { return this.name; }, } user.setName('cyy'); console.log(user.getName()); </script> </body> </html>
全域函式定義特點：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> </style> </head> <body> <script> // function func() { // console.log(111); // } // window.func(); // console.log(window.screenX); // function screenX() { // console.log(111); // } // console.log(window.screenX); // let不會掛載到window上，不屬于全域 // var func1 = function () { // console.log(111); // } // window.func1(); // let func2 = function () { // console.log(222); // } // window.func2(); </script> </body> </html>
匿名函式與函式提升：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> </style> </head> <body> <script> // 這種情況不存在函式提升，匿名函式不存在函式提升 // 把一個匿名函式賦值給了變數 // let func1 = function () { // console.log(111); // } // func1(); ///這種情況存在函式提升 // func2(); // function func2() { // console.log(22); // } // function func() { // console.log(111); // } // func(); // var func = function () { // console.log(222); // } // func(); // 函式屬于物件，參考型別的賦值 // var func = function () { // console.log(222); // } // console.log(func instanceof Object); // let func2 = func; // func2(); function sum(...args) { // reduce里箭頭函式，也可以寫成匿名函式 return args.reduce((a, b) => a + b); } console.log(sum(1, 3, 6, 9)); </script> </body> </html>
立即執行函式與塊作用域解決沖突：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> </style> </head> <body> <script> // 立即執行函式，匿名函式自執行 // 防止污染全域 // (function (window) { // function show() { // console.log('show'); // } // window.func = { show }; // })(window); // window.func.show(); // show(); // 使用let的塊級作用域解決問題 { function show() { console.log('show'); } window.func = { show }; } window.func.show(); </script> </body> </html>
形參與實參：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> </style> </head> <body> <script> // a,b是形參，1,2是實參；通常情況下引數個數是對應的 // function func(a,b){ // console.log(a,b); // } // func(1,2); // 形參個數大于實參時，多出來的形參值為undefined // function func(a, b, c) { // console.log(a, b, c); // } // func(1, 2); // 形參個數小于實參時，多出來的實參值會被忽略 function func(a, b) { console.log(a, b); } func(1, 2, 3, 4); </script> </body> </html>
默認引數的使用技巧：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> </style> </head> <body> <script> // function avg(total, year) { // year = year || 1; // return Math.round(total / year); // } // console.log(avg(2000)); // function avg(total, year = 1) { // return Math.round(total / year); // } // console.log(avg(2000)); // function sortArray(arr, type = 'asc') { // return arr.sort((a, b) => type == 'asc' ? a - b : b - a); // } // console.log(sortArray([11, 44, 22, 66, 33])); // console.log(sortArray([11, 44, 22, 66, 33], 'desc')); function sum(total, discount = 1, dis = 1) { return total * discount * dis; } console.log(sum(1000, 0.9, 0.7));// 折上折 </script> </body> </html>
函式引數與arguments：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> </style> </head> <body> <button id="btn">cyy</button> <script> // function func(val) { // return val <= 3; // } // let res = [1, 2, 4, 6, 8].filter(func); // console.log(res); // let i = 0; // setInterval(function () { // console.log(++i); // },1000); // let i = 0; // function func() { // console.log(++i); // } // setInterval(func, 1000); // document.getElementById('btn').addEventListener('click', function () { // alert(this.innerHTML); // }); // function func() { // alert(this.innerHTML); // } // document.getElementById('btn').addEventListener('click', func); // function sum() { // // 獲取到所有傳入的引數 // // console.log(arguments); // // let count = 0; // // for (let i = 0; i < arguments.length; i++) { // // count += arguments[i]; // // } // // return count; // // arguments是類陣列，需要先轉陣列 // // return [...arguments].reduce((a, b) => a + b); // } function sum(...args) { return args.reduce((a, b) => a + b); } console.log(sum(1, 5, 23, 88)); </script> </body> </html>
箭頭函式使用語法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <script> // 函式的簡寫形式，箭頭函式 // let func = function() { // return 111; // } // let func = () => { // return 111; // } // let res = [1, 33, 66, 2, 8, 3].filter(function(item) { // return item < 10; // }); // console.log(res); // let res = [1, 33, 66, 2, 8, 3].filter(item => item < 10); // console.log(res); // let sum = [1, 2, 3, 4].reduce(function(a, b) { // return a + b; // }); // console.log(sum); // let sum = [1, 2, 3, 4].reduce((a, b) => a + b); // console.log(sum); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <script> // 函式的簡寫形式，箭頭函式 // let func = function() { // return 111; // } // let func = () => { // return 111; // } // let res = [1, 33, 66, 2, 8, 3].filter(function(item) { // return item < 10; // }); // console.log(res); // let res = [1, 33, 66, 2, 8, 3].filter(item => item < 10); // console.log(res); // let sum = [1, 2, 3, 4].reduce(function(a, b) { // return a + b; // }); // console.log(sum); // let sum = [1, 2, 3, 4].reduce((a, b) => a + b); // console.log(sum); </script> </body> </html>
使用函式完成遞回演算法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <script> // 遞回實作階乘 // function factorial(num) { // if (num == 1) return 1; // return num * factorial(num - 1); // } // console.log(factorial(5)); function factorial(num) { return num == 1 ? 1 : num * factorial(num - 1); } console.log(factorial(5)); </script> </body> </html>
遞回求和與點語法注意事項：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <script> // let sum = [1, 2, 3, 4].reduce((a, b) => a + b); // console.log(sum); let sum = function(...args) { // if (args.length == 0) return 0; // return args.pop() + sum(...args); return args.length == 0 ? 0 : args.pop() + sum(...args); } console.log(sum(1, 2, 3, 4)); // 引數中使用...語法，可以把接收到的所有引數變成一個陣列 // function func(...args) { // console.log(args); // } // func(1, 2, 3, 4); </script> </body> </html>
遞回實作倒三角：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <script> function star(num) { // if (num == 0) return ''; // // 會回傳undefined，所以可以使用短路運算子簡化操作 // // console.log(document.write('*'.repeat(num) + '<br/>')); // document.write('*'.repeat(num) + '<br/>') || star(--num);; return num ? document.write('*'.repeat(num) + '<br/>') || star(--num) : ''; } console.log(star(6)); </script> </body> </html>
遞回附加引數使用技巧：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <script> let lessons = [{ title: 'title1', click: 99 }, { title: 'title2', click: 35 }, { title: 'title3', click: 66 }, ]; // function change(lessons, num = 100, i = 0) { // if (i == lessons.length) return lessons; // lessons[i].click += num; // // ++i 先遞增，再賦值 // return change(lessons, num, ++i); // } // console.table(change(lessons)); // console.table(change(lessons, 50)); lessons = lessons.map(item => { return item.click += 100; }); console.table(lessons); </script> </body> </html>
什么是回呼函式：、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <button id="btn">cyy</button> <script> // 回呼函式 // document.getElementById('btn').addEventListener('click', function() { // alert(this.innerHTML); // }) let arr = [1, 2, 3, 4]; arr.map((item, index, arr) => { // 改變原資料 arr[index] += 10; }); console.table(arr); let narr = arr.map(item => { // 生成新資料 item += 10; return item; }); console.table(narr); </script> </body> </html>
展開語法（點語法）正確使用方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <script> // let arr = [1, 2, 3]; // let [a, b, c] = [...arr]; // console.log(a, b, c); // let arr1 = [1, 2, 3]; // let [...arr2] = [1, 2, 3]; // console.log(arr1, arr2); // let [a, b, ...c] = [1, 2, 3, 4, 5]; // console.log(a, b, c); // function sum() { // // 類陣列 // console.log(arguments); // } // sum(1, 2); // function sum(...args) { // // 展開語法，引數轉陣列 // console.log(args); // return args.reduce((a, b) => a + b); // } // console.log(sum(1, 2, 3, 4)); function sum(dis = 1, ...price) { // console.log(dis, price); let total = price.reduce((a, b) => a + b); return Math.round(total * dis); } console.log(sum(.9, 200, 33, 689)); </script> </body> </html>
函式與方法中this的不同：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <script> // 物件中的函式叫方法，類方法 // this指當前物件的參考 // let obj = { // name: 'cyy', // show() { // console.log(this.name); // } // } // obj.show(); // 全域中this指的就是windowd物件 // console.log(window); // console.log(this); // console.log(this == window); // 函式與方法中this指向不同 // let obj = { // name: 'cyy', // // show是方法,this指向當前物件 // show() { // // render是函式,this指向window物件 // function render() { // console.log(this); // console.log(this.name); // } // render(); // console.log(this); // console.log(this.name); // } // } // obj.show(); // User是建構式創建的物件 // name是物件的屬性 // show是物件的方法 // this指向當前物件 function User(name) { this.name = name; this.show = function() { // render是函式，this指向window function render() { console.log(this); } render(); return this.name; } } let cyy = new User('cyy'); console.log(cyy.show()); </script> </body> </html>
通過變數改變this指向：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <script> // let lesson = { // name: 'cyy', // lists: ['html', 'css', 'js'], // show() { // // console.log(this.name, this.lists); // const self = this; // 保存當前物件為self // return this.lists.map(function(item) { // // console.log(item); // // console.log(this); // 這里的this指向window // // self會隨著作用域鏈向外部查找 // return `${self.name}--${item}`; // }) // } // } // console.table(lesson.show()); // 部分函式提供第二個引數，可以傳入指代函式中使用的this // 比如map就可以 let lesson = { name: 'cyy', lists: ['html', 'css', 'js'], show() { return this.lists.map(function(item) { console.log(this); // 這里的this指向window return `${this.name}--${item}`; }, this); } } console.table(lesson.show()); </script> </body> </html>
箭頭函式帶來的this變化實體：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <button>cyy</button> <button>cyy2</button> <script> // let func1 = function() { // console.log(111); // } // let func2 = () => { // console.log(222); // } // func1(); // func2(); // let lesson = { // name: 'cyy', // lists: ['html', 'css', 'js'], // show() { // console.log(this); // return this.lists.map(function(item) { // console.log(this); // 這里的this指向window // // return `${this.name}--${item}`; // }); // } // } // console.table(lesson.show()); // 箭頭函式中，this指向父級作用域中的this // let lesson = { // name: 'cyy', // lists: ['html', 'css', 'js'], // show() { // console.log(this); // return this.lists.map(item => `${this.name}--${item}`); // } // } // console.table(lesson.show()); // let Dom = { // name: 'cyy', // bind() { // const button = document.querySelector('button'); // // console.log(button); // button.addEventListener('click', function() { // // this指向button // console.log(this); // console.log(this.innerHTML); // }); // button.addEventListener('click', () => { // // this指向當前物件DOM // console.log(this); // console.log(this.innerHTML); // }); // } // } // Dom.bind(); // let Dom = { // name: 'cyy', // bind() { // const button = document.querySelector('button'); // button.addEventListener('click', (event) => { // // this指向當前物件DOM // // event.target指向當前事件的元素 // console.log(this.name + event.target.innerHTML); // }); // } // } // Dom.bind(); // let Dom = { // name: 'cyy', // bind() { // const button = document.querySelector('button'); // const self = this; // button.addEventListener('click', function() { // console.log(self.name + this.innerHTML); // }); // } // } // Dom.bind(); // let Dom = { // name: 'cyy', // handleEvent(event) { // // event.target是傳遞過來的button // console.log(this.name + event.target.innerHTML); // }, // bind() { // const button = document.querySelector('button'); // const self = this; // // 把btn通過this傳遞 // button.addEventListener('click', this); // } // } // Dom.bind(); // let Dom = { // pre: 'cyy_', // bind() { // let buttons = document.querySelectorAll('button'); // buttons.forEach(item => { // //this是當前物件 // // console.log(this); // item.addEventListener('click', event => { // // console.log(event.target); // // console.log(this); // console.log(this.pre + event.target.innerHTML); // }) // }) // } // } // Dom.bind(); let Dom = { pre: 'cyy_', bind() { let buttons = document.querySelectorAll('button'); let self = this; buttons.forEach(function(item) { item.addEventListener('click', function(event) { console.log(self.pre + this.innerHTML); }) }) } } Dom.bind(); </script> </body> </html>
this的構造原理實作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <script> // apply call bind // 建構式 // function User(name) { // this.name = name; // } // let u = new User('cyy'); // console.log(u); // function User(name) { // this.name = name; // return { // a: 111 // }; // } // let u = new User('cyy'); // console.log(u); function User(name) { this.name = name; } let obj = { url: 'www.baidu.com' }; // this可以被改變，這里就把User里的this指向了obj User.call(obj, 'cyy'); console.log(obj); </script> </body> </html>
call與apply：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <button>cyy1</button> <button>cyy2</button> <script> // call和apply都可以改變this的指向，并且立即執行函式 // 區別在于傳參方式的不同 // call是一個一個傳，apply是陣列形式傳 // let user1 = { // name: 'cyy1' // }; // let user2 = { // name: 'cyy2' // }; // function User(pre, end) { // console.log(pre + this.name + end); // } // User.call(user1, 'cyy_', '_girl'); // User.apply(user2, ['hahaha_', '_end~']); // 在不傳遞引數的情況下，call和apply的用法和效果是一樣的 // let buttons = document.querySelectorAll('button'); // for (let i = 0; i < buttons.length; i++) { // buttons[i].addEventListener('click', function(event) { // // 使用call改變this指向，指向被點擊的按鈕button // show.call(event.target); // // 使用apply改變this指向，指向被點擊的按鈕button // // show.apply(event.target); // }) // } // function show() { // console.log(this.innerHTML); // // 這里的this指向window // } console.log(Math.max(1, 2, 3, 7)); let arr = [2, 3, 7, 22]; console.log(Math.max(...arr)); // 把陣列展開 console.log(Math.max.apply(Math, arr)); // this指向Math </script> </body> </html>
建構式方法繼承：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <script> function Request() { this.get = function(params) { console.log(params); // 將物件中的鍵提取成為一個陣列Object.keys let get = Object.keys(params).map(key => `${key}=${params[key]}`).join('&'); let url = 'http://www.cyy.com/' + this.url + '/' + get; document.write(url + '<br/>'); } } function Article() { this.url = 'article/lists'; Request.call(this); } let a = new Article(); a.get({ id: 1, cate: 2 }); function User() { this.url = 'user/lists'; Request.call(this); } let u = new User(); u.get({ id: 1, role: 'admin' }); </script> </body> </html>
優雅的開發面板組件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> dt { background: orange; padding: 20px; border-bottom: 2px solid black; } dd { background: #ddd; margin-inline-start: 0; padding: 100px; } dt, dd { text-align: center; } </style> </head> <body> <dl> <dt>title1</dt> <dd>1</dd> <dt>title2</dt> <dd hidden="hidden">2</dd> </dl> <script> function panel(index) { let dds = document.querySelectorAll('dd'); console.log(dds); dds.forEach(dd => dd.setAttribute('hidden', 'hidden')); dds[index].removeAttribute('hidden'); } // document.querySelectorAll('dt').forEach((dt, index) => { // // console.log(dt); // dt.addEventListener('click', () => { // // call中沒有用到this指向，所以可以傳遞null // panel.call(null, index); // }); // }); document.querySelectorAll('dt').forEach((dt, index) => { dt.addEventListener('click', () => panel.call(null, index)); }); </script> </body> </html>
bind原來是這么用的：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <button>cyy</button> <script> // call或者apply會立刻執行 // function show() { // console.log(this.name); // } // show.call({ // name: 'cyy' // }); // show.apply({ // name: 'cyy' // }); // // bind不會立刻執行，會生成一個新的函式，需要執行的時候再呼叫 // let func = show.bind({ // name: 'cyy' // }); // func(); // 函式的賦值是共用一個參考地址 // 而使用bind是復制一份，不再跟原來的共用一份 // function a() {} // let b = a; // console.log(a == b); // let c = a.bind(); // console.log(a == c); function sum(a, b) { console.log(this.f + a + b); } // call和apply是立即執行， 因此使用時必須直接傳參 // sum.call({ // f: 100 // }, 2, 4); // sum.apply({ // f: 100 // }, [2, 7]); // sum.bind({ // f: 100 // }, 2, 7)(); // bind可以在系結時傳參，也可以在呼叫時傳參 // sum.bind({ // f: 1 // })(2, 3); // // 系結時引數足夠了，那么呼叫時傳的引數無效 // sum.bind({ // f: 1 // }, 3, 3)(2, 3); // // 系結時引數不夠，那么呼叫時按順序補上 // sum.bind({ // f: 1 // }, 3)(11, 12); document.querySelector('button').addEventListener('click', function(event) { console.log(this.name + event.target.innerHTML); }.bind({ name: 'cyyyayaya~' }) ); </script> </body> </html>
漂亮的隨機色效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style> </head> <body> <h1>CYY</h1> <script> function Color(elem) { this.elem = elem; this.colors = ['pink', 'lightblue', 'lightgreen', '#f5554a', '#ad80f6', '#8bc34a', '#ffef62', '#ff9800']; this.run = function () { let i = Math.floor(Math.random() * this.colors.length); this.elem.style.backgroundColor = this.colors[i]; console.log(i); }.bind(this); //使用bind改變this指向 } let c = new Color(document.body); c.run(); let h = new Color(document.querySelector('h1')); h.run(); </script> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/224502.html
標籤：其他
上一篇：探索JS中的函式秘密