定時器this指向window javascript 的執行過程 預解析(變量) 數據集和功能集---- 對象 對象----屬性和方法 -------------------面向對象------------------------ 面向對象是一種編程思想,把我們要做的復雜事物中的 所有內容都抽象成一些對象,通過處理這些對象的關系 完成我們要做的事情面向對象好處:1.方便多人協同開發 2.便于后期代碼維護 注意:面向對象只是對面向過程代碼的封裝, 并不能替代面向過程的開發方式面向對象三要素: 封裝 繼承 多態(抽象)-------將現實中的事物 抽象為代碼中的屬性 和 方法 的無序集合----------------對象: 就是將現實事物抽象為功能代碼. 將現實世界的東西,用對象的語法格式來表示....---------------------------對象三種寫法---------------------- 對象字面量 方式創建（重點 較為常用）- 對象字面量：是封閉在花括號對 {} 中的一個對象的0個或多個 鍵:值 無序列表 - 鍵：相當于屬性名 - 值：相當于屬性值，可以是任意類型的值（數值類型、字符串類型、布爾類型，甚至 函數類型）1.對象字面量 var star = {name : '劉德華',age : 18,sex : '男',sayHi : function(){alert('大家好啊~');} };- Object() 是構造函數 第一個字母大寫 - new Object() 是調用構造函數 因為構造函數需要new 來調用 同時再內存中創建一個對象 - 注意里面使用的時候用點 不是 冒號 2.new Object 創建對象var stuObj = new Obect(); stuObj.name = 'james'; stuObj.age = 11; stuObj.sex = true; stuObj.sayHi = function(){alert('大家好啊~'); } 自定義構造函數1. 構造函數用于創建某一大類對象，首字母要大寫。2. 構造函數要和new一起使用才有意義。function Person(name, age, sex) {this.name = name;this.age = age;this.sex = sex;this.sayHi = function() {alert('我的名字叫：' + this.name + '，年齡：' + this.age + '，性別：' + this.sex);} } var bigbai = new Person('大白', 100, '男'); var smallbai = new Person('小白', 21, '男'); console.log(bigbai.name); console.log(smallbai.name);-----------什么是對象?------------ 代碼中的對象是一些屬性和方法的無序集合 抽述現實世界中的一些事物，用來描述一個特定的具體的事物，是某一個具體事物的抽象-----創建對象------- new Object () {} 創建的對象 類型都是 object 無法用于具體對象類型的判斷 如何判斷對象的類型? X instanceof Y 判斷X對象是否是 被Y構造創建出來-----構造函數------ 構造函數的作用:創建對象(被new構造函數創建出來的對象 又被叫做 實例) 1.創建一個空對象 2.讓this 指向剛剛創建好的空對象 3.執行構造函數內的代碼 (為相關的屬性和方法賦值) 4.返回創建好的對象 new 一個對象的過程 就是實例化一個對象 new出來的對象就是一個實例(對象)構造函數中的this指行當前 new出來的對象(實例) constructor屬性 用來獲取創建當前對象的構造函數名 可以用來判斷對象的類型-----靜態成員和實例成員------實例成員:使用實例對象(實例)來調用的屬性和方法(只能使用new創建出來的對象) 靜態成員:只能使用構造函數名進行 調用和 創建的 屬性或者方法-----構造函數的原型prototype屬性---------構造函數的原型屬性 構造函數名prototype prototype主要用來訪問 創建對象的構造函數的原型對象的中成員 通過構造函數創建的對象 可以訪問 構造函數的prototype中的成員 利用構造函數的prototype屬性可以給構造函數 增加 屬性或者方法-------對象的原型----------------__proto__是對象的原型屬性等同于 這個對象的構造函數的prototype原型屬性 對象可以訪問 原型屬性(指的是構造的原型)中的任何成員對象的成員查找規則: 當我們使用對象調用 方法或者 屬性的時候, 對象會先到 創建它的構造函數中去查找屬性或者方法 如果構造函數 中不存在 則去 構造函數的prototype中去查找 如果還沒有找到 則報錯 __proto__屬性具有兼容問題 屬于非標準屬性--------注意點-----------當我們設置 構造函數原型對象時候 可以 直接賦值一個對象給 構造函數的prototype屬性 注意: 1.如果我們是直接給prototype屬性賦值對象 則需要 沖新設置constructor屬性 2.如果在實例中需要使用修改以后的prototype屬性中的成員則 需要先修改 當前構造函數的prototype屬性 再 去創建對象 先修改后創建-----------正確的寫法---------------- function Person (name, age) {this.name = namethis.age = age }Person.prototype = {constructor: Person, // => 手動將 constructor 指向正確的構造函數type: 'human',sayHello: function () {console.log('我叫' + this.name + '，我今年' + this.age + '歲了')} }----------自調用函數------------------- 自調用函數（function（） ｛｝）（） Window.方法名 = 要被外界訪問的方法名-----------bind---------- bind可以改變函數中this指向函數其實也是一種對象 函數的bind()方法 主要用于修改 函數中this的指向,并且返回一個新的函數 不會調用函數函數.bind(要指向的對象)方法中第一個參數用于設置 調用bind的函數中this的指向對象當函數調用bind方法以后---------函數的call---------- call 可以用改變this指向,,指向call 可以用來調用函數 function fn(x, y) {console.log(this);console.log(x + y);}var o = {name: 'zs'};fn.call(o, 2, 3);----------自調用函數問題---------- 自調用函數 前面或者后面必須加分號 函數表達式聲明的時候也必須加分號自調用函數參數的作用(window,undefineg)自調用函數中使用 參數 window去代替window對象 在代碼 壓縮時候可以進行壓縮 為我們壓縮 為我們節約代碼空間在自調用函數中使用undefined 主要是為了兼容 舊版本瀏覽器--------if中的函數不會提升---------//命名函數和函數表達式 聲明區別://1,命名函數,(函數聲明)在執行時候由于 預解析的原因 所以 書寫順序沒有要求 函數調用任何位置//2函數表達式 在調用的時候 必須遵循先聲明后使用//3.命名函數 在新版本瀏覽器 的if語句中 不會被預解析 命名函數 在舊版本的IE 的if語句 存在被預解析的問題 函數表達式 聲明 在新版本瀏覽器中都不會被預解析------------------this的指向-------------------------------------------1.在普通函數中this指向 window2.在對象的方法中this指向當前方法所屬的對象3.在構造函數中的this指向 當前構造函數創建對象4.在定時器 函數中this指向window5.在事件處理函數中this 指向 當前事件處理函數所屬對象 總結:誰調用 this就指向誰-------------函數的調用形式:------------------------------------------普通函數調用 window.函數名()對象的方法調用 對象.方法名()構造函數 調用 new 構造函數名()事件處理函數 DOM對象.事件名=function(){}定時器的函數 setInterval (function(){},3000);----------------apply----------------------------------var arr = [1,2,3,4,5,6]; console.log(Math.max.apply(null.arr));//6var arr=[1,3,4,67,5];console.log.apply(console,arr);//1 3 4 67 5 apply方法 用于函數調用 并且 改變 函數中this的指向 不會調用函數第一個參數:用于設置 函數中 this 要指向的對象 第二個參數:要調用函數的參數組成的數組 列如:Math.max.apply(Math,[1,2,3])-----------------bind---------------------bind 方法 返回一個新的函數 并且改變this的指向,不會調用函數 1.bind方法 第一個參數 用來設置this要指向的對象 2.如果需要返回的函數 具有參數 則可以通過bind方法 第二個參數以后 進行傳遞實參-----------------call-----------------------1.call方法的第一個參數 用來設置this 要指向的對象 2.如果需要調用的函數 具有參數 則可以通過call方法 第二個參數以后 進行傳遞參數 第二個參數開始 都是函數需要的實參 可以多個參數call方法用途: 可以用來實現 借用構造函數繼承屬性 call方法還可以用于 借用內置對象的方法 列如:Array.prototype.push.call(要借用內置對象方法的偽數組,push方法的參數)------------------高階函數--------------- 1.作用參數傳遞的函數 2.作為返回值返回的函數--------函數其他成員-------------- arguments- 實參集合 - caller- 函數的調用者 - length- 形參的個數 -name- 函數的名稱---------sort升序降序--------------var arr=[12,44,566,131,1327,2,133]arr.sort(function(a,b){return a-b});console.log(arr);---------閉包------------ 在兩個嵌套作用域中 <子作用域訪問父作用域中的變量> 內層作用域訪問外層作用域的的變量 或 函數閉包的作用:可以讓我們利用函數的作用域保存一些我們需要的變量 1.可以解決定時器中無法保存變量問題 2.節約代碼量Closure 閉包閉包特點:延展函數的作用域 閉包缺點:占用內存----------定時器--------- script標簽中的代碼被放到 執行棧中 執行 定時器的函數以及 事件處理函數 的代碼 會被放到 任務隊列中執行------------函數的創建方式-------------------- 1.命名函數 function 函數名(){} 2.函數表達式 3.自調用函數 4.以對象 new Function()命名函數和 函數表達式區別:-------if中的函數不會提升---------//命名函數和函數表達式 聲明區別://1,命名函數,(函數聲明)在執行時候由于 預解析的原因 所以 書寫順序沒有要求 函數調用任何位置//2函數表達式 在調用的時候 必須遵循先聲明后使用//3.命名函數 在新版本瀏覽器 的if語句中 不會被預解析 命名函數 在舊版本的IE 的if語句 存在被預解析的問題 函數表達式 聲明 在新版本瀏覽器中都不會被預解析 自調用函數的參數的作用（window、undefined） （function（w, undefined））(window ,undefined)自調用函數中使用 參數 window 去替代 window 對象 在代碼 壓縮的時候可以進行壓縮 為我們節約 代碼空間在自調用函數中使用參數 undefined 主要是為了兼容 舊版本的瀏覽器繼承：通俗含義：子承父業 通過 對父類型 抽象出一些子類型共有的 屬性 讓子類型進行繼承，提升代碼的復用javascript中實現繼承的方式：1. 對象與對象之間的繼承-》 對象的拷貝 存在的問題： 對象與對象之間無法實現 類型的繼承 2. 原型繼承 -- 通過對 構造函數的 prototype進行 重新賦值，賦值為父類型 實現對父類型的繼承 存在的問題： 無法對父類型中的屬性進行重新賦值 ，一般情況使用比較少，主要用于對 對象方法的 繼承3. 借用構造函數 通過 在子類型的構造函數中 使用 call方法 對父類型構造函數進行 調用 完美實現 子類型對 父類型所有 屬性的繼承 存在的問題： 使用借用構造函數 無法 繼承 父類型 構造函數原型中的 方法4.組合繼承 = 原型繼承（繼承父類型的方法） + 借用構造函數繼承（繼承父類型的屬性）存在的問題： 通過原型繼承過來的父類型的方法 是所有 子類型都可以 進行調用的 并且 如果子類型重新對自身的 原型對象進行了修改 會影響 父類型的原型 ---------------遞歸----------------- 遞歸:函數自己調用自己的過程 缺點:不好閱讀,消耗內存---------------------淺拷貝----------------淺拷貝:當我們對 對象進行屬性和方法拷貝的時候,淺拷貝只能復制 對象中簡單數據類型 而<復雜數據類型 的屬性 則只拷貝引用>淺拷貝不會拷貝對象屬性中的對象 而只拷貝 地址(引用)只會拷貝對象地址(不會復制新的對象) 淺拷貝-只拷貝對象的第一層屬性--------------------深拷貝-----------------------深拷貝-拷貝的是 屬性中真實的對象 而不是引用拷貝對象的時候 還要將對象中的 復雜數據類型實現完全拷貝------------------回調函數---------------指的是 當a函數作為b函數d參數傳遞的時候 只有當b函數執行完成以后 才執行a函數 此時a函數就是b函數的回調函數-------------------正則表達式--------- 什么是正則表達式? 一組用于查找 特定字符串 的規則/模式 正則表達式的作用:1.匹配 給定的字符串是否符合正則表達式的過濾邏輯2.提取 可以通過正則表達式，從字符串中獲取我們想要的特定部分3.替換 強大的字符串替換能力正則表達式特點:----------常用元字符-----------ctrl+f 查找 ctrl+r 開啟正則表達式 <.+?> 找到所有標簽\d 匹配數字\D匹配任意非數字的字符\w匹配字母或數字或下劃線\W匹配任意不是字母，數字，下劃線\s匹配任意的空白符\S 匹配任意不是空白符的字符.匹配除換行符以外的任意單個字符^表示匹配行首的文本(以誰開始)$表示匹配行尾的文本(以誰結束)限定符說明*重復零次或更多次+重復一次或更多次?重復零次或一次{n} 重復n次{n,} 重復n次或更多次{n,m} 重復n到m次驗證手機號： ^\d{11}$ 驗證郵編： ^\d{6}$驗證日期 2012-5-01 ^\d{4}-\d{1,2}-\d{1,2}$ 驗證郵箱 xxx@itcast.cn： ^\w+@\w+\.\w+$ 驗證IP地址 192.168.1.10 ^\d{1,3}\(.\d{1,3}){3}$[] 字符串用中括號括起來，表示匹配其中的任一字符，相當于或的意思[^] 匹配除中括號以內的內容 \ 轉義符 用來取消 特定功能符號的 正則表達式含義 | 或者，選擇兩者中的一個。注意|將左右兩邊分為兩部分，而不管左右兩邊有多長多亂 () 從兩個直接量中選擇一個，分組eg：gr(a|e)y匹配gray和grey [\u4e00-\u9fa5] 匹配漢字深度拷貝:function deepCopy(o1,o2){for(var key in o1){if(o1[key] instanceof Array){o2[key]=[];deepCopy(o1[key],o2[key]);}else if(o1[key] instanceof Object){o2[key]={};deepCopy(o1[key],o2[key]);}else{o2[key]=o1[key];}}}淺拷貝:function copy(o1,o2){for(var k in o1){o2[k]=o1[k];}}遍歷dom樹:function loadTree(parent,callback){for(var i = 0; i<parent.children.length;i++){var child=parent.children[i];if(callback){callback(child);}loadTree(child);}}var ul=document.getElementById('list');loadTree(ul,function(element){element.onclick=function(){console.log(this.innerText);}})如何使用 正則表達式對象？1. new RegExp( ‘模式（正則表達式）’, ‘i’ ) 第一個參數用于設置 模式：要匹配的規則 第二個參數 用于設置 是否 ‘i’ 忽略大小寫 ‘g’ 全局匹配2. var reg = /模式/i是否忽略大小寫正則表達式對象.test（’要匹配的字符串’） -> 匹配方法 如果 要匹配的字符串符合 正則表達式條件 則返回 true 否則 返回 falseonchange事件觸發條件： 1.文本框中的 文本內容發生變化 2.失去焦點------------------exec提取---------------exec只返回一個匹配的結果 如果沒有匹配的結果返回null---------------match提取------------- match 也可以用于 根據正則表達式提取內容 可以同時提取多項內容test ----------------RegExp.$1....$9 使用RegExp.$1 …… $9 屬性 訪問 分組后的字符串不同部分的內容--------------split--------------- trim() 方法會從一個字符串的兩端刪除空白字符。在這個上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行終止符字符（如 LF，CR）。 str.trim()貪婪模式 <.+> 非貪婪模式 <.+?>

?

轉載于:https://www.cnblogs.com/tuziling/p/10074312.html

總結

以上是生活随笔為你收集整理的js高级笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

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