https://segmentfault.com/a/11...
原型 / 構造函數 / 實例對原型的理解
我們知道在es6之前,js沒有類和繼承的概念,js是通過原型來實現繼承的。在js中一個構造函數默認自帶有一個prototype屬性, 這個的屬性值是一個對象,同時這個prototype對象自帶有一個constructor屬性,這個屬性指向這個構造函數,同時每一個實例 都有一個__proto__屬性指向這個prototype對象,我們可以將這個叫做隱式原型,我們在使用一個實例的方法的時候,會先檢查 這個實例中是否有這個方法,沒有則會繼續向上查找這個prototype對象是否有這個方法,剛剛我們說到prototype是一個對象, 那么也即是說這個是一個對象的實例,那么這個對象同樣也會有一個__proto__屬性指向對象的prototype對象。原型鏈
JS 原型與原型鏈
執行上下文(EC) 變量對象javascript有哪些方法定義對象
對象字面量: var obj = {};
構造函數: var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);
作用域鏈的原理和原型鏈很類似,如果這個變量在自己的作用域中沒有,那么它會尋找父級的,直到最頂層。
注意:JS沒有塊級作用域,若要形成塊級作用域,可通過(function(){})();立即執行的形式實現。
閉包指的是一個函數可以訪問另一個函數作用域中變量。常見的構造方法,是在一個函數內部定義另外一個函數。內部函數可以引用外層的變量;外層變量不會被垃圾回收機制回收。
注意,閉包的原理是作用域鏈,所以閉包訪問的上級作用域中的變量是個對象,其值為其運算結束后的最后一個值。
優點:避免全局變量污染。缺點:容易造成內存泄漏。
例子:
function makeFunc() { var name = "Mozilla"; function displayName() { console.log(name); } return displayName; } var myFunc = makeFunc(); myFunc(); //輸出Mozilla
myFunc 變成一個 閉包。閉包是一種特殊的對象。它由兩部分構成:函數,以及創建該函數的環境。環境由閉包創建時在作用域中的任何局部變量組成。在我們的例子中,myFunc 是一個閉包,由 displayName 函數和閉包創建時存在的 "Mozilla" 字符串形成。
script引入方式 對象的拷貝這道題考察了以下知識點:
使用 typeof 判斷值得類型;
使用 toString 區分數組和對象;
遞歸函數的使用;
實現一個函數 clone(),可以對 JavaScript 中的5種主要的數據類型(包括 Number、String、Object、Array、Boolean)進行值復制。
function clone(obj) { //判斷是對象,就進行循環復制 if (typeof obj === "object" && typeof obj !== "null") { // 區分是數組還是對象,創建空的數組或對象 var o = Object.prototype.toString.call(obj).slice(8, -1) === "Array" ? [] : {}; for (var k in obj) { // 如果屬性對應的值為對象,則遞歸復制 if(typeof obj[k] === "object" && typeof obj[k] !== "null"){ o[k] = clone(obj[k]) }else{ o[k] = obj[k]; } } }else{ //不為對象,直接把值返回 return obj; } return o; }new運算符的執行過程
1) 創建一個空對象,并且 this 變量引用該對象,同時還繼承了該函數的原型。
2) 屬性和方法被加入到 this 引用的對象中。
3) 新創建的對象由 this 所引用,并且最后隱式的返回 this 。
使用new操作符實例化一個對象的具體步驟
1.構造一個新的對象
2.將構造函數的作用域賦給新對象(也就是說this指向了新的對象)
3.執行構造函數中的代碼
4.返回新對象
Javascript實現繼承的幾種方式:JavaScript實現類與繼承的方法(全面整理)
js數據類型typeof 返回哪些數據類型
typeof 返回七種值:
“number”、“string”、“boolean”、“object”、"symbol"、“function”和“undefined”。
typeof undefined、null、NaN分別返回undefined,object,number
JavaScript有幾種類型的值?你能畫一下他們的內存圖嗎?
基本數據類型存儲在棧中,引用數據類型(對象)存儲在堆中,指針放在棧中。
兩種類型的區別是:存儲位置不同;原始數據類型直接存儲在棧中的簡單數據段,占據空間小、大小固定,屬于被頻繁使用數據,所以放入棧中存儲;引用數據類型存儲在堆中的對象,占據空間大、大小不固定,如果存儲在棧中,將會影響程序運行的性能
引用數據類型在棧中存儲了指針,該指針指向堆中該實體的起始地址。當解釋器尋找引用值時,會首先檢索其在棧中的地址,取得地址后從堆中獲得實體。
棧和堆的區別
棧(stack):由編譯器自動分配釋放,存放函數的參數值,局部變量等;類型轉換
堆(heap):一般由程序員分配釋放,若程序員不釋放,程序結束時可能由操作系統釋放。
對象到數字的轉換步驟
如果對象有valueOf()方法并且返回元素值,javascript將返回值轉換為數字作為結果
否則,如果對象有toString()并且返回原始值,javascript將返回結果轉換為數字作為結果
否則,throws a TypeError
對象到字符串的轉換步驟
1.如果對象有toString()方法,javascript調用它。如果返回一個原始值(primitive value如:string number boolean),將這個值轉換為字符串作為結果
2.如果對象沒有toString()方法或者返回值不是原始值,javascript尋找對象的valueOf()方法,如果存在就調用它,返回結果是原始值則轉為字符串作為結果
3.否則,javascript不能從toString()或者valueOf()獲得一個原始值,此時throws a TypeError
javascript做類型判斷的方法有哪些?
typeof、instanceof 、 Object.prototype.toString()(待續)
實現一個類型判斷函數,需要鑒別出基本類型、function、null、NaN、數組、對象?
只需要鑒別這些類型那么使用typeof即可,要鑒別null先判斷雙等判斷是否為null,之后使用typeof判斷,如果是obejct的話,再用Array.isArray判斷 是否為數組,如果是數字再使用isNaN判斷是否為NaN,(需要注意的是NaN并不是JavaScript數據類型,而是一種特殊值)如下:
function type(ele) { if(ele===null) { return null; } else if(typeof ele === "object") { if(Array.isArray(ele)) { return "array"; } else { return typeof ele; } } else if(typeof ele === "number") { if(isNaN(ele)) { return NaN; } else { return typeof ele; } } else{ return typeof ele; } }模塊化
對js模塊化的理解
在ES6出現之前,js沒有標準的模塊化概念,這也就造成了js多人寫作開發容易造成全局污染的情況,以前我們可能會采用立即執行 函數、對象等方式來盡量減少變量這種情況,后面社區為了解決這個問題陸續提出了AMD規范和CMD規范,這里不同于Node.js的 CommonJS的原因在于服務端所有的模塊都是存在于硬盤中的,加載和讀取幾乎是不需要時間的,而瀏覽器端因為加載速度取決于網速, 因此需要采用異步加載,AMD規范中使用define來定義一個模塊,使用require方法來加載一個模塊,現在ES6也推出了標準的模塊 加載方案,通過export和import來導出和導入模塊。
模塊化開發怎么做
模塊化開發指的是在解決某一個復雜問題或者一系列問題時,依照一種分類的思維把問題進行系統性的分解。模塊化是一種將復雜系統分解為代碼結構更合理,可維護性更高的可管理的模塊方式。對于軟件行業:系統被分解為一組高內聚,低耦合的模塊。
(1)定義封裝的模塊
(2)定義新模塊對其他模塊的依賴
(3)可對其他模塊的引入支持。在JavaScript中出現了一些非傳統模塊開發方式的規范。 CommonJS的模塊規范,AMD(Asynchronous Module Definition),CMD(Common Module Definition)等。AMD是異步模塊定義,所有的模塊將被異步加載,模塊加載不影響后邊語句運行。
如何實現一個JS的AMD模塊加載器
AMD是解決JS模塊化的規范,實現這樣的一個模塊加載器的關鍵在于解決每個模塊依賴的解析。首先我們需要有一個模塊的入口,也就是主模塊,比如我們使用 一個use方法作為入口,之后以數組的形式列出了主模塊的依賴,這時候我們要想到的是如何解析這一個一個的依賴,也就是如何解析出一個個js文件的絕對地址, 我們可以制定一個規則,如默認為主模塊的路徑為基準,也可以像requirejs一樣使用一個config方法來指定一個baseurl和為每一個模塊指定一個path,最后就是 模塊的問題,我們需要暴露一個define方法來定義模塊,也就是模塊名,依賴以及每個模塊的各自代碼。其中每個模塊的代碼都應該在依賴加載完之后執行,這就是一個 回調函數,模塊的依賴、回調函數、狀態、名字、模塊導出等可以看做是一個模塊的屬性,因此我們可以使用一個對象來保存所有的模塊,然后每個模塊的各個屬性存放在一個對象中。 最后我們來考慮一下模塊加載的問題,上面我們說到use方法,use方法的邏輯就是遍歷依賴,然后對每個模塊進行加載,也就是解析地址然后使用插入script,我們假設 使用loadModule方法來加載依賴,那么這個函數的邏輯就應該是檢查我們的模塊是否已經加載過來判斷是否需要加載,如果這個模塊還有依賴則調用use方法繼續解析,模塊依賴中我們 還沒有提到的問題就是每個模塊的依賴是需要被傳進模塊里來使用的,解決方法就是每個模塊的callback方法執行后的返回的export記錄下來然后使用apply之類的方法將這些參數傳遞進去。 大致就是這樣子的。
參考:
動手實現一個AMD模塊加載器(一)
動手實現一個AMD模塊加載器(二)
動手實現一個AMD模塊加載器(三)
函數節流就是讓一個函數無法在很短的時間間隔內連續調用,而是間隔一段時間執行,這在我們為元素綁定一些事件的時候經常會用到,比如我們 為window綁定了一個resize事件,如果用戶一直改變窗口大小,就會一直觸發這個事件處理函數,這對性能有很大影響。
什么是函數節流?
前端面試查漏補缺--(一) 防抖和節流
談談對this對象的理解
1) this總是指向函數的直接調用者(而非間接調用者)
2) 如果有new關鍵字,this指向new出來的那個對象
3) 在事件中,this指向目標元素,特殊的是IE的attachEvent中的this總是指向全局對象window。
簡要介紹ES6
ES6在變量的聲明和定義方面增加了let、const聲明變量,有局部變量的概念,賦值中有比較吸引人的結構賦值,同時ES6對字符串、 數組、正則、對象、函數等拓展了一些方法,如字符串方面的模板字符串、函數方面的默認參數、對象方面屬性的簡潔表達方式,ES6也 引入了新的數據類型symbol,新的數據結構set和map,symbol可以通過typeof檢測出來,為解決異步回調問題,引入了promise和 generator,還有最為吸引人了實現Class和模塊,通過Class可以更好的面向對象編程,使用模塊加載方便模塊化編程,當然考慮到 瀏覽器兼容性,我們在實際開發中需要使用babel進行編譯。
let、const、var的使用區別
let: 相當于var,用于聲明一個變量,在塊級作用域有效(可解決for循環問題);不能重復聲明;不會變量提升;不會預處理
const: 用于定義一個常量,不能修改,其他特點等同于let,用于保存不用改變的數據
Map與普通對象的區別
JavaScript 的對象(Object),本質上是鍵值對的集合(Hash 結構),但是傳統上只能用字符串當作鍵。這給它的使用帶來了很大的限制。為了解決這個問題,ES6 提供了 Map 數據結構。它類似于對象,也是鍵值對的集合,但是“鍵”的范圍不限于字符串,各種類型的值(包括對象)都可以當作鍵。也就是說,Object 結構提供了“字符串—值”的對應,Map 結構提供了“值—值”的對應,是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的數據結構,Map 比 Object 更合適。
AST babel編譯原理 函數柯里化 數組判斷數組
Array.isArray([]); // true Array.isArray(undefined); // false; 或者 array instanceof Array; // true 檢測對象的原型鏈是否指向構造函數的prototype對象 或者 array.constructor === Array; // true 終極大招: if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === "[object Array]"; }; } 注意:typeof []; // "object" 不可以用此方法檢查!!!null,undefined的區別
null表示一個對象被定義了,但存放了空指針,轉換為數值時為0。
undefined表示聲明的變量未初始化,轉換為數值時為NAN。
typeof(null) -- object;
typeof(undefined) -- undefined
[1,NaN,NaN]
解析:
Array.prototype.map()
array.map(callback[, thisArg])
callback函數的執行規則
參數:自動傳入三個參數
currentValue(當前被傳遞的元素);
index(當前被傳遞的元素的索引);
array(調用map方法的數組)
parseInt方法接收兩個參數
第三個參數["1", "2", "3"]將被忽略。parseInt方法將會通過以下方式被調用
parseInt("1", 0)
parseInt("2", 1)
parseInt("3", 2)
parseInt的第二個參數radix為0時,ECMAScript5將string作為十進制數字的字符串解析;
parseInt的第二個參數radix為1時,解析結果為NaN;
parseInt的第二個參數radix在2—36之間時,如果string參數的第一個字符(除空白以外),不屬于radix指定進制下的字符,解析結果為NaN。
parseInt("3", 2)執行時,由于"3"不屬于二進制字符,解析結果為NaN。
IE為事件冒泡,Firefox同時支持事件捕獲和事件冒泡。但并非所有瀏覽器都支持事件捕獲。jQuery中使用event.stopPropagation()方法可阻止冒泡;(舊IE的方法 ev.cancelBubble = true;)
如何阻止事件冒泡和默認事件?
標準的DOM對象中可以使用事件對象的stopPropagation()方法來阻止事件冒泡,但在IE8以下中IE的事件對象通過設置事件對象的cancelBubble屬性為true來阻止冒泡; 默認事件的話通過事件對象的preventDefault()方法來阻止,而IE通過設置事件對象的returnValue屬性為false來阻止默認事件。
除了正常模式運行外,ECMAscript添加了第二種運行模式:“嚴格模式”。
作用:
1) 消除js不合理,不嚴謹地方,減少怪異行為
2) 消除代碼運行的不安全之處,
3) 提高編譯器的效率,增加運行速度
4) 為未來的js新版本做鋪墊。
全稱:JavaScript Object Notation
JSON中對象通過“{}”來標識,一個“{}”代表一個對象,如{“AreaId”:”123”},對象的值是鍵值對的形式(key:value)。JSON是JS的一個嚴格的子集,一種輕量級的數據交換格式,類似于xml。數據格式簡單,易于讀寫,占用帶寬小。
兩個函數:
JSON.parse(str)
解析JSON字符串 把JSON字符串變成JavaScript值或對象
JSON.stringify(obj)
將一個JavaScript值(對象或者數組)轉換為一個 JSON字符串
eval("("+json+")")
用eval方法注意加括號 而且這種方式更容易被攻擊
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/100497.html
摘要:獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼,也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素,方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。 花了很長時間整理的前端面試資源,喜歡請大家不要吝嗇star~ 別只收藏,點個贊,點個star再走哈~ 持續更新中……,可以關注下github 項目地址 https:...
摘要:收集的一些前端面試題從面試題發現不足,進而查漏補缺,比通過面試更難得及各大互聯網公司前端筆試面試題篇及各大互聯網公司前端筆試面試題篇面試題個和個經典面試題前端開發面試題如何面試前端工程師很重要個變態題解析如何通過餓了么面試輕 收集的一些前端面試題 從面試題發現不足,進而查漏補缺,比通過面試更難得 1 BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇 2 BAT...
摘要:收集的一些前端面試題從面試題發現不足,進而查漏補缺,比通過面試更難得及各大互聯網公司前端筆試面試題篇及各大互聯網公司前端筆試面試題篇面試題個和個經典面試題前端開發面試題如何面試前端工程師很重要個變態題解析如何通過餓了么面試輕 收集的一些前端面試題 從面試題發現不足,進而查漏補缺,比通過面試更難得 1 BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇 2 BAT...
摘要:前言在大廠工作了年,當了年的前端面試官,把大廠常問的面試題與答案匯總在我的中。第題如何劫持的請求,提供思路難度阿里騰訊很多人在上搜索前端面試詳解,把答案倒背如流,但是問到如何劫持請求的時候就一臉懵逼,是因為還是停留在理論性階段。前言 在大廠工作了6年,當了3年的前端面試官,把大廠常問的面試題與答案匯總在我的Github中。希望對大家有所幫助,助力大家進入自己理想的企業。 項目地址是:git...
閱讀 2950·2023-04-25 19:20
閱讀 799·2021-11-24 09:38
閱讀 2056·2021-09-26 09:55
閱讀 2442·2021-09-02 15:11
閱讀 2062·2019-08-30 15:55
閱讀 3619·2019-08-30 15:54
閱讀 3156·2019-08-30 14:03
閱讀 2969·2019-08-29 17:11