標(biāo)簽(空格分隔): 面試準(zhǔn)備
[TOC]
1踱讨、請(qǐng)解釋一下什么是閉包
我的理解是,閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)砍的。
由于在Javascript語(yǔ)言中痹筛,只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量,因此可以把閉包簡(jiǎn)單理解成"定義在一個(gè)函數(shù)內(nèi)部的函數(shù)"廓鞠。
所以帚稠,在本質(zhì)上,閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的一座橋梁床佳。
作用:一個(gè)是可以讀取函數(shù)內(nèi)部的變量滋早,另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
2砌们、JS跨域
概念:只要協(xié)議杆麸、域名、端口有任何一個(gè)不同怨绣,都被當(dāng)作是不同的域角溃。
瀏覽器都有一個(gè)同源策略,其限制之一就是第一種方法中我們說(shuō)的不能通過(guò)ajax的方法去請(qǐng)求不同源中的文檔篮撑。 它的第二個(gè)限制是瀏覽器中不同域的框架之間是不能進(jìn)行js的交互操作的减细。另外同源策略只對(duì)網(wǎng)頁(yè)的HTML文檔做了限制,對(duì)加載的其他靜態(tài)資源如javascript赢笨、css未蝌、圖片等仍然認(rèn)為屬于同源驮吱。
在瀏覽器中,<script>萧吠、<img>左冬、<iframe>、<link>
等標(biāo)簽都可以加載跨域資源纸型,而不受同源限制拇砰,但瀏覽器限制了JavaScript的權(quán)限使其不能讀、寫(xiě)加載的內(nèi)容狰腌。
簡(jiǎn)單地理解就是因?yàn)镴avaScript同源策略的限制除破,a.com 域名下的js無(wú)法操作b.com或是c.a.com域名下的對(duì)象。
http://www.freebuf.com/articles/web/65468.html
http://blog.chinaunix.net/uid-20737871-id-4458460.html
https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
1.CORS(Cross-Origin Resource Sharing)跨域資源共享
服務(wù)器端對(duì)于CORS的支持琼腔,是通過(guò)設(shè)置Access-Control-Allow-Origin來(lái)進(jìn)行的瑰枫。如果瀏覽器檢測(cè)到相應(yīng)的設(shè)置,就可以允許Ajax進(jìn)行跨域的訪問(wèn)丹莲。
< script type = "text/javascript" >
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// 此時(shí)即支持CORS的情況
// 檢查XMLHttpRequest對(duì)象是否有“withCredentials”屬性
// “withCredentials”僅存在于XMLHTTPRequest level 2對(duì)象里
} else {
// 否則檢查是否支持XDomainRequest
// XDomainRequest僅存在于IE中光坝,是IE用于支持CORS請(qǐng)求的方式
xhr = new XDomainRequest();
}
xhr.open(method, url, true);
xhr.send();
xhr.onload = function() {
alert(xhr.responseText);
}
}
createCORSRequest('GET', "http://192.168.1.58/t.php"); < /script>
Apache
<Directory />
Require all denied
Header set Access-Control-Allow-Origin *
</Directory>
Nginx
location / {
add_header Access-Control-Allow-Origin *;
}
PHP
<?php
header("Access-Control-Allow-Origin:*");
//處理請(qǐng)求輸出數(shù)據(jù)
?>
http://www.tuicool.com/articles/mYFjaa
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
2.JSONP
一個(gè)眾所周知的問(wèn)題,Ajax直接請(qǐng)求普通文件存在跨域無(wú)權(quán)限訪問(wèn)的問(wèn)題甥材,甭管你是靜態(tài)頁(yè)面盯另、動(dòng)態(tài)網(wǎng)頁(yè)、web服務(wù)洲赵、WCF土铺,只要是跨域請(qǐng)求,一律不準(zhǔn)板鬓;
JavaScript代碼一
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
function jsonpCallback(result) {
//alert(result);
for(var i in result) {
alert(i+":"+result[i]);//循環(huán)輸出a:1,b:2,etc.
}
}
var JSONP=document.createElement("script");
JSONP.type="text/javascript";
JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";
document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>
JavaScript代碼二
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
function jsonpCallback(result) {
alert(result.a);
alert(result.b);
alert(result.c);
for(var i in result) {
alert(i+":"+result[i]);//循環(huán)輸出a:1,b:2,etc.
}
}
</script>
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>
$.getJSON方法
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.getJSON("http://crossdomain.com/services.php?callback=?",
function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循環(huán)輸出a:1,b:2,etc.
}
});
</script>
$.AJAX方法
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url:"http://crossdomain.com/services.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
success:function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循環(huán)輸出a:1,b:2,etc.
}
},
timeout:3000
});
</script>
$.get方法
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp');
</script>
服務(wù)器端代碼
<?php
//服務(wù)端返回JSON數(shù)據(jù)
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$result=json_encode($arr);
//echo $_GET['callback'].'("Hello,World!")';
//echo $_GET['callback']."($result)";
//動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)
$callback=$_GET['callback'];
echo $callback."($result)";
Jsonp原理:
首先在客戶端注冊(cè)一個(gè)callback, 然后把callback的名字傳給服務(wù)器。
此時(shí)究恤,服務(wù)器先生成 json 數(shù)據(jù)俭令。
然后以 javascript 語(yǔ)法的方式,生成一個(gè)function , function 名字就是傳遞上來(lái)的參數(shù) jsonp.
最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞讲克蓿胖玫?function 中抄腔,這樣就生成了一段 js 語(yǔ)法的文檔,返回給客戶端理张。
客戶端瀏覽器赫蛇,解析script標(biāo)簽,并執(zhí)行返回的 javascript 文檔雾叭,此時(shí)數(shù)據(jù)作為參數(shù)悟耘,傳入到了客戶端預(yù)先定義好的 callback 函數(shù)里.(動(dòng)態(tài)執(zhí)行回調(diào)函數(shù))
CORS與JSONP相比,無(wú)疑更為先進(jìn)织狐、方便和可靠暂幼。
1筏勒、 JSONP只能實(shí)現(xiàn)GET請(qǐng)求,而CORS支持所有類(lèi)型的HTTP請(qǐng)求旺嬉。
2管行、 使用CORS,開(kāi)發(fā)者可以使用普通的XMLHttpRequest發(fā)起請(qǐng)求和獲得數(shù)據(jù)邪媳,比起JSONP有更好的錯(cuò)誤處理捐顷。
3、 JSONP主要被老的瀏覽器支持雨效,它們往往不支持CORS迅涮,而絕大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持了CORS)。
http://kb.cnblogs.com/page/139725/
http://justcoding.iteye.com/blog/1366102/
3.通過(guò)修改document.domain來(lái)跨子域
不同的框架之間是可以獲取window對(duì)象的设易,但卻無(wú)法獲取相應(yīng)的屬性和方法逗柴。比如,有一個(gè)頁(yè)面顿肺,它的地址是http://www.example.com/a.html
戏溺, 在這個(gè)頁(yè)面里面有一個(gè)iframe
,它的src是http://example.com/b.html
, 很顯然屠尊,這個(gè)頁(yè)面與它里面的iframe
框架是不同域的旷祸,所以我們是無(wú)法通過(guò)在頁(yè)面中書(shū)寫(xiě)js代碼來(lái)獲取iframe中的東西的:
https://segmentfault.com/a/1190000000718840#articleHeader5
4.使用window.name來(lái)進(jìn)行跨域
window對(duì)象有個(gè)name屬性,該屬性有個(gè)特征:即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁(yè)面都是共享一個(gè)window.name的讼昆,每個(gè)頁(yè)面對(duì)window.name都有讀寫(xiě)的權(quán)限托享,window.name是持久存在一個(gè)窗口載入過(guò)的所有頁(yè)面中的。
http://www.admin10000.com/document/3517.html
原理:iframe在加載新頁(yè)面時(shí)浸赫,name值是保持不變的闰围,由此可以重定向iframe的引用地址,由外域轉(zhuǎn)到本域既峡。
http://www.examw.com/sheji/javascript/134323/
5.使用HTML5的window.postMessage方法跨域
http://www.cnblogs.com/fuyun2000/archive/2012/09/29/2708510.html
6.利用location.hash+iframe跨域獲取數(shù)據(jù)
http://www.tuicool.com/articles/6neUbeY
3羡榴、jQuery的源碼看過(guò)嗎?能不能簡(jiǎn)單說(shuō)一下它的實(shí)現(xiàn)原理运敢?
1.查找并創(chuàng)建JQuery對(duì)象
2.直接使用JQuery對(duì)象的方法/屬性
強(qiáng)悍的DOM元素查看器($)
http://ccvita.com/121.html
4校仑、this關(guān)鍵字
this
出現(xiàn)的場(chǎng)景分為四類(lèi):
有對(duì)象就指向調(diào)用對(duì)象
沒(méi)調(diào)用對(duì)象就指向全局對(duì)象
用new構(gòu)造就指向新對(duì)象
通過(guò) apply 或 call 或 bind 來(lái)改變 this 的所指。
一點(diǎn):this永遠(yuǎn)指向函數(shù)運(yùn)行時(shí)所在的對(duì)象传惠!而不是函數(shù)被創(chuàng)建時(shí)所在的對(duì)象迄沫。
bind()
o1對(duì)象有個(gè)f方法
想讓o2對(duì)象繼承o1的f方法
bind一下,o2對(duì)象就有這個(gè)現(xiàn)成的東西了卦方。
//o2.f = o1.f.bind(o2);
call()和apply()
http://uule.iteye.com/blog/1158829
bind()返回的是一個(gè)函數(shù)
call和apply會(huì)返回并調(diào)用該函數(shù)
http://hawx1993.github.io/2015/12/23/js-this/
5.JS數(shù)組去重
第一種:
1.構(gòu)建一個(gè)結(jié)果數(shù)組存放結(jié)果
2.用for循環(huán)每次從原數(shù)組中取出一個(gè)元素羊瘩,再用for循環(huán)將這個(gè)元素與結(jié)果數(shù)組中的每一個(gè)數(shù)進(jìn)行對(duì)比
3.若結(jié)果數(shù)組中沒(méi)有該元素,則存到結(jié)果數(shù)組中
Array.prototype.unique1 = function() {
// 將原數(shù)組的第一個(gè)元素存入結(jié)果數(shù)組,可以少循環(huán)一次
var res = [this[0]];
// 一開(kāi)始還以為 i = 1困后;是作者搞錯(cuò)了乐纸,真是low= =
for (var i = 1; i < this.length; i++) {
var repeat = false;
for (var j = 0; j < res.length; j++) {
if (this[i] == res[j]) {
repeat = true;
break;
}
}
if (!repeat) {
res.push(this[i]);
}
}
return res;
}
var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]
console.log(arr.unique1());
第二種:
1.先將原數(shù)組進(jìn)行排序(這會(huì)改變結(jié)果數(shù)組的順序)。
2.檢查原數(shù)組中的第i個(gè)元素與結(jié)果數(shù)組中的最后一個(gè)元素是否相同摇予,因?yàn)橐呀?jīng)排序汽绢,所以重復(fù)元素會(huì)在相鄰位置
3.如果不相同,則將該元素存入結(jié)果數(shù)組中
Array.prototype.unique2 = function(){
this.sort(); //先排序
var res = [this[0]];
for(var i = 1; i < this.length; i++){
if(this[i] !== res[res.length - 1]){
res.push(this[i]);
}
}
return res;
}
var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]
console.log(arr.unique2());
第三種
1.創(chuàng)建一個(gè)新的數(shù)組存放結(jié)果
2.創(chuàng)建一個(gè)空對(duì)象
3.for循環(huán)時(shí)侧戴,每次取出一個(gè)元素與對(duì)象進(jìn)行對(duì)比宁昭,如果這個(gè)元素不重復(fù),則把它存放到結(jié)果數(shù)組中酗宋,同時(shí)把這個(gè)元素的內(nèi)容作為對(duì)象的一個(gè)屬性积仗,并賦值為1(也可賦值為true),存入到第2步建立的對(duì)象中蜕猫。
說(shuō)明:至于如何對(duì)比寂曹,就是每次從原數(shù)組中取出一個(gè)元素,然后到對(duì)象中去訪問(wèn)這個(gè)屬性回右,如果能訪問(wèn)到值隆圆,則說(shuō)明重復(fù)。
Array.prototype.unique3 = function() {
var res = [];
var json = {};
for (var i = 0; i < this.length; i++) {
if (!json[this[i]]) {
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
var arr = [112, 112, 34, '你好', '112', 112, 34, '你好', 'str', 'str1'];
console.log(arr.unique3());
不過(guò)這種方法有很大的疏漏翔烁,就是沒(méi)有考慮到 '112' 和 112 這種元素會(huì)被當(dāng)作相同元素被剔除的情況
判斷一下渺氧,如果是字符串就加一個(gè)前綴,區(qū)分一下
Array.prototype.unique3 = function() {
var res = [];
var json = {};
var prefix = '';
for (var i = 0; i < this.length; i++) {
if (typeof this[i] == 'string') {
prefix = '_str';
} else {
prefix = '';
};
if (!json[this[i] + prefix]) {
res.push(this[i]);
json[this[i] + prefix] = 1;
console.log(json)
}
}
return res;
}
var arr = ["112", 112, 34, '你好', '112', 112, 34, '你好', 'str', 'str1'];
console.log(arr.unique3());
http://www.php230.com/1411947001.html
1.JavaScript是一門(mén)什么樣的語(yǔ)言蹬屹,它有哪些特點(diǎn)侣背?
JavaScript一種直譯式腳本語(yǔ)言,是一種動(dòng)態(tài)類(lèi)型慨默、弱類(lèi)型贩耐、基于原型的語(yǔ)言,內(nèi)置支持類(lèi)型厦取。
JavaScript腳本語(yǔ)言具有以下特點(diǎn):
(1)腳本語(yǔ)言憔杨。JavaScript是一種解釋型的腳本語(yǔ)言,C、C++等語(yǔ)言先編譯后執(zhí)行,而JavaScript是在程序的運(yùn)行過(guò)程中逐行進(jìn)行解釋蒜胖。
(2)基于對(duì)象。JavaScript是一種基于對(duì)象的腳本語(yǔ)言,它不僅可以創(chuàng)建對(duì)象,也能使用現(xiàn)有的對(duì)象抛蚤。
(3)簡(jiǎn)單台谢。JavaScript語(yǔ)言中采用的是弱類(lèi)型的變量類(lèi)型,對(duì)使用的數(shù)據(jù)類(lèi)型未做出嚴(yán)格的要求,是基于Java基本語(yǔ)句和控制的腳本語(yǔ)言,其設(shè)計(jì)簡(jiǎn)單緊湊岁经。
(4)動(dòng)態(tài)性朋沮。JavaScript是一種采用事件驅(qū)動(dòng)的腳本語(yǔ)言,它不需要經(jīng)過(guò)Web服務(wù)器就可以對(duì)用戶的輸入做出響應(yīng)。在訪問(wèn)一個(gè)網(wǎng)頁(yè)時(shí),鼠標(biāo)在網(wǎng)頁(yè)中進(jìn)行鼠標(biāo)點(diǎn)擊或上下移、窗口移動(dòng)等操作JavaScript都可直接對(duì)這些事件給出相應(yīng)的響應(yīng)樊拓。
(5)跨平臺(tái)性纠亚。JavaScript腳本語(yǔ)言不依賴于操作系統(tǒng),僅需要瀏覽器的支持。因此一個(gè)JavaScript腳本在編寫(xiě)后可以帶到任意機(jī)器上使用,前提上機(jī)器上的瀏覽器支持JavaScript腳本語(yǔ)言,目前JavaScript已被大多數(shù)的瀏覽器所支持筋夏。
http://baike.baidu.com/link?url=0rPD_5QRzezEhSDkxUlDNuaKFTOFLuOtbrFbBlgBO5Wdrm9fDpYjrFdR_bp5J93G6dmGDmRxnJ_hgv6Hb_dxUq