文章目錄

• • JavaScript進階3-學習筆記
  • • 閉包

JavaScript進階3-學習筆記

//組件封裝 什么是封裝？ 將冗余的代碼精簡化 例如：寫代碼：a頁面有一個函數，b頁面也需要這個函數，很多人就是直接copy為什么要封裝？ 提高代碼復用率怎么封裝？ 沒有標準答案，每個人封裝方式不同，難易程度不同 目的：提高復用率，簡化代碼例子：https://blog.csdn.net/hhhmonkey/article/details/118385077 封裝方式一：使用div定義一個按鈕，根據id渲染按鈕 如何寫多個樣式？ 封裝方式二：樣式可以使用：字符串、數組 封裝問題： 必須定義div，必須明確調用$(id)，要顯示寫樣式名改進一： 可以使用自定義<btn>，實際上是用button標簽去替換btn 一、找到btn的上級 二、創建button 三、刪除btn改進二： 將樣式寫入html，不需要在js中引用 指定一個標識樣式，即不是真實的樣式，只為選擇器使用$(".btn") 需要自定義屬性，type，text用來指定需要參數 1.找到所有的.btn的button 2.將type，text中的信息取出 3.動態整合button，不依賴于顯示的樣式名

封裝方式二common.js：

//公共的方法 樣式不同 標題不同 /*** @param {*} title 標題* @param {*} style 樣式*/ function Btn(title,style){this.title = title;this.style = style; }; Btn.prototype.toHtml = function(){if (typeof this.style === 'string') {return '<button class="btn '+this.style+'">'+this.title+'</button>'}else{// ["xxx",'yyyy']return '<button class="btn '+this.style.join(" ")+'">'+this.title+'</button>'} };

改進一截圖：


改進二截圖：

閉包

//閉包 可以很簡單，很復雜 //知道對象實例化？//閉包： 一個函數引用函數外部局部變量//閉包一 function f1(){var a = 10; //相對于f2外部局部變量function f2() { //f2可以訪問aconsole.log(a)}f2(); } f1();//閉包二 function a(){var n = 0; //外部局部變量this.add = function(){//函數引用外部局部變量n++;console.log(n)} } var c = new a(); console.log(c.n) //因為n是局部 c.add(); c.add();//閉包三 function a(){var n = 0; //外部局部變量function add(){//函數引用外部局部變量n++;console.log(n)}return add; } a()() //柯里化格式 a()()()()() //1. a()-->add 2. add() 繼續加()讓返回的函數執行 // var aa = a(); // aa() // aa()// function a(){ // return function(){ // return function(){ // return function(){ // // // } // } // } // } // a()()()()//閉包四 可以多次執行 var a = function(){var n = 0;return function(){ //閉包 匿名函數賦給an++;console.log(n);} }; var b = a(); //b---閉包 var c = a(); //c---閉包 b(); //1 c(); //1//閉包有什么用 //對象封裝 能夠將name緩存起來，避免污染 var Person = function(){var name = "張三"; //get set 相當于對這個屬性的操作return {getName: function(){//匿名函數 閉包return name;},setName: function(newName) {//匿名函數 閉包name = newName;}} }(); //加上這個括號表示立即執行 Person == {.....} console.log(Person.getName()) Person.setName("xxxxx"); console.log(Person.getName())//繼承 人-----白人 黑人 var Person = function(){var name = "張三"; //get set 相當于對這個屬性的操作return {getName: function(){//匿名函數 閉包return name;},setName: function(newName) {//匿名函數 閉包name = newName;}} }; var BlackPerson = function (){} BlackPerson.prototype = Person(); //為什么不需要new() 因為已經是一個實例對象(字面量對象) var p = new BlackPerson(); //p是一個對象，對象中有getName函數，函數引用name形成閉包 p.setName("yyyy"); console.log(p.getName())//閉包 難----變化太多 有很多種用法 不難----一個函數引用函數外部局部變量 //原型 在你身上找不到---去原型上找----繼續去原型的原型上找//什么場景 需要維護一個函數的一些信息不變， 可以一直存在 被緩存 //可以多層嵌套 看你怎么使用//缺點： 忽略 //不易理解， 占用內存//優點： //可以緩存數據， 封裝， 柯里化， 很靈活//dom在閉包中又引用自己 ie678 // var obj = document.querySelectorAll("button"); // for(var i=0; i<obj.length; i++) { // obj[i].onclick = function(){ // alert(obj.getName) // } // }

總結

以上是生活随笔為你收集整理的JavaScript进阶3-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。