日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

前言

為郎溪等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及郎溪網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、郎溪網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

之所以會(huì)有此篇文章當(dāng)然還要從最近的一次面試說(shuō)起，很抱歉居然又扯到面試上去看，其實(shí)不要說(shuō)，平時(shí)不注意的東西，往往在面試時(shí)便會(huì)立馬給你揪出來(lái)哪里有問(wèn)題。

比如我當(dāng)時(shí)就小小的栽了個(gè)跟頭，栽跟頭不要緊，要緊的是我確實(shí)對(duì)js的一些問(wèn)題沒(méi)有了解透徹。

俗話說(shuō)的好，半灌水響叮當(dāng)，我就那種一直認(rèn)為自己js功底好的人，但真的拿出手來(lái)說(shuō)，其實(shí)真的有點(diǎn)水了......此時(shí)再不好好學(xué)習(xí)一番，豈不是坐井觀天，所以讓我們開動(dòng)吧！

小弟最近的文章基本都是邊寫邊發(fā)，若是各位發(fā)現(xiàn)什么問(wèn)題，或者感覺(jué)廢話太多，請(qǐng)包涵。

閑扯作用域

你了解javascript的作用域嗎？真的了解嗎？那來(lái)試試這道題吧：

 
 
 
 
  
  
  
  
if (!("a" in window)) {  
  
  
  
  
    var a = 1;  
  
  
  
  
}   
  
  
  
  
alert(a); 
 
 
 

好吧，拿出你的答案吧，吾已經(jīng)露出了邪惡的笑容了，因?yàn)槎鄶?shù)人看著這道題腦殼就有點(diǎn)昏（我會(huì)說(shuō)我也有點(diǎn)昏嗎？？？）
讓我們一起來(lái)剝離她性感的外衣吧：

第一步："a" in window這是什么意思？

意思是a是window的屬性嗎？那我們來(lái)做個(gè)試驗(yàn)：

我那個(gè)去，你會(huì)發(fā)現(xiàn)不管注釋var a 還是不注釋，a都是window的屬性......于是上面答案呼之欲出?。?！但我一團(tuán)漿糊在我們腦袋中膨脹擴(kuò)散......

在js的變量作用域中有個(gè)原則：所有變量聲明都在范圍作用域的頂部！

所以，之前我犯了一個(gè)愚蠢的錯(cuò)誤，錯(cuò)的連我也吃驚，所以我把我自己喝大家都忽悠了，注意陷阱：

其實(shí)剛剛上面的完整代碼是這樣的：

這樣的話：in_window自然是true，這才是隱藏的真相！??！

若是注釋下面這些代碼的話：

終于正確了，剛剛因?yàn)樽约旱囊粋€(gè)錯(cuò)誤差點(diǎn)顛覆我最近學(xué)習(xí)的東西，太可怕了！

現(xiàn)在我們來(lái)看看“所有變量申明都會(huì)在范圍作用域的頂部”是什么意思。

意思是在最下面定義的變量會(huì)自動(dòng)提到上面去啦?。?！所以我們定義變量時(shí)不如直接全部定義上去算啦。

回到本題：

 
 
 
 
  
  
  
  
if (!("a" in window)) {  
  
  
  
  
    var a = 1;  
  
  
  
  
}   
  
  
  
  
alert(a); 
 
 
 

其實(shí)他該是這個(gè)樣子的。。。。

 
 
 
 
  
  
  
  
var a;  
  
  
  
  
if (!("a" in window)) {  
  
  
  
  
    a = 1;  
  
  
  
  
}   
  
  
  
  
alert(a); 
 
 
 

他將if里面的申明也提前了，怎么樣不服氣吧，其實(shí)我也是有點(diǎn)不服氣，我想再試試：

 
 
 
 
  
  
  
  
var s = '';  
  
  
  
  
if (false) {  
  
  
  
  
    var a = 1;  
  
  
  
  
} 
 
 
 

請(qǐng)注意，其中s沒(méi)有任何意義，就是為了我方便設(shè)置斷點(diǎn)：

至此真相出現(xiàn)，無(wú)論如何a的申明都會(huì)提前包括以下幾種情況：

 
 
 
 
  
  
  
  
var s = '';while (false) {    var a = 1;} 
 
 
 

變形一

學(xué)而不思則罔，我們將題目做個(gè)簡(jiǎn)單變形看看：

 
 
 
 
  
  
  
  
if (!("a" in window)) {  
  
  
  
  
    a = 1;  
  
  
  
  
}  
  
  
  
  
alert(a); 
 
 
 

在if里面去掉了申明，這道題就該是“1”了，但是若是if里面的代碼不被執(zhí)行的話就會(huì)報(bào)錯(cuò)了喲；

變形2：碰上了函數(shù)

剛剛那個(gè)現(xiàn)在看來(lái)就相對(duì)簡(jiǎn)單了，現(xiàn)在我們看看如此如此這般這般又會(huì)如何（我承認(rèn)我閑的蛋疼好了）？

 
 
 
 
  
  
  
  
if (!("a" in window)) {  
  
  
  
  
    var a = function () { window.a = 1; }  
  
  
  
  
}  
  
  
  
  
alert(a); 
 
 
 

這樣一改真的很蛋疼啦，這里不管a被定義為什么，但他是函數(shù)表達(dá)式，函數(shù)表達(dá)式就和原來(lái)一樣，所以不變，if里面不會(huì)被執(zhí)行！

那若是這個(gè)樣子呢？

 
 
 
 
  
  
  
  
if (!("a" in window)) {  
  
  
  
  
    function a() { window.a = 1; }  
  
  
  
  
}  
  
  
  
  
alert(a); 
 
 
 

這個(gè)場(chǎng)景其實(shí)我也傻了，那么設(shè)置個(gè)斷點(diǎn)看看：

看來(lái)a并不在window中，所以會(huì)執(zhí)行if中的代碼；

這里卻又引出了另一個(gè)問(wèn)題：到底變量提前或者函數(shù)提前？

 
 
 
 
  
  
  
  
var a = '1';  
  
  
  
  
function a(){}  
  
  
  
  
alert(a); 
 
 
 

 
 
 
 
  
  
  
  
function a() { }  
  
  
  
  
var a = '1';  
  
  
  
  
alert(a); 
 
 
 

這兩種寫法會(huì)導(dǎo)致最后輸出有所不同嗎？？？

答案是不會(huì)，他們的的結(jié)果都是1，原因就是函數(shù)式申明更加被優(yōu)先啦，所以無(wú)論怎么寫函數(shù)式什么都在最前面??！

 
 
 
 
  
  
  
  
function a() {return false; }  
  
  
  
  
if (a()) {  
  
  
  
  
    var a = '1';  
  
  
  
  
}  
  
  
  
  
s = '';  
  
  
  
  
alert(a); 
 
 
 

 
 
 
 
  
  
  
  
function a() {return  true; }  
  
  
  
  
if (a()) {  
  
  
  
  
    var a = '1';  
  
  
  
  
}  
  
  
  
  
s = '';  
  
  
  
  
alert(a); 
 
 
 

我們前面說(shuō)過(guò)，無(wú)論如何，if里面的申明會(huì)提前，那么我們這兩道題可以改寫一下

 
 
 
 
  
  
  
  
var a = function () { return true };  
  
  
  
  
var a;  
  
  
  
  
if (a()) {  
  
  
  
  
    a = '1';  
  
  
  
  
}  
  
  
  
  
s = '';  
  
  
  
  
alert(a); 
 
 
 

注意來(lái)：這里的10行，雖說(shuō)申明了變量a卻沒(méi)有給其賦值，所以a還是函數(shù)，這從這里也可以看出來(lái)：

所以上面兩個(gè)答案就沒(méi)問(wèn)題了，一個(gè)打印函數(shù)，一個(gè)打印數(shù)字1；

變形三

 
 
 
 
  
  
  
  
var a = 1,  
  
  
  
  
b = function a(x) { x && b(--x); };   
  
  
  
  
alert(a); 
 
 
 

現(xiàn)在我不運(yùn)行代碼試試是否可以解析，答案是不可以。。。我解析不出來(lái)，還是運(yùn)行算了吧，我太水了！

這里涉及幾個(gè)重要概念：

 
 
 
 
  
  
  
  
1 變量聲明在進(jìn)入執(zhí)行上下文就完成了  
  
  
  
  
2 函數(shù)聲明也是提前的，所有的函數(shù)聲明都在執(zhí)行代碼之前都已經(jīng)完成了聲明，和變量聲明一樣  
  
  
  
  
3 函數(shù)聲明會(huì)覆蓋變量聲明，但不會(huì)覆蓋變量賦值，如我們上面看到的 
 
 
 

想要理清問(wèn)題，我還是老老實(shí)實(shí)一步步做工作吧：

根據(jù)規(guī)則三，這個(gè)結(jié)果是沒(méi)有問(wèn)題的，再看看下面的

從這里可以看出，若是注釋了var a，這里function a()壓根與它沒(méi)什么事情，我們可以直接將之忽略（可能有誤）

所以該題可以理解為：

 
 
 
 
  
  
  
  
var a = 1,  
  
  
  
  
b = function (x) { x && b(--x); };   
  
  
  
  
alert(a); 
 
 
 

坑爹的我本來(lái)是想對(duì)js中的this做次研究的，沒(méi)想到在作用域相關(guān)的東西上轉(zhuǎn)了這么久，但是經(jīng)過(guò)這次折騰我相信在這塊地方我應(yīng)該不會(huì)出問(wèn)題了吧？？？

#p#

進(jìn)入正題

通常情況下, this代表的是前面提到的Globle Object，也就是Browser環(huán)境時(shí)的window Object.

當(dāng)function作為某一對(duì)象的 method 時(shí), this 代表這個(gè) function 所屬的 object

其實(shí)這里有個(gè)原則“javascript中的this永遠(yuǎn)指向其函數(shù)擁有者”或者“this指針代表的是執(zhí)行當(dāng)前代碼的對(duì)象的所有者”

說(shuō)到j(luò)avascript中的this就不能不提javascript中的函數(shù)，說(shuō)到j(luò)avascript中的函數(shù)就會(huì)涉及到閉包，我今天就以以下幾個(gè)方面研究下javascript中的this：

1 一般情況下的this

2 對(duì)象調(diào)用中的this

3 函數(shù)調(diào)用中的this

4 頁(yè)面dom事件對(duì)象中的this

5 大雜燴

正常情況下的this

正常情況下的this就是windows，我會(huì)亂說(shuō)？

 
 
 
 
  
  
  
  
var a = 1;  
  
  
  
  
alert(window.a); 
 
 
 

申明a其實(shí)就在window上申明的，其實(shí)我各位說(shuō)這些干嘛呢。。。。大家都知道呀，所以跳過(guò)算啦。

對(duì)象中的this

對(duì)象中的this情況相對(duì)復(fù)雜一點(diǎn)可能和我們后面的原型扯上關(guān)系，至于原因我們后面再說(shuō)，先看看下面這個(gè)例子：

 
 
 
 
  
  
  
  
var person = {  
  
  
  
  
    name: '葉小釵',  
  
  
  
  
    getName: function () {  
  
  
  
  
        var scope = this;  
  
  
  
  
        alert(scope.name);  
  
  
  
  
        var s = ''//無(wú)實(shí)際意義，用于設(shè)置斷點(diǎn)  
  
  
  
  
    }  
  
  
  
  
};  
  
  
  
  
person.getName(); 
 
 
 

這個(gè)例子亦很平常，仿佛一切理所當(dāng)然，當(dāng)我拿出來(lái)說(shuō)是想證明一件事情“this指向其函數(shù)擁有者”，這次擁有者為person所以打印葉小釵理所當(dāng)然

我們簡(jiǎn)單做下變形：

 
 
 
 
  
  
  
  
var name = '素還真';  
  
  
  
  
function global_getName() {  
  
  
  
  
    var scope = this;  
  
  
  
  
    return scope.name;  
  
  
  
  
    var s = ''//無(wú)實(shí)際意義，用于設(shè)置斷點(diǎn)  
  
  
  
  
}  
  
  
  
  
var person = {  
  
  
  
  
    name: '葉小釵',  
  
  
  
  
    getName: function () {  
  
  
  
  
        var scope = this;  
  
  
  
  
        return scope.name;  
  
  
  
  
        var s = ''//無(wú)實(shí)際意義，用于設(shè)置斷點(diǎn)  
  
  
  
  
    }  
  
  
  
  
};  
  
  
  
  
var s1 = global_getName();  
  
  
  
  
var s2 = person.getName();  
  
  
  
  
 
  
  
  
  
var s = ''; 
 
 
 

也沒(méi)任何問(wèn)題，好的我們?cè)僮鲆淮巫冃危?/p>

 
 
 
 
  
  
  
  
var name = '素還真';  
  
  
  
  
function global_getName() {  
  
  
  
  
    var scope = this;  
  
  
  
  
    return scope.name;  
  
  
  
  
    var s = ''//無(wú)實(shí)際意義，用于設(shè)置斷點(diǎn)  
  
  
  
  
}  
  
  
  
  
var person = {  
  
  
  
  
    name: '葉小釵',  
  
  
  
  
    getName: global_getName  
  
  
  
  
};  
  
  
  
  
var s1 = global_getName();  
  
  
  
  
var s2 = person.getName();  
  
  
  
  
 
  
  
  
  
var s = ''; 
 
 
 

我們看到getName被指向了global_getName，那我們?cè)僬{(diào)用person.getName會(huì)不會(huì)有所不同呢？

當(dāng)然不會(huì)了！我發(fā)現(xiàn)我自己被自己感動(dòng)了，完全在說(shuō)一些沒(méi)意義的東西，所以下面這種情況是不可能騙到大家的，我就不繞彎子了：

 
 
 
 
  
  
  
  
var name = '素還真';  
  
  
  
  
function global_getName() {  
  
  
  
  
    var scope = this;  
  
  
  
  
    return scope.name;  
  
  
  
  
    var s = ''//無(wú)實(shí)際意義，用于設(shè)置斷點(diǎn)  
  
  
  
  
}  
  
  
  
  
var person = {  
  
  
  
  
    name: '葉小釵',  
  
  
  
  
    getName: global_getName  
  
  
  
  
};  
  
  
  
  
var hehe = {  
  
  
  
  
    name: '笑吧',  
  
  
  
  
    getName: person.getName  
  
  
  
  
};  
  
  
  
  
 
  
  
  
  
var s1 = global_getName();//素還真  
  
  
  
  
var s2 = person.getName();//葉小釵  
  
  
  
  
var s3 = hehe.getName(); //笑吧 
 
 
 

函數(shù)中的this

要說(shuō)函數(shù)的話，我先說(shuō)說(shuō)javascript中函數(shù)調(diào)用有四種方式和函數(shù)中this的相關(guān)東東：

 
 
 
 
  
  
  
  
1 方法調(diào)用模式：作為對(duì)象屬性調(diào)用obj.func()  
  
  
  
  
2 函數(shù)調(diào)用模式：指向全局，直接調(diào)用 func()  
  
  
  
  
3 構(gòu)造器調(diào)用模式：new方式調(diào)用，會(huì)隱式創(chuàng)建一個(gè)新對(duì)象其隱藏鏈接至函數(shù)prototype成員  
  
  
  
  
4 call/apply調(diào)用模式：動(dòng)態(tài)改變this指向的怪咖 
 
 
 

 
 
 
 
  
  
  
  
函數(shù)代碼中this值的第一個(gè)特性（同時(shí)也是最主要的特性）就是：它并非靜態(tài)的綁定在函數(shù)上。  
  
  
  
  
 
  
  
  
  
正如此前提到的，this的值是在進(jìn)入執(zhí)行上下文（Excution context）的階段確定的，并且在函數(shù)代碼中的話，其值每次都不盡相同。  
  
  
  
  
 
  
  
  
  
然而，一旦進(jìn)入執(zhí)行代碼階段，其值就不能改變了。如果要想給this賦一個(gè)新的值是不可能的，因?yàn)樵谀菚r(shí)this根本就不是變量了。 
 
 
 

對(duì)于函數(shù)中this的設(shè)定被認(rèn)為是一個(gè)失誤，但誰(shuí)管他那么多呢。。。

現(xiàn)在回到正文，請(qǐng)看以下例子：

 
 
 
 
  
  
  
  
function func() {  
  
  
  
  
    var scope = this;  
  
  
  
  
    function s_func() {  
  
  
  
  
        var s_scope = this;  
  
  
  
  
        var s1 = scope;  
  
  
  
  
        var s2 = s_scope;  
  
  
  
  
        var s = '';  
  
  
  
  
    }  
  
  
  
  
    s_func();  
  
  
  
  
}  
  
  
  
  
this.func(); 
 
 
 

這里s1，s2都指向全局，這是為什么呢？我也不知道了，這里就去查詢了下資料：

“ 函數(shù)上下文中this的值是函數(shù)調(diào)用者提供并且由當(dāng)前調(diào)用表達(dá)式的形式而定的。如果在調(diào)用括號(hào)()的左邊有引用類型的值，那么this的值就會(huì)設(shè)置為該引用類型值的base對(duì)象。 所有其他情況下（非引用類型），this的值總是null。然而，由于null對(duì)于this來(lái)說(shuō)沒(méi)有任何意義，因此會(huì)隱式轉(zhuǎn)換為全局對(duì)象?！啊狫avascript this 的一些學(xué)習(xí)總結(jié)”當(dāng)調(diào)用括號(hào)的左邊不是引用類型而是其它類型，這個(gè)值自動(dòng)設(shè)置為null，結(jié)果為全局對(duì)象。“——深入理解JavaScript系列（13）：This? Yes,this!

我們隨便看一個(gè)變形：

 
 
 
 
  
  
  
  
var person = {  
  
  
  
  
    name: '葉小釵',  
  
  
  
  
    func: func  
  
  
  
  
};  
  
  
  
  
function func() {  
  
  
  
  
    var scope = this;  
  
  
  
  
    function s_func() {  
  
  
  
  
        var s_scope = this;  
  
  
  
  
        var obj = {};  
  
  
  
  
        obj.s1 = scope;  
  
  
  
  
        obj.s2 = s_scope;  
  
  
  
  
        return obj;  
  
  
  
  
    }  
  
  
  
  
    return s_func ();  
  
  
  
  
}  
  
  
  
  
 
  
  
  
  
var o = this.func();  
  
  
  
  
var o2 = person.func();  
  
  
  
  
var s = ''; 
 
 
 

這個(gè)應(yīng)該比較好理解這邊就不說(shuō)了。

#p#

構(gòu)造函數(shù)

以上說(shuō)那么多繞過(guò)去繞過(guò)來(lái)的大家一定累了吧，好吧，開心點(diǎn)，我們看看下面這個(gè)東西，我想你心情會(huì)好起來(lái)的?。?！

 
 
 
 
  
  
  
  
var name = 'window_葉小釵';  
  
  
  
  
 var Person = function (name) {  
  
  
  
  
     this.name = name;  
  
  
  
  
 };  
  
  
  
  
   
  
  
  
  
 Person('葉小釵');  
  
  
  
  
 var s1 = Person.name;  
  
  
  
  
 var o = new Person();  
  
  
  
  
   
  
  
  
  
 var s = ''; 
 
 
 

這是一段可怕的代碼，Person('葉小釵')事實(shí)上改變不了任何事情，但從某種意義上來(lái)說(shuō)Person也是對(duì)象，

所以他確確實(shí)實(shí)是存在name這個(gè)值的：

因?yàn)閠his.name是屬于該對(duì)象的子對(duì)象的屬性，若不實(shí)例化便休想染指

這個(gè)樣子寫又會(huì)有所不同，而且又產(chǎn)生了詭異的一幕：

 
 
 
 
  
  
  
  
var name = 'window_葉小釵';  
  
  
  
  
var Person = function (name) {  
  
  
  
  
    this.name = name;  
  
  
  
  
};  
  
  
  
  
Person.name = name;  
  
  
  
  
Person.name1 = name;  
  
  
  
  
var o = new Person('葉小釵');  
  
  
  
  
var s1 = Person.name;  
  
  
  
  
var s2 = Person.name1;  
  
  
  
  
var s3 = o.name;  
  
  
  
  
var s = ''; 
 
 
 

我們發(fā)現(xiàn)，由于Person中定義了this.name，外面無(wú)論怎么賦值都無(wú)效啦！

關(guān)于動(dòng)態(tài)指定this的call/apply

每個(gè)函數(shù)都有一個(gè)方法call可以動(dòng)態(tài)指定this指向，第一個(gè)參數(shù)便是this指向，不傳或者null更具前面說(shuō)的便是window，第二個(gè)參數(shù)為參數(shù)：

 
 
 
 
  
  
  
  
var name = 'window_葉小釵';  
  
  
  
  
 function getName() {  
  
  
  
  
     return this.name;  
  
  
  
  
 }  
  
  
  
  
 var person = { name: '葉小釵' };  
  
  
  
  
 var s1 = getName();  
  
  
  
  
 var s2 = getName.call();  
  
  
  
  
 var s3 = getName.call(null);  
  
  
  
  
 var s4 = getName.call(undefined);  
  
  
  
  
 var s5 = getName.call(person);  
  
  
  
  
 var s = ''; 
 
 
 

dom事件中的this

 
 
 
 
  
  
  
  
  
  
  
  
  
    點(diǎn)擊我試試