摘要:面向對象編程對象的原生方法分成兩類自身的方法靜態方法和的實例方法。的靜態方法方法與,參數是對象,返回一個數組,數組的值是改對象自身的所有屬性名區別在于返回可枚舉的屬性,返回不可枚舉的屬性值。
面向對象編程
Objects對象的原生方法分成兩類:Object自身的方法(靜態方法)和Object的實例方法。注意Object是JavaScript的原生對象,所有的其他對象都是繼承自Object對象,故其它對象都是Object的實例。
Object的靜態方法Object.keys()方法與Object.getOwnPropertyNames(),參數是對象,返回一個數組,數組的值是改對象自身的所有屬性名,——區別在于keys返回可枚舉的屬性,getOwnPropertyNames返回不可枚舉的屬性值。
Object的實例方法Object.prototype.valueOf():返回當前對象的對應值.
Object.prototype.toString():返回當前對象對應的的字符串形式.
Object.prototype.toLocaleString(): 返回當前對象對應的的本地字符串形式.
Object.prototype.hasOwnProperety(): 判斷某個屬性是否為當前對象的自身屬性,還是繼承自原型對象
Object.prototype.isPrototypeOf(): 判斷當對象是否為另一個對象的原型.
Object.prototype.propertyIsEnumerable(): 判斷某個屬性是否為枚舉.
對象是一個容器,封裝一些屬性(property)和方法的集合,屬性是對象的狀態,方法是對象的行為.JavaScript語言的對象體系,不是基于"類"的,
而是基于構造函數(constructor)和原型(prototype).
構造函數是對象的模板,專門用來生成實例對象的函數.構造函數的首字母大寫,內部使用this關鍵字,生成對象的時候
,必須使用new命令.
new命令: 執行構造函數,返回一個實例對象.
Object.create()創建實例對象.
this關鍵字: 屬性和方法"當前"所在的對象,總返回一個對象.
綁定this的三種方法:
Function.prototype.call()
Function.prototype.apply()
Function.prototype.bind()
使用場合: 全局環境是使用this,指的是頂層對象window.在構造函數中的this,指的是實例對象
嚴格模式: "use strict"; 嚴格模式必須從代碼的一開始就生效,即寫在第一行.
異步操作:
瀏覽器的JS引擎有多個線程,每個腳本只能在一個線程上運行.采用"事件循環"機制.
垃圾回收機制:利用垃圾收集器.周期性回收那些程序中,不被其他引用所執行的變量的內存資源,多是局部變量,用完就廢.
常見的二種方式: 標記清除與引用計數,標記清除,當變量進入執行環境,如聲明一個變量,垃圾回收機制將其標記進入"進入環境",當這個變量離開這個環境時,函數執行結束將其標記為"離開環境",清除.引用計數跟蹤每個值被使用的次數,該值得到賦值+1,該變量的值變為另外一個-1.
OOP:面向對象編程,對象是一個容器,封裝了屬性(Property)和方法(method).
JAVA和C++都有類的概念,而類是對象的模板,對象是類的實例,但JS不是基于"類",基于"構造函數(constructor)"和"原型鏈(prototype).
構造函數:
普通的函數,函數名首字母大寫.生成對象就要使用new.new的作用就是執行構造函數,返回一個實例對象.
對象繼承:
A對象繼承B對象,擁有B對象所有的屬性和方法.繼承通過"原型對象prototype".
編程規范:
行為與樣式分離.命名法: 大駱駝式命名法:首字母大寫.小駱駝命名法:首字母小寫. 文件資源命名: 文件名不得含有空格,全部小寫,多個單單詞用- 使用相對路徑.如src=”//img/s.jpg” 變量,函數使用小駱駝,構造函數使用大駱駝.常量全部大寫加下劃線_.盡量不使用eval()函數. 盡量不使用var,使用const.優先使用箭頭函數,只使用單引號包裹字符串,禁止使用雙引號,如果字符串中包含單引號字 符,應使用模板字符串.
模塊加載:
AMD提前加載模塊,不管是否調用,先解析所有模塊.CMD提前加載,在真正需要時,才解析該模塊 AMD(Require.js) CMD(Sea.js) UMD(Commonjs+AMD) Common.js(Node.js)
設計模式:
設計模式有20多種,掌握常用四種: 單例模式,工廠模式,裝飾器模式,觀察者模式.
this指向:
this是一個關鍵字,它用在不同的場合,但它總是返回一個對象.屬性所在的當前對象是可變的,this的指向是可變的.
JavaScript的一切都是對象,運行環境也是對象,函數在某一個對象中運行時,this就是函數運行時所在的對象.但函數可以在不同執行環境運行,所以需要this執代當前的運行環境.
三使用: (1)全局環境: this執向頂層對象window. (2)構造函數: this執向實例對象. (3)對象的方法: 當對象的方法里面包含this,this的指向就是方法運行時所在的對象.該方法賦值給另一個對象時,就會改變this的指向. 三避免: (1)避免多層this. (2)避免數組處理方法中的this. (3)避免回調函數中的this. 三綁定: (1)call();綁定this到某對象. (2)apply();接受一個數組,改變this指向. (3)bind();綁定個某對象,返回一個新函數,
關鍵字: call,apply,bind this.
三個方法call,bind,apply用于將this綁定到函數,即改變this指向.區別在于調用的方式.call()立即執行函數,但需要把參數按順序傳入 .apply()會立即執行函數,但需要把所有參數組合為一個數組傳入.這兩個差不多,但call函數會把數字作為一個參數. .bind()傳入參數的方式與.call()相同,但是返回一個新的函數,以及對應的環境與和參數. .toString :返回函數的字符串表示
執行上下文:
當前代碼的執行環境.注意當代碼開始執行時,形成執行上下文棧,全局執行上下文永遠在棧底,當前執行執行的函數在棧定.每個執行上下文都有三個重要屬性:變量對象,作用域鏈,this注意js引擎開始執行js代碼時,最先進入的是一個全局的執行上下文,在全局的執行上下文中每調用一個函數,就會創建一個執行上下文的內部對象(作用域),一個執行上下文定義一個函數執行環境,每次執行每次的執行上下文獨一無二,多次調用創建多個.執行上下文逐次執行,直到回到全局上下文.每個函數都有不同的上下文和作用域,作用域基于函數,上下文基于對象.
作用域鏈:
一個函數,我們在里面再創建一段函數,父函數調用子函數的變量叫做閉包,但形成了單個作用域鏈,從子函數開始不斷往上查找,就是作用域鏈.在js中,函數也是對象,對象中有些屬性我們可以訪問,有些不可以.不可以訪問的屬性進攻js引擎存取,如scope(作用域),存儲了執行上下文的集合.其中執行上下文的對象集合,呈鏈式鏈接,叫做作用域鏈.
嚴格模式:
頁面第一行聲明 "use strict"; 作用:禁止一些不合理與不嚴禁的語法,增加報錯的場合, 提高編譯器的效率. 不可對只讀屬性賦值(字符串長度等),函數不能有重名的參數.禁止隱式全局變量聲明,禁止this執行全局,禁止刪除變量.禁止使用with語句,創設eval作用域,非函數代碼塊不可聲明函數.
AJAX 跨域.內置對象: Object對象(首字母大寫),Array,Boolean,Number,String,Math,Date,RegExp,JSON.
異步操作: 定時器和Promise對象.
異步操作:
JavaScript只在一個線程上運行,但js引擎是多個線程.內部使用"事件循環(Event Loop)"機制.所有的任務分為同步任務和異步任務.同步任務在主線程排隊,一個接著一個.異步任務:被引擎放在一邊,進入任務隊列的任務,不用執行完就可以執行下一步. 任務隊列: 主線程之外,用來處理當前程序處理的異步任務.異步任務可變同步,且有回調函數. 定時器:定時執行代碼.主要有兩個函數setTimeout()和setInterval().向任務隊列添加定時任務.
Object:頂層對象是Window對象,但所有的對象都繼承Object對象,即所有的對象都是Object的實例.Object的原生方法,分Object本身方法(靜態方法)和實例方法.
Array:
原生對象(內置對象之一),也是一個構造函數,也可用他它生成新的數組.一個靜態方法和二十個實例方法.
JSON: 一種數據交換文本格式,每個JSON對象是一個值.JSON的對值的類型和格式有嚴格的規定.null,空對象,空數值都是合法的JSON值
javascript內置對象JSON對象,用來處理JSON格式數據,有兩個靜態方法.JSON.stringify()和JSON.parse()
RegExp對象:
一種表達文本模式的方法.新建有二種.使用字面量用/包括.使用RegExp構造函數.
Date對象:
javascript原生的時間庫,它以1970.1.1.00:00:00作為零點,上下可表示一億天.
用法: 作為普通函數和構造函數 三種靜態方法: Date.now() Date.parse() Date.UTC()
實例方法: ValueOf和toString,之外還有三類: to類,get類,set類.
Math對象:
內置對象,該對象不是構造函數,不能生成實例,提供各種數學功能.內置一些靜態數學和方法.
包裝對象:三種原始類型的值(數值,字符串,布爾值)封裝的對象.內置了一些屬性和方法.包裝對象都從Object對象繼承兩個方法valueOf和toString.valueOf()方法返回包裝對象實例對應的原始類型的值.toString()方法返回對應的字符串形式.
Bollean對象:
JavaScript對象作為JavaScript的三個包裝對象(Number,String)之一. 用法: 作為構造函數和日常使用.
Number對象:
包裝對象之一,用法二種:構造函數和工具函數.封裝了一些靜態屬性和方法.也可自定義方法.
String對象
包裝對象之一,用來生成字符串對象(很像數組的對象,但不是數組).一個靜態方法,一個實例屬性,十六個實例方法.方法:
parseInt()將字符串轉為整數 parseFloat()將字符串轉為浮點數 isNaN()判斷一個值是否為NaN.
isFinite()返回布爾值,表示某個值是否為正常的數值.false有+/-Infinity NaN undefined
split() 把字符串分割為字符串數組.
Math.ceil();向上取整. Math.round();四舍五入.Math.floor();向下取整.
valueOf() 返回某個字符串對象的原始值。
concat() 連接兩個或更多的數組,并返回結果。
pop() 刪除并返回數組的最后一個元素
push() 向數組的末尾添加一個或更多元素,并返回新的長度。
reverse() 顛倒數組中元素的順序。
shift() 刪除并返回數組的第一個元素
sort() 對數組的元素進行排序
//正則表達式 //檢驗基本日期格式 var reg1 = /^d{4}(-|/|.)d{1,2}1d{1,2}$/; var reg2 = /^(^(d{4}|d{2})(-|/|.)d{1,2}3d{1,2}$)|(^d{4}年d{1,2}月d{1,2}日$)$/; //效驗密碼強度,必須是包含大小寫字母和數字的組合,不能使用特殊字符,長度在8-10之間。 var reg = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/; //校驗中文,字符串僅能是中文 var reg = /^[u4e00-u9fa5]{0,}$/; //由數字、26個英文字母或下劃線組成的字符串 var reg = /^w+$/; //校驗E-Mail 地址 var reg = /[w!#$%&"*+/=?^_`{|}~-]+(?:.[w!#$%&"*+/=?^_`{|}~-]+)*@(?:[w](?:[w-]*[w])?.)+[w](?:[w-]*[w])?/; //. 校驗身份證號碼 15或18 var reg = /^[1-9]d{7}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}$/; var reg = /^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}([0-9]|X)$/; //效驗日期 var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/; //. 校驗金額,精確到2位小數 var reg = /^[0-9]+(.[0-9]{2})?$/; //判斷IE的版本 var reg = /^.*MSIE [5-8](?:.[0-9]+)?(?!.*Trident/[5-9].0).*$/; //校驗ipv6地址 var reg = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/; //校驗IP-v4地址 var reg = /(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/; //檢查URL的前綴,應用開發中很多時候需要區分請求是HTTPS還是HTTP,通過下面的表達式可以取出一個url的前綴然后再邏輯判斷。 if (!s.match(/^[a-zA-Z]+:///)) { s = "http://" + s; } //提取url鏈接 var reg = /^(f|ht){1}(tp|tps)://([w-]+.)+[w-]+(/[w- ./?%&=]*)?/; //文件路徑與擴展名效驗,驗證windows下文件路徑和擴展名(下面的例子中為.txt文件) var reg = /^([a-zA-Z]:|)([^]+)*[^/:*?"<>|]+.txt(l)?$/; //提取Color Hex Codes,有時需要抽取網頁中的顏色代碼,可以使用下面的表達式。 var reg = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/; //提取網頁圖片,假若你想提取網頁中所有圖片信息,可以利用下面的表達式。 var reg = /< *[img][^>]*[src] *= *[""]{0,1}([^"" >]*)/; //提取頁面超鏈接,提取html中的超鏈接 var reg = /(]*)(href="https?://)((?!(?:(?:www.)?".implode("|(?:www.)?", $follow_list)."))[^"]+)"((?!.*rel=)[^>]*)(?:[^>]*)>/; //查找CSS屬性 var reg = /^s*[a-zA-Z-]+s*[:]{1}s[a-zA-Z0-9s.#]+[;]{1}/; //抽取注釋,如果你需要移除HMTL中的注釋,可以使用如下的表達式。 var reg = //; //轉換千分位分隔符 return total.toString().replace(/B(?=(d{3})+$)/g, ",");
跨域 :一個域下的文檔或腳本試圖去請求另一個域下的資源.(廣義).瀏覽器同源策略限制的一類請求場景(狹義).
如: 資源跳轉: A鏈接,重定向,表單提交.資源嵌入:等dom標簽 樣式中:background:url().@font-face()等文件外鏈.腳本請求:js發起的ajax請求,dom和js對象的跨域操作等.
跨域限制:
服務器的一個行為,當開啟對某些域名的訪問限制后,只有同域或指定域名下的頁面可以調用.一般情況下只在用瀏覽器端存在,對于服務器/ios/andriod等客戶端是不存在的.
同源策略(SOP)
它是一種約定,即"協議/域名/端口"必須相同.防止XXS,CSRF等攻擊.限制了Cookie,LocalStorage和IndexDB無法讀取.DOM和JS對象無法獲得.AJax請求不能發送.
get請求與post請求:
本質都是tcp協議,http的規定和瀏覽器與服務器的限制,在應用的過程有所不同,get產生一個tcp數據包,post產生兩個數據包,GET求,瀏覽器會把http的header和data一并發送出去.服務器響應200(返回數據),對于post,瀏覽器先發header,服務器響應100 瀏覽器再送data,服務器響應200(返回數據).
前后端通信中ajax只支持同源策略,websocket不受同源策略影響,CRO新標準,都支持.
9種跨域解決方案
(1)jsonp跨域(2)document.domain + iframe跨域 (3)location.hash + iframe (4)window.name + iframe跨域
(5)postMessage跨域(6)跨域資源分享(CROS)(7)nginx代理跨域 (8)node中間件代理跨域(9)WebSocket協議跨域
json: javascript對象表示法,輕量級的文本數據交換格式.具有層級結構,可使用AJAX進行傳輸.json語法是js語法的子集,
JSONP:是json的一種"使用模式",可以讓網頁從別的域名獲取資料.只支持GET請求,CORS支持所有類型的HTTP請求.JSONP優勢在于支持老師瀏覽器,以及可以向不支持CORS的網站請求數據.原理是script src 本質就是一個回調函數,然后在遠程服務器上調用這個函數并且將json數據形式作為參數傳遞,完成回調.對象格式的字符串,輕量的數據傳輸格式. 注意:鍵值需要""包起來.
兩個方法:JSON.parse 和 JSON.stringify JSON.parse,將后臺傳來的字符串轉化為對象。其字符串的內容就是對象才需要這個轉化. JSON.stringify,將后臺傳來的對象轉化為字符串。
//原生實現 var script = document.createElement("script"); script.type = "text/javascript"; //傳參并指定回調執行函數為onBack script.src = "http://www.domain2.com:8080/login?user=admin&callback=onBack" document.head.appendChild(script); //回調函數 function onBack(res) { alert({JSON.stringify(res)}); } //服務器返回如下(返回時即執行全局函數) onBack({"status":true,"user":"admin"}) //jqery ajax $.ajax({ url: "http://www.domain2.com:8080/login", type: "get", dataType: "jsonp", //請求方式為jsonp jsonpCallback: "onBack" //自定義回調函數 data: {} });
//方法document.domain +iframe 僅限于主域相同,子域不同的跨域應用場景
//兩個頁面都通過js強制設置document.domain為基礎主域,實現同域.
//父
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101757.html
摘要:基于原型的面向對象在基于原型的語言中如并不存在這種區別它只有對象不論是構造函數,實例,原型本身都是對象。允許動態地向單個的對象或者整個對象集中添加或移除屬性。為了解決以上兩個問題,提供了構造函數創建對象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新認識面向對象 1. JavaScript...
摘要:基于原型的面向對象在基于原型的語言中如并不存在這種區別它只有對象不論是構造函數,實例,原型本身都是對象。允許動態地向單個的對象或者整個對象集中添加或移除屬性。為了解決以上兩個問題,提供了構造函數創建對象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新認識面向對象 1. JavaScript...
摘要:很多情況下,通常一個人類,即創建了一個具體的對象。對象就是數據,對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍圖或原型。在中,對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:很多情況下,通常一個人類,即創建了一個具體的對象。對象就是數據,對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍圖或原型。在中,對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:很多情況下,通常一個人類,即創建了一個具體的對象。對象就是數據,對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍圖或原型。在中,對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
閱讀 2082·2021-11-24 09:39
閱讀 1536·2021-10-11 10:59
閱讀 2489·2021-09-24 10:28
閱讀 3367·2021-09-08 09:45
閱讀 1263·2021-09-07 10:06
閱讀 1657·2019-08-30 15:53
閱讀 2056·2019-08-30 15:53
閱讀 1411·2019-08-30 15:53