建站
咨詢
售后
建站咨詢
新聞中心
題記：JavaScript中有很多令人困惑的地方，或者叫做機(jī)制。但是，就是這些東西讓JavaScript顯得那么美好而與眾不同。比方說(shuō)函數(shù)也是對(duì)象、閉包、原型鏈繼承等等，而這其中就包括頗讓人費(fèi)解的this機(jī)制。不管是新手還是老手，不仔細(xì)深摳一下還真鬧不明白this倒地咋回事捏。今天，我們就一起看一下this倒地咋回事，別再為了this發(fā)愁了。
在志丹等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作定制開(kāi)發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),成都全網(wǎng)營(yíng)銷推廣,外貿(mào)網(wǎng)站制作,志丹網(wǎng)站建設(shè)費(fèi)用合理。
1、this是啥?
簡(jiǎn)言之，this是JavaScript語(yǔ)言中定義的眾多關(guān)鍵字之一，它的特殊在于它自動(dòng)定義于每一個(gè)函數(shù)域內(nèi)，但是this倒地指引啥東西卻讓很多人張二摸不著頭腦。這里我們留個(gè)小懸念，希望看完這篇文章了你能回答出來(lái)this到底指引個(gè)甚。
2、this有啥用?
那邊觀眾又該問(wèn)了，既然this這么難以理解，那么為個(gè)甚還要用它呢?我們來(lái)看個(gè)例子：
- function identify() {
- return this.name.toUpperCase();
- }
- function sayHello() {
- var greeting = "Hello, I'm " + identify.call( this );
- console.log( greeting );
- }
- var person1= {
- name: "Kyle"
- };
- var person2= {
- name: "Reader"
- };
- identify.call( person1); // KYLE
- identify.call( person2); // READER
- sayHello.call( person1); // Hello, I'm KYLE
- sayHello.call( person2); // Hello, I'm READER
這段代碼很簡(jiǎn)單，我們定義了兩個(gè)函數(shù)，分別為identify和sayHello。并且在不同的對(duì)象環(huán)境下執(zhí)行了它們，達(dá)到了復(fù)用的效果，而不用為了在不同的對(duì)象環(huán)境下執(zhí)行而必須針對(duì)不同的對(duì)象環(huán)境寫(xiě)對(duì)應(yīng)的函數(shù)了。簡(jiǎn)言之，this給函數(shù)帶來(lái)了復(fù)用。那邊客官又問(wèn)了，我不用this一樣可以實(shí)現(xiàn)，如：
- function identify(context) {
- return context.name.toUpperCase();
- }
- function sayHello(context) {
- var greeting = "Hello, I'm " + identify( context);
- console.log( greeting );
- }
- var person1= {
- name: "Kyle"
- };
- var person2= {
- name: "Reader"
- };
- identify( person1); // KYLE
- identify( person2); // READER
- sayHello( person1); // Hello, I'm KYLE
- sayHello( person2); // Hello, I'm READER
仔細(xì)一看，這位客官給出的解決方法的確也達(dá)到了類似的效果。贊一個(gè)!我想說(shuō)的是，隨著代碼的增加，函數(shù)嵌套、各級(jí)調(diào)用等變得越來(lái)越復(fù)雜，那么傳遞一個(gè)對(duì)象的引用將變得越來(lái)越不明智，它會(huì)把你的代碼弄得非常亂，甚至你自己都無(wú)法理解清楚。而this機(jī)制提供了一個(gè)更加優(yōu)雅而靈便的方案，傳遞一個(gè)隱式的對(duì)象引用讓代碼變得更加簡(jiǎn)潔和復(fù)用。好了，知道了this的用處，那么再看看我們對(duì)它的誤解。
3、關(guān)于this的誤解
相信很多童鞋是學(xué)過(guò)其它語(yǔ)言的，在很多編程語(yǔ)言中都有this的機(jī)制，慣性思維把其它語(yǔ)言里對(duì)它的理解帶到了JavaScript中。同時(shí)，由于this這個(gè)單詞的理解導(dǎo)致了我們產(chǎn)生了對(duì)它各種各樣的誤解。所以，開(kāi)始前，我們先澄清下對(duì)它的誤解。
3.1 誤解一：this引用function本身
我們都知道，在函數(shù)里引用函數(shù)可以達(dá)到遞歸和給函數(shù)屬性賦值的效果。而這在很多應(yīng)用場(chǎng)景下顯得非常有用。所以，很多人都誤以為this就是指引function本身。例如：
- function fn(num) {
- console.log( "fn: " + num );
- // count用于記錄fn的被調(diào)用次數(shù)
- this.count++;
- }
- fn.count = 0;
- var i;
- for (i=0; i<10; i++) {
- if (i > 5) {
- fn( i );
- }
- }
- // fn: 6
- // fn: 7
- // fn: 8
- // fn: 9
- console.log( fn.count ); // 0 -- 耶？咋不是4捏？
上面我們想要記錄fn被調(diào)用的次數(shù)，可是明顯fn被調(diào)用了四次但count仍然為0。咋回事捏?這里簡(jiǎn)單解釋下，fn里第4行的自增隱式的創(chuàng)建了一個(gè)全局變量count，由于初始值為undefined，所以每一次自增其實(shí)依然不是一個(gè)數(shù)字，你在全局環(huán)境下打印count(window.count)輸出的應(yīng)該是NaN。而第6行定義的函數(shù)熟悉變量count依然沒(méi)變，還是0。如果對(duì)這個(gè)執(zhí)行結(jié)果不清楚的，歡迎去看我前些天的那篇博文(聊一下JS中的作用域scope和閉包c(diǎn)losure scope和closure)，在這里你只需要知道，this引用的是function這種理解是錯(cuò)誤的就行。
這邊就會(huì)又有人問(wèn)了，既然this不是引用function，那么我要實(shí)現(xiàn)遞歸函數(shù)，該咋引用呢?這里簡(jiǎn)單回答下介個(gè)問(wèn)題，兩種方法：①函數(shù)體內(nèi)用函數(shù)名來(lái)引用函數(shù)本身②函數(shù)體內(nèi)使用arguments.callee來(lái)引用函數(shù)(不推薦)。那么既然第二種方法不推薦，匿名函數(shù)咋引用呢?用***種，并且給匿名函數(shù)一個(gè)函數(shù)名即可(推薦)。
3.2 誤解二：this引用的是function的詞法作用域
這種誤解欺騙的人可能更多一些。首先，澄清一下，this并沒(méi)有引用function的詞法作用域。的確JS的引擎內(nèi)對(duì)詞法作用域的實(shí)現(xiàn)的確像是一個(gè)對(duì)象，擁有屬性和函數(shù)，但是這僅僅是JS引擎的一種實(shí)現(xiàn)，對(duì)代碼來(lái)說(shuō)是不可見(jiàn)的，也就是說(shuō)詞法作用域“對(duì)象”在JS代碼中取不到。(關(guān)于詞法作用域，如果不理解，可以參考之前的一篇博文《聊一下JS中的作用域scope和閉包c(diǎn)losure scope和closure》)?？磦€(gè)錯(cuò)誤的例子：
- function fn1() {
- var a = 2;
- this.fn2();//以為this引用的是fn1的詞法作用域
- }
- function fn2() {
- console.log( this.a );
- }
- fn1(); //ReferenceError
上面的代碼明顯沒(méi)有執(zhí)行出想要的結(jié)果，從而可以看到this并沒(méi)有引用函數(shù)的詞法作用域。甚至，可以肯定的說(shuō)，這個(gè)例子里fn2可以在fn1里正確執(zhí)行都是偶然的(理解了詞法作用域你就知道為什么這里執(zhí)行不報(bào)錯(cuò)了)。
4、this到底跟啥有關(guān)?
好了，扯了那么多都沒(méi)上干貨，有的觀眾都開(kāi)始關(guān)閉當(dāng)前頁(yè)開(kāi)始離席了。這里，我們鄭重聲明：this跟函數(shù)在哪里定義沒(méi)有半毛錢關(guān)系，函數(shù)在哪里調(diào)用才決定了this到底引用的是啥。也就是說(shuō)this跟函數(shù)的定義沒(méi)關(guān)系，跟函數(shù)的執(zhí)行有大大的關(guān)系。所以，記住，“函數(shù)在哪里調(diào)用才決定了this到底引用的是啥”。
5、this機(jī)制的四種規(guī)則
this到底綁定或者引用的是哪個(gè)對(duì)象環(huán)境決定于函數(shù)被調(diào)用的地方。而函數(shù)的調(diào)用有不同的方式，在不同的方式中調(diào)用決定this引用的是哪個(gè)對(duì)象是由四種規(guī)則確定的。我們一個(gè)個(gè)來(lái)看。
5.1 默認(rèn)綁定全局變量
這條規(guī)則是最常見(jiàn)的，也是默認(rèn)的。當(dāng)函數(shù)被單獨(dú)定義和調(diào)用的時(shí)候，應(yīng)用的規(guī)則就是綁定全局變量。如下：
- function fn() {
- console.log( this.a );
- }
- var a = 2;
- fn(); // 2 -- fn單獨(dú)調(diào)用，this引用window
5.2 隱式綁定
隱式調(diào)用的意思是，函數(shù)調(diào)用時(shí)擁有一個(gè)上下文對(duì)象，就好像這個(gè)函數(shù)是屬于該對(duì)象的一樣。例如：
- function fn() {
- console.log( this.a );
- }
- var obj = {
- a: 2,
- fn: fn
- };
- obj.fn(); // 2 -- this引用obj。
需要說(shuō)明的一點(diǎn)是，***一個(gè)調(diào)用該函數(shù)的對(duì)象是傳到函數(shù)的上下文對(duì)象(繞懵了)。如：
- function fn() {
- console.log( this.a );
- }
- var obj2 = {
- a: 42,
- fn: fn
- };
- var obj1 = {
- a: 2,
- obj2: obj2
- };
- obj1.obj2.fn(); // 42 -- this引用的是obj2.
還有一點(diǎn)要說(shuō)明的是，失去隱式綁定的情況，如下：
- function fn() {
- console.log( this.a );
- }
- var obj = {
- a: 2,
- fn: fn
- };
- var bar = obj.fn; // 函數(shù)引用傳遞
- var a = "全局"; // 定義全局變量
- bar(); // "全局"
如上，第8行雖然有隱式綁定，但是它執(zhí)行的效果明顯是把fn賦給bar。這樣bar執(zhí)行的時(shí)候，依然是默認(rèn)綁定全局變量，所以輸出結(jié)果如上。
5.3 顯示綁定
學(xué)過(guò)bind()\apply()\call()函數(shù)的都應(yīng)該知道，它接收的***個(gè)參數(shù)即是上下文對(duì)象并將其賦給this?？聪旅娴睦樱?/p>
- function fn() {
- console.log( this.a );
- }
- var obj = {
- a: 2
- };
- fn.call( obj ); // 2
如果我們傳遞***個(gè)值為簡(jiǎn)單值，那么后臺(tái)會(huì)自動(dòng)轉(zhuǎn)換為對(duì)應(yīng)的封裝對(duì)象。如果傳遞為null，那么結(jié)果就是在綁定默認(rèn)全局變量，如：
- function fn() {
- console.log( this.a );
- }
- var obj = {
- a: 2
- };
- var a = 10;
- fn.call( null); // 10
5.4 new新對(duì)象綁定
如果是一個(gè)構(gòu)造函數(shù)，那么用new來(lái)調(diào)用，那么綁定的將是新創(chuàng)建的對(duì)象。如：
- function fn(a) {
- this.a = a;
- }
- var bar = new fn( 2 );
- console.log( bar.a );// 2
注意，一般構(gòu)造函數(shù)名首字母大寫(xiě)，這里沒(méi)有大寫(xiě)的原因是想提醒讀者，構(gòu)造函數(shù)也是一般的函數(shù)而已。
6、結(jié)束語(yǔ)
讀到現(xiàn)在，1中問(wèn)的問(wèn)題你該自己能回答上來(lái)了。上面介紹的四種關(guān)于this綁定的4中情況和規(guī)則，現(xiàn)實(shí)寫(xiě)代碼的過(guò)程中肯定比這要多和復(fù)雜，但是無(wú)論多復(fù)雜多亂，它們都是混合應(yīng)用上面的幾個(gè)規(guī)則和情況而已。只要你的思路和理解是清晰的，那肯定沒(méi)問(wèn)題的。
網(wǎng)頁(yè)題目：別再為了this發(fā)愁了：JS中的this機(jī)制
文章路徑：http://www.dlmjj.cn/article/djjgsgp.html
