電子發燒友App
javascript原型和原型鏈有什么特點
每個對象都會在其內部初始化一個屬性，就是prototype（原型），當我們訪問一個對象的屬性時，
如果這個對象內部不存在這個屬性，那么他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，
于是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。
關系：instance.constructor.prototype = instance.__proto__
特點：
JavaScript對象是通過引用來傳遞的，我們創建的每個新對象實體中并沒有一份屬于自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變。
當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 如果沒有的話，
就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象。
function Func（）{}
Func.prototype.name = “Sean”;
Func.prototype.getInfo = function（） {
return this.name;
}
var person = new Func（）;//現在可以參考var person = Object.create（oldObject）;
console.log（person.getInfo（））;//它擁有了Func的屬性和方法
//“Sean”
console.log（Func.prototype）;
// Func { name=“Sean”， getInfo=function（）}
寫一個通用的事件偵聽器函數。
// event（事件）工具集，來源：github.com/markyun
markyun.Event = {
// 頁面加載完成后
readyEvent ： function（fn） {
if （fn==null） {
fn=document;
}
var oldonload = window.onload;
if （typeof window.onload ！= ‘function’） {
window.onload = fn;
} else {
window.onload = function（） {
oldonload（）;
fn（）;
};
}
}，
// 視能力分別使用dom0||dom2||IE方式 來綁定事件
// 參數： 操作的元素，事件名稱 ，事件處理程序
addEvent ： function（element， type， handler） {
if （element.addEventListener） {
//事件類型、需要執行的函數、是否捕捉
element.addEventListener（type， handler， false）;
} else if （element.attachEvent） {
element.attachEvent（‘on’ + type， function（） {
handler.call（element）;
}）;
} else {
element［‘on’ + type］ = handler;
}
}，
// 移除事件
removeEvent ： function（element， type， handler） {
if （element.removeEventListener） {
element.removeEventListener（type， handler， false）;
} else if （element.datachEvent） {
element.detachEvent（‘on’ + type， handler）;
} else {
element［‘on’ + type］ = null;
}
}，
// 阻止事件 （主要是事件冒泡，因為IE不支持事件捕獲）
stopPropagation ： function（ev） {
if （ev.stopPropagation） {
ev.stopPropagation（）;
} else {
ev.cancelBubble = true;
}
}，
// 取消事件的默認行為
preventDefault ： function（event） {
if （event.preventDefault） {
event.preventDefault（）;
} else {
event.returnValue = false;
}
}，
// 獲取事件目標
getTarget ： function（event） {
return event.target || event.srcElement;
}，
// 獲取event對象的引用，取到事件的所有信息，確保隨時能使用event；
getEvent ： function（e） {
var ev = e || window.event;
if （！ev） {
var c = this.getEvent.caller;
while （c） {
ev = c.arguments［0］;
if （ev && Event == ev.constructor） {
break;
}
c = c.caller;
}
}
return ev;
}
};
對Node的優點和缺點提出了自己的看法？
*（優點）因為Node是基于事件驅動和無阻塞的，所以非常適合處理并發請求，
因此構建在Node上的代理服務器相比其他技術實現（如Ruby）的服務器表現要好得多。
此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，
因此客戶端和服務器端都用同一種語言編寫，這是非常美妙的事情。
*（缺點）Node是一個相對新的開源項目，所以不太穩定，它總是一直在變，
而且缺少足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。
Javascript如何實現繼承？
1、構造繼承
2、原型繼承
3、實例繼承
4、拷貝繼承
原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式。
function Parent（）{
this.name = ‘wang’;
}
function Child（）{
this.age = 28;
}
Child.prototype = new Parent（）;//繼承了Parent，通過原型
var demo = new Child（）;
alert（demo.age）;
alert（demo.name）;//得到被繼承的屬性
}
Javascript作用鏈域？
全局函數無法查看局部函數的內部細節，但局部函數可以查看其上層的函數細節，直至全局細節。
當需要從局部函數查找某一屬性或方法時，如果當前作用域沒有找到，就會上溯到上層作用域查找，
直至全局函數，這種組織形式就是作用域鏈。
javascript創建對象的幾種方式？
javascript創建對象簡單的說，無非就是使用內置對象或各種自定義對象，當然還可以用JSON；但寫法有很多種，也能混合使用。
1、對象字面量的方式
person={firstname：“Mark”，lastname：“Yun”，age:25，eyecolor：“black”};
2、用function來模擬無參的構造函數
function Person（）{}
var person=new Person（）;//定義一個function，如果使用new“實例化”，該function可以看作是一個Class
person.name=“Mark”;
person.age=“25”;
person.work=function（）{
alert（person.name+“ hello.。。”）;
}
person.work（）;
3、用function來模擬參構造函數來實現（用this關鍵字定義構造的上下文屬性）
function Pet（name，age，hobby）{
this.name=name;//this作用域：當前對象
this.age=age;
this.hobby=hobby;
this.eat=function（）{
alert（“我叫”+this.name+“，我喜歡”+this.hobby+“，是個程序員”）;
}
}
var maidou =new Pet（“麥兜”，25，“coding”）;//實例化、創建對象
maidou.eat（）;//調用eat方法
4、用工廠方式來創建（內置對象）
var wcDog =new Object（）;
wcDog.name=“旺財”;
wcDog.age=3;
wcDog.work=function（）{
alert（“我是”+wcDog.name+“，汪汪汪。。。。。。”）;
}
wcDog.work（）;
5、用原型方式來創建
function Dog（）{
}
Dog.prototype.name=“旺財”;
Dog.prototype.eat=function（）{
alert（this.name+“是個吃貨”）;
}
var wangcai =new Dog（）;
wangcai.eat（）;
5、用混合方式來創建
function Car（name，price）{
this.name=name;
this.price=price;
}
Car.prototype.sell=function（）{
alert（“我是”+this.name+“，我現在賣”+this.price+“萬元”）;
}
var camry =new Car（“凱美瑞”，27）;
camry.sell（）;
CSS優先級算法如何計算？ * 優先級就近原則，同權重情況下樣式定義最近者為準;
載入樣式以最后載入的定位為準;
優先級為：
！important 》 id 》 class 》 tag
important 比 內聯優先級高
iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制（不是存儲技術），通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用：
1、頁面頭部像下面一樣加入一個manifest的屬性；
2、在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE：
js/app.js
css/style.css
NETWORK：
resourse/logo.png
FALLBACK：
/ /offline.html
3、在離線狀態時，操作window.applicationCache進行需求實現。
Ajax是什么？ 如何創建一個Ajax？
ajax的全稱：AsynchronousJavascript And XML。
異步傳輸+js+xml。
所謂異步，在這里簡單地解釋就是：向服務器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行后續操作，與此同時，頁面是不會發生整頁刷新的，提高了用戶體驗。
（1）創建XMLHttpRequest對象，也就是創建一個異步調用對象
（2）創建一個新的HTTP請求，并指定該HTTP請求的方法、URL及驗證信息
（3）設置響應HTTP請求狀態變化的函數
（4）發送HTTP請求
（5）獲取異步調用返回的數據
（6）使用JavaScript和DOM實現局部刷新
同步和異步的區別？
同步：瀏覽器訪問服務器請求，用戶看得到頁面刷新，重新發請求，等請求完，頁面刷新，新內容出現，用戶看到新內容，j進行下一步操作。
異步：瀏覽器訪問服務器請求，用戶正常操作，瀏覽器后端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容。
AMD（Modules/Asynchronous-Definition）、CMD（Common ModuleDefinition）規范區別？
AsynchronousModule Definition，異步模塊定義，所有的模塊將被異步加載，模塊加載不影響后面語句運行。所有依賴某些模塊的語句均放置在回調函數中。
區別：
1. 對于依賴的模塊，AMD 是提前執行，CMD 是延遲執行。不過RequireJS 從 2.0 開始，也改成可以延遲執行（根據寫法不同，處理方式不同）。CMD 推崇 as lazy as possible.
2. CMD 推崇依賴就近，AMD 推崇依賴前置。看代碼：
// CMD
define（function（require，exports， module） {
var a = require（‘。/a’）
a.doSomething（）
// 此處略去 100 行
var b = require（‘。/b’） // 依賴可以就近書寫
b.doSomething（）
// 。。。
}）
// AMD 默認推薦
define（［‘。/a’，‘。/b’］， function（a， b） { // 依賴必須一開始就寫好
a.doSomething（）
// 此處略去 100 行
b.doSomething（）
// 。。。
}）
DOM操作——怎樣添加、移除、移動、復制、創建和查找節點？
（1）創建新節點
createDocumentFragment（） //創建一個DOM片段
createElement（） //創建一個具體的元素
createTextNode（） //創建一個文本節點
（2）添加、移除、替換、插入
appendChild（）
removeChild（）
replaceChild（）
insertBefore（） //在已有的子節點前插入一個新的子節點
（3）查找
getElementsByTagName（） //通過標簽名稱
getElementsByName（） //通過元素的Name屬性的值（IE容錯能力較強，會得到一個數組，其中包括id等于name值的）
getElementById（） //通過元素Id，唯一性
什么叫優雅降級和漸進增強？
優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會針對舊版本的IE進行降級處理了，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全不能用。
如：border-shadow
漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新版本瀏覽器才支持的功能，向頁面增加不影響基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來并發揮作用。
如：默認使用flash上傳，但如果瀏覽器支持HTML5 的文件上傳功能，則使用HTML5實現更好的體驗；
jsonp的原理是動態插入script標簽
跨子域可以采用iframe proxy的方式，支持GET和POST，支持異步POST。缺點是：范圍較窄，限定在“跨子域”，而且需要在目標服務器增加額外的文件。
JSONP的方式，支持雙向通信。只支持GET。缺點是：不支持POST，同時需要目標服務器在服務端支持。
iframe的window.name的方式，支持跨主域。缺點是：不支持POST，不過已經很贊了：）
HTML5postMessage，支持雙向通信。缺點是：僅限于HTML5。結合window.name的方式，就很贊了
iframe + location.hash的方式跨主域，功能強大，兼容性好，支持跨域的js調用，支持雙向通信。缺點是：太復雜，會嵌套太多的iframe，同時數據直接寫在url中，數據大小受限而且數據暴露在外。
利用Flash跨域，優點是支持強大，相對簡單。缺點是：依賴flash，需要在服務器更目錄放置crossdomain.xml文件。
為什么要有同源限制？
我們舉例說明：比如一個黑客程序，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登錄時，他的頁面就可以通過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕松到手了。
作用域鏈的理解
每一段js代碼（全局代碼或函數）都有一個與之關聯的作用域鏈（scope chain）。
當js需要查找變量x值的時候（這個過程稱為變量解析（variable resolution）），它會從鏈的第一個對象開始查找，如果這個對象有一個名為x的屬性，則會直接使用這個屬性的值，如果第一個對象中沒有名為x的屬性，js會繼續查找鏈上的下一個對象。如果第二個對象依然沒有名為x的屬性，則會繼續查找下一個，以此類推。
如果作用域鏈上沒有任何一個對象含有屬性x，那么就認為這段代碼的作用域鏈上不存在x，并最終拋出一個引用錯誤（ReferenceError）異常。
工商網監
評論