詳解JavaScript中this關(guān)鍵字的用法
this是函數(shù)內(nèi)部的一個(gè)特殊對(duì)象,this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象(關(guān)于環(huán)境對(duì)象我們會(huì)在文章最后作補(bǔ)充說明),在調(diào)用函數(shù)前this的值并不確定,不同的調(diào)用方式會(huì)導(dǎo)致this值的改變。
window.num = 22; var o = {num: 11}; function sayNum(){ alert(this.num) } sayNum();//22 o.sayNum = sayNum; o.sayNum();//11
記住:函數(shù)名僅僅是一個(gè)包含指針的變量而已。因此即使是在不同的環(huán)境中執(zhí)行,全局的sayNum()函數(shù)與o.sayNum()指向的仍然是同一個(gè)函數(shù)。
1.全局作用域中調(diào)用函數(shù)時(shí)
全局作用域中調(diào)用,this對(duì)象引用的是window
匿名函數(shù)的執(zhí)行具有全局性,因此其this對(duì)象通常也指向window
function fn1(){ console.log(this); } fn1();
2.通過new操作符調(diào)用
this引用的是實(shí)例對(duì)象
function Person(name){ this.name = name; } Person.prototype.printName = function(){ alert(this.name);//Byron }; var p1 = new Person('Byron');
3.作為對(duì)象的方法調(diào)用
this引用的是該對(duì)象
var obj1 = { name: 'Byron', fn : function(){ console.log(this); } }; obj1.fn();
4.間接調(diào)用
call和apply
每個(gè)函數(shù)都包含兩個(gè)非繼承而來的方法:call()和apply()。這兩個(gè)方法的用途都是在特定的作用域中調(diào)用函數(shù),實(shí)際上等于設(shè)置函數(shù)體內(nèi)this對(duì)象的值。也就是說,直接調(diào)用函數(shù),調(diào)用時(shí)指定執(zhí)行環(huán)境是誰(shuí)
window.color = 'red'; var o = {color: 'blue'}; function sayColor(){ alert(this.color); } sayColor.call(this);//red sayColor.call(window);//red sayColor.call(o);//blue
(1)apply方法
接收兩個(gè)參數(shù),一個(gè)是在函數(shù)中運(yùn)行函數(shù)的作用域,另一個(gè)是參數(shù)數(shù)組。
(2)call方法
call方法與apply方法相同,區(qū)別在于接收參數(shù)的方式不同,對(duì)于call方法而言,第一個(gè)參數(shù)是this值沒有變化,變化的是其余參數(shù)都直接傳遞給函數(shù)。
function fn(){ console.log(this)//windwow function InnerFn(){ console.log(this) } InnerFn.call(this)//window } fn(); function fn0(){ console.log(this)//window } function fn1(){ fn0.call(this); console.log(this);//window } fn1(); function fn0(){ console.log(this)//object } var o = { fn1: function fn1(){ fn0.call(this); console.log(this);//object } } o.fn1();
5.bind方法
這個(gè)方法會(huì)創(chuàng)建一個(gè)函數(shù)的實(shí)例,其this值會(huì)被綁定到傳給bind()函數(shù)的值。也就是說會(huì)返回一個(gè)新函數(shù),并且使函數(shù)內(nèi)部的this為傳入的第一個(gè)參數(shù)
window.color = 'red'; var o = {color : 'blue'}; function sayColor(){ alert(this.color) } var objectSayColor = sayColor.bind(o); objectSayColor();//blue
補(bǔ)充說明:執(zhí)行環(huán)境定義
定義了變量或者函數(shù)有權(quán)訪問的其他數(shù)據(jù),每個(gè)執(zhí)行環(huán)境都有一個(gè)與之相關(guān)聯(lián)的變量對(duì)象,環(huán)境中定義的所有變量和函數(shù)都保存在這個(gè)對(duì)象中。我們編寫的代碼無法訪問這個(gè)對(duì)象,但解析器會(huì)在處理數(shù)據(jù)時(shí)在后臺(tái)使用它。
一、執(zhí)行環(huán)境的創(chuàng)建:
1.全局執(zhí)行環(huán)境
在web瀏覽器中,全局執(zhí)行環(huán)境被認(rèn)為是window對(duì)象,因此所有全局變量和函數(shù)都是作為window對(duì)象的屬性和方法創(chuàng)建的。代碼載入瀏覽器時(shí),全局執(zhí)行環(huán)境被創(chuàng)建(當(dāng)我們關(guān)閉網(wǎng)頁(yè)或者瀏覽器時(shí)全局執(zhí)行環(huán)境才被銷毀)。
2.局部執(zhí)行環(huán)境
每個(gè)函數(shù)都有自己的執(zhí)行環(huán)境,因此局部執(zhí)行環(huán)境為函數(shù)對(duì)象。當(dāng)函數(shù)被調(diào)用時(shí)函數(shù)的局部環(huán)境被創(chuàng)建(函數(shù)內(nèi)的代碼執(zhí)行完畢后,該環(huán)境被銷毀,同時(shí)保存在其中的所有變量和函數(shù)定義也隨之被銷毀)。
這個(gè)執(zhí)行環(huán)境以及相關(guān)的變量對(duì)象是個(gè)抽象的概念,解釋如下
var a = 1; function fn(num1,num2){ var b = 2; function fnInner(){ var c = 3; alert(a + b + c); } fnInner();//fnInner調(diào)用時(shí)局部執(zhí)行環(huán)境創(chuàng)建 } fn(4,5);//fn調(diào)用時(shí)局部執(zhí)行環(huán)境創(chuàng)建
二、作用域鏈
javascript函數(shù)的執(zhí)行用到了作用域鏈,這個(gè)作用域鏈?zhǔn)呛瘮?shù)定義的時(shí)候創(chuàng)建的,當(dāng)定義一個(gè)函數(shù)時(shí),它實(shí)際保存一個(gè)作用域鏈。當(dāng)調(diào)用這個(gè)函數(shù)時(shí),它創(chuàng)建一個(gè)新的對(duì)象來存儲(chǔ)它的局部變量,并將這個(gè)對(duì)象添加至保存的作用域鏈。作用域鏈的前端始終都是當(dāng)前執(zhí)行的代碼所在環(huán)境的變量對(duì)象。作用域鏈的末端始終都是全局執(zhí)行環(huán)境的變量對(duì)象。作用域鏈的用途,是保證對(duì)執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有權(quán)訪問
var scope = 'global scope'; function checkscope(){ var scope = 'local scope'; function f(){return scope}; return f; } checkscope()();//local scope
理解:當(dāng)調(diào)用checkscope時(shí),函數(shù)f被定義并作為局部變量綁定到了checkscope作用域鏈上,因此函數(shù)f無論在哪里調(diào)用,這種綁定依然有效,因此返回值為local scope。
var num1 = 1; function Outer(){ var num2 = 2; console.log(num1 + num2);//3 function Inner(){ //這里可以訪問num3,num2,num1 var num3 = 3; console.log(num1 + num2 + num3);//6 } //這里可以訪問num2,Inner(),num1但不能訪問num3 Inner(); } Outer(); console.log(num1);//1,執(zhí)行環(huán)境 //這里只能訪問num1
作用域鏈(向上搜索):內(nèi)部環(huán)境可以通過作用域鏈訪問所有的外部環(huán)境,但外部環(huán)境不能訪問內(nèi)部環(huán)境中的任何變量和函數(shù)。
var name = 'Byron'; function fn(){ var name = 'Csper'; console.log(name);//Casper } fn();
越往內(nèi)部的環(huán)境,變量權(quán)重越高。
注意:沒有帶var關(guān)鍵字直接聲明的變量屬于全局變量如直接聲明a = 1,此時(shí)的a為全局變量。
javscript引擎在進(jìn)入作用域時(shí),會(huì)對(duì)代碼分兩輪處理。第一輪,初始化變量。第二輪,執(zhí)行代碼
var a = 1; function prison (a) { console.log(a);//1 var a; console.log(a);//1 } prison(1);
三、函數(shù)執(zhí)行
函數(shù)調(diào)用進(jìn)入執(zhí)行環(huán)境時(shí),首先處理arguments,初始化形參(默認(rèn)值為undefined),然后初始化函數(shù)內(nèi)的函數(shù)聲明,當(dāng)代碼一步一步執(zhí)行時(shí)再初始化函數(shù)內(nèi)的變量聲明(進(jìn)入環(huán)境未開始執(zhí)行代碼時(shí),值為undefined)。所以函數(shù)內(nèi)的初始化順序?yàn)樾螀ⅲ瘮?shù)聲明,變量聲明??梢詮纳蠄D圖一看出。下面我來舉個(gè)例子(整個(gè)全局環(huán)境也是函數(shù))。
alert(typeof fn);//function,函數(shù)聲明提前 alert(typeof fn0);//undefined,變量聲明提前但未賦值 function fn(){ //函數(shù)表達(dá)式 } var fn0 = function(){ //函數(shù)定義式 } alert(typeof fn0);//function,此時(shí)變量已被賦值
相關(guān)文章
JavaScript字符串對(duì)象toLowerCase方法入門實(shí)例(用于把字母轉(zhuǎn)換為小寫)
這篇文章主要介紹了JavaScript字符串對(duì)象toLowerCase方法入門實(shí)例,toLowerCase方法用于把字母字符串轉(zhuǎn)換為小寫形式,需要的朋友可以參考下2014-10-10js限制文本框輸入長(zhǎng)度兩種限制方式(長(zhǎng)度、字節(jié)數(shù))
在實(shí)際應(yīng)用中根據(jù)需要會(huì)用到文本框限制字符長(zhǎng)度,以些新手朋友有們可能還不清楚如何應(yīng)付,本人搜集整理了一些常用技巧,曬出來和大家分享一下,希望可以幫助你們2012-12-12在JavaScript中處理時(shí)間之setMinutes()方法的使用
這篇文章主要介紹了在JavaScript中處理時(shí)間之setMinutes()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06