JS
1.call()? 和 apply():
作用:擴充函數賴以運行的作用域;
這兩個函數都是在特定的作用域中調用函數,實際上等于設置函數體內this對象的值;
apply()接收兩個參數:一個是在其中運行函數的作用域,另一個是參數數組,第二個參數可以是Array實例,也可以是arguments對象;
function sum(num1,num2){
???????????? return num1 + num2;
}
function callSum1(num1,num2){
?????????? return sum.apply(this,arguments);? //傳入arguments對象
}
function callSum2(num1,num2){
???????? return sum.apply(this,[num1,num2]);?? //傳入數組
}
call()和apply()方法的作用相同,接收參數的方式不同,傳遞給函數的參數必須逐個列舉出來;
function sum(num1,num2){
???????? return num1 + num2;
}
function callsum(num1,num2){
??????? return sum.call(this,num1,num2);? //注意所有參數都是直接傳遞給函數
}
擴充函數運行的作用域:
window.color = "red";
var o = {color: "blue"}
function sayColor(){
???????? alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue
上述的例子中先將sayColor()放在了對象o中,然后通過o來調用sayColor()函數;
其他的擴展作用域的方法:
ES5中bind()方法,創建一個函數的實例,this值會被綁定到傳給bind()函數的值;
window.color = "red";
var o = {color: "blue"}
function sayColor(){
?????????? alert(this.color);
}
var objectSayColor = sayColor.bind(o);?? //sayColor()里的this表示對象o,
objectColor(); //blue
sayColor()函數調用bind()并傳入對象o,創建objectSayColor()函數,此時this代表對象o,即使是在全局變量下,函數
2.$(document).ready的原理:不是使用輪詢法,使用window.onload
DOMContentLoaded,直接綁定在Document下,頁面文檔完全加載并解析完畢之后,會觸發DOMContentLoaded事件，HTML文檔不會等待樣式文件,圖片文件,子框架頁面的加載(load事件可以用來檢測HTML頁面是否完全加載完畢(fully-loaded))。
但是IE下不支持這個屬性,使用輪詢法;
兼容不支持該事件的瀏覽器
在IE8中,可以使用readystatechange事件來檢測DOM文檔是否加載完畢.在更早的IE版本中,可以通過每隔一段時間執行一次document.documentElement.doScroll("left")來檢測這一狀態，因為這條代碼在DOM加載完畢之前執行時會拋出錯誤(throw an error)。
3.事件委托,事件冒泡,事件捕獲:
(1)事件委托:針對"事件處理程序過多"的問題的解決方案
??????????????????? 利用事件冒泡,只指定一個事件處理程序,可以管理某一類型的所有事件;
百度一面
1.<!Doctype html>
???? 告訴瀏覽器文檔渲染的類型;
2.[? ]==false;? //true?????? [? ] === false;? //true?? ({}) == false; //false
??? 0==[]; //ture??? 0 == "? "; //true
NaN == NaN; //false
undefined == null;? // true
undefined === null;? //false
3.IE下如何觸發標準盒子模型;
IE在怪異模式下顯示為IE盒子模型,標準模式下為W3C標準盒子模型;
其他瀏覽器都是標準盒子模型
例如，如下會觸發quirks模式：
文件類型描述缺失或不完整時；
遇到一個HTML 3或者更早的文檔時；
使用HTML 4.0 Transitional或Frameset的文件類型描述且系統標識符（URI）不存在時；
在DOCTYPE聲明之前出現SGML注釋或者其它無法識別的內容時；
文檔任何地方有錯誤時；
注釋符相遇時出現末尾文字重復；
Internet Explorer 6也會在DOCTYPE聲明之前出現XML聲明時使用quirks模式。
各種解決方法已被制定以迫使Internet Explorer 5以及更早版本使用W3C盒模型顯示網頁。這些解決方法一般是利用Internet Explorer的CSS選擇器作用的無關的缺陷以從瀏覽器中隱藏某些規則。這些解決方法中，最為熟知的是由Tantek ?elik，一個工作于IE for Mac時發現這個主意的前微軟員工，開發的“盒模型hack”。它涉及到為IE for Windows指定一個寬度聲明，隨后使用另一個為CSS-兼容的瀏覽器指定的寬度重寫它。第二條聲明通過利用IE for Windows解析CSS規則的其它缺陷而從該瀏覽器中隱藏。
3.vertical-align設置元素的垂直對齊方式;
baseline 默認。元素放置在父元素的基線上。
sub 垂直對齊文本的下標。
super 垂直對齊文本的上標
top 把元素的頂端與行中最高元素的頂端對齊
text-top 把元素的頂端與父元素字體的頂端對齊
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對齊。
text-bottom 把元素的底端與父元素字體的底端對齊。
length
4.實現水平垂直居中:
html:
<div class="one"></div>
css:
.one{
????? display: flex;
????? align-item: center;
????? content-justfiy: center;
}
常規的做法:
<div? class="main">
???????? <div? class="div">123</div>
</div>
.main{
?????? display: table;
}
.div{
???? display:table-cell;
???? vertical-align: middle;
???? text-align:center;
}
BFC布局:
5.svg和canvas的區別;
6.輸入一串英文句子,把每個單詞的首字母大寫并輸出;
正則匹配:
function replaceFirstUpper(str){
str.toLowerCase();
????????? str.replace(/\b(\w)|\s(\w)/g,function(m){
?????????????? return m.toUpperCase();
???????? });
}
攜程電面:
1.null 和 undefined 的區別;
2.NaN;
3.怎樣找出一個父元素是否包含子元素
nodeName和tagName;
4.jQuery中如何選擇類選擇器和ID選擇器
5.將多維數組轉化成一個一維數組;
var mult_arr = [1,23,[1,3],[1,3[1[2,4]]]];
function forEachArr(arr){
????????? var?? result = [ ];
????????? for(var i = 0,len = arr.length; i < len;i++){
?????????????????? if(arr[i]? instanceof?? Array){
?????????????????????????????? arguments.callee(forEachArr);
??????????????????? }else{
?????????????????????????????? result.push(arr[i]);
???????????????????? }
????????????????????? return?? result;
???????? }
}
console.log(forEachArr(arr));
7.什么是Ajax和JSON，它們的優缺點。
Ajax是異步JavaScript和XML，用于在Web頁面中實現異步數據交互。
優點：
可以使得頁面不重載全部內容的情況下加載局部內容，降低數據傳輸量
避免用戶不斷刷新或者跳轉頁面，提高用戶體驗
缺點：
對搜索引擎不友好（
要實現ajax下的前后退功能成本較大
可能造成請求數的增加
跨域問題限制
JSON是一種輕量級的數據交換格式，ECMA的一個子集
優點：輕量級、易于人的閱讀和編寫，便于機器（JavaScript）解析，支持復合數據類型（數組、對象、字符串、數字）
8.vertical-align 屬性設置元素的垂直對齊方式,對應的值
baseline 默認。元素放置在父元素的基線上。
sub 垂直對齊文本的下標。
super 垂直對齊文本的上標
top 把元素的頂端與行中最高元素的頂端對齊
text-top 把元素的頂端與父元素字體的頂端對齊
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對齊。
text-bottom 把元素的底端與父元素字體的底端對齊。
length
% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit 規定應該從父元素繼承 vertical-align 屬性的值。
8.對CSS3的理解:
CSS3是層疊樣式表語言的最新發展，旨在擴展CSS2.1。它帶來了很多期待已久的新事物，比如圓角，陰影，漸變，跳變或動畫，以及新的布局，如多列，靈活的框或網格布局。
對HTML5的理解:
語義化的標簽,新應用程序接口(API):
實時二維繪圖
Canvas API：有關動態產出與渲染圖形、圖表、圖像和動畫的API[24]
定時媒體播放[25]
HTML5音頻與視頻：HTML5里新增的元素，它們為開發者提供了一套通用的、集成的、腳本式的處理音頻與視頻的API，而無需安裝任何插件
離線存儲數據庫（離線網絡應用程序）[26]
編輯[27]
拖放[28]
跨文檔通信[29]
通訊／網絡
Communication APIs：構建實時和跨源（cross-origin）通訊的兩大基礎： 跨文檔通訊（Cross Document Messaging）與XMLHttpRequest Level 2。
瀏覽歷史管理[30]
MIME和協議進程時表頭登記[31][32]
微數據[33]
網頁存儲[34]
HTML5語義化的好處:
1.去掉或樣式丟失的時候能讓頁面呈現清晰的結構：
2.屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁.
3.使用標簽語義化可以使PDA、手機等設備可能無法像普通電腦的瀏覽器一樣來渲染網頁（通常是因為這些設備對CSS的支持較弱）.
4.搜索引擎的爬蟲也依賴于標記.
HTTP狀態碼:
1XX:請求已被接受,需要繼續處理,臨時響應
2XX:請求已被服務器成功接收,理解,接受;
3XX:客戶端采取進一步操作才能完成請求;
4XX:客戶端的錯誤
403forbidden:服務器已經理解請求,但是拒絕執行;
404not found請求失敗,希望請求的資源未在服務器上發現
5XX:服務器在處理請求時發生異常;
505服務器不支持或者拒絕支持在請求中使用的http版本;
5.跨域:由于同源策略的影響.a.com域名下的文件無法訪問b.com或者是c.a.com下的域名下的對象
解決跨域的方法:
(1)document.domain+iframe;必須是主域名相同的時候才可以
(2)動態創建script標簽
(3)利用iframe和location.hash
(4)window.name實現跨域數據傳輸
(5)HTML5中的postMessage
(6)利用flash
6.GET和POST請求的區別:
GET - 從指定的資源請求數據。
POST - 向指定的資源提交要被處理的數據
GET 方法
請注意，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的：
/test/demo_form.asp?name1=value1&name2=value2
POST 方法
請注意，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的：
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
有關 GET 請求的其他一些注釋：? ? ? ? ? ? ? ? ? ? ? ? ? 有關 POST 請求的其他一些注釋：
GET 請求可被緩存? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? POST 請求不會被緩存
GET 請求保留在瀏覽器歷史記錄中? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? POST 請求不會保留在瀏覽器歷史記錄中
GET 請求可被收藏為書簽? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? POST 不能被收藏為書簽
GET 請求不應在處理敏感數據時使用????????????????????????????
GET 請求有長度限制? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? POST 請求對數據長度沒有要求
GET 請求只應當用于取回數據
1.this的用法
來自阮一峰:
(1)作為單純的函數調用的時候,代表全局變量;
(2)作為方法調用的時候代表上級對象;
(3)作為構造函數調用的時候,代表新對象;
(4)apply,call()調用,作用是改變函數的調用對象,第一個參數表示改變后的調用這個函數的對象,this指的就是這第一個參數
(1)Global context;
console.log(this.document === document); // true
// In web browsers, the window object is also the global object:
console.log(this === window); // true
this.a = 37;
console.log(window.a); // 37
(2)Function context;//取決于函數是如何被調用的
Inside a function, the value of this depends on how the function is called.
Simple call
function f1(){
return this;
}
f1() === window; // global object
(3)As an object method
When a function is called as a method of an object, its this is set to the object the method is called on.
3.CSS優先級
優先級順序
內聯樣式 > ID 選擇器 > 偽類 > 屬性選擇器 > 類選擇器 > 元素(類型)選擇器 > 通用選擇器（*）
4.XML和JSON
3.XML和JSON的優缺點對比
(1).可讀性方面。
JSON和XML的數據可讀性基本相同，JSON和XML的可讀性可謂不相上下，一邊是建議的語法，一邊是規范的標簽形式，XML可讀性較好些。
(2).可擴展性方面。
XML天生有很好的擴展性，JSON當然也有，沒有什么是XML能擴展，JSON不能的。
(3).編碼難度方面。
XML有豐富的編碼工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的編碼明顯比XML容易許多，即使不借助工具也能寫出JSON的代碼，可是要寫好XML就不太容易了。
(4).解碼難度方面。
XML的解析得考慮子節點父節點，讓人頭昏眼花，而JSON的解析難度幾乎為0。這一點XML輸的真是沒話說。
(5).流行度方面。
XML已經被業界廣泛的使用，而JSON才剛剛開始，但是在Ajax這個特定的領域，未來的發展一定是XML讓位于JSON。到時Ajax應該變成Ajaj(Asynchronous Javascript and JSON)了。
(6).解析手段方面。
JSON和XML同樣擁有豐富的解析手段。
(7).數據體積方面。
JSON相對于XML來講，數據的體積小，傳遞的速度更快些。
(8).數據交互方面。
JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。
(9).數據描述方面。
JSON對數據的描述性比XML較差。
(10).傳輸速度方面。
JSON的速度要遠遠快于XML。
4.閉包:
閉包就是嵌套在函數里面的內部函數，并且該內部函數可以訪問外部函數中聲明的所有局部變量、參數和其他內部函數。當該內部函數在外部函數外被調用，就生成了閉包。（實際上任何函數都是全局作用域的內部函數，都能訪問全局變量，所以都是window的閉包）
;()();可以立即執行,避免變量污染,但是要是閉包內引用類型的數據在閉包外被使用的話,那么這個閉包就無法釋放,一直占用內存,前面的語句加分號的理由:為什么在前面加一個分號，其原因就是防止前面的語句忘記加分號;
6.SVG和canvas的區別:
手寫冒泡排序:
