JavaScript中的this,call,apply使用及區(qū)別詳解
學(xué)習(xí)起因:
在之前的JavaScript學(xué)習(xí)中,this,call,apply總是讓我感到迷惑,但是他們的運用又非常的廣泛。遂專門花了一天,來弄懂JavaScript的this,call,apply。
中途參考的書籍也很多,以《JavaScript設(shè)計模式與開發(fā)實踐》為主,《JavaScript高級程序設(shè)計》、《你不知道的JavaScript》為輔。這三本書對我理解this,call,apply都起了很大的幫助。
this
首先,我們先講述this。
在《JavaScript設(shè)計模式與開發(fā)實踐》關(guān)于this的描述中,我認(rèn)為有一句話切中了this的核心要點。那就是:
JavaScript的this總是指向一個對象
具體到實際應(yīng)用中,this的指向又可以分為以下四種:
- 作為對象的方法調(diào)用
- 作為普通函數(shù)調(diào)用
- 構(gòu)造器調(diào)用
- apply和call調(diào)用
接下來我們?nèi)テ饰銮?點,至于第4點的apply和call調(diào)用,會在call和apply部分詳細(xì)講解。
1.作為對象的方法調(diào)用
說明:作為對象方法調(diào)用時,this指向該對象。
舉例:
/** * 1.作為對象的方法調(diào)用 * * 作為對象方法調(diào)用時,this指向該對象。 */ var obj = { a: 1, getA: function() { console.log(this === obj); console.log(this.a); } }; obj.getA(); // true , 1
2.作為普通函數(shù)調(diào)用
說明:作為普通函數(shù)調(diào)用時,this總是指向全局對象(瀏覽器中是window)。
舉例:
/** * 2.作為普通函數(shù)調(diào)用 * * 不作為對象屬性調(diào)用時,this必須指向一個對象。那就是全局對象。 */ window.name = 'globalName'; var getName = function() { console.log(this.name); }; getName(); // 'globalName' var myObject = { name: "ObjectName", getName: function() { console.log(this.name) } }; myObject.getName(); // 'ObjectName' // 這里實質(zhì)上是把function() {console.log(this.name)} // 這句話賦值給了theName。thisName在全局對象中調(diào)用,自然讀取的是全局對象的name值 var theName = myObject.getName; theName(); // 'globalName'
3.構(gòu)造器調(diào)用
說明:作為構(gòu)造器調(diào)用時,this指向返回的這個對象。
舉例:
/** * 3.作為構(gòu)造器調(diào)用 * * 作為構(gòu)造器調(diào)用時,this指向返回的這個對象。 */ var myClass = function() { this.name = "Lxxyx"; }; var obj = new myClass(); console.log(obj.name); // Lxxyx console.log(obj) // myClass {name: "Lxxyx"}
但是如果構(gòu)造函數(shù)中手動指定了return其它對象,那么this將不起作用。
如果return的是別的數(shù)據(jù)類型,則沒有問題。
var myClass = function() { this.name = "Lxxyx"; // 加入return時,則返回的是別的對象。this不起作用。 return { name:"ReturnOthers" } }; var obj = new myClass(); console.log(obj.name); // ReturnOthers
4.Call和Apply
Call和Apply的用途一樣。都是用來指定函數(shù)體內(nèi)this的指向。
Call和Apply的區(qū)別
Call:第一個參數(shù)為this的指向,要傳給函數(shù)的參數(shù)得一個一個的輸入。
Apply:第一個參數(shù)為this的指向,第二個參數(shù)為數(shù)組,一次性把所有參數(shù)傳入。
如果第一個參數(shù)為null,則this指向調(diào)用的本身。
1.改變this指向
說明:這是call和apply最常用的用途了。用于改變函數(shù)體內(nèi)this的指向。
舉例:
var name = "GlobalName" var func = function() { console.log(this.name) }; func(); // "GlobalName" var obj = { name: "Lxxyx", getName: function() { console.log(this.name) } }; obj.getName.apply(window) // "GlobalName" 將this指向window func.apply(obj) // "Lxxyx" 將this指向obj
2.借用其它對象的方法
這兒,我們先以一個立即執(zhí)行匿名函數(shù)做開頭:
(function(a, b) { console.log(arguments) // 1,2 // 調(diào)用Array的原型方法 Array.prototype.push.call(arguments, 3); console.log(arguments) // 1,2,3 })(1,2)
函數(shù)具有arguments屬性,而arguments是一個類數(shù)組。
但是arguments是不能直接調(diào)用數(shù)組的方法的,所以我們要用call或者apply來調(diào)用Array對象的原型方法。
原理也很容易理解,比如剛才調(diào)用的是push方法,而push方法在谷歌的v8引擎中,源代碼是這樣的:
function ArrayPush() { var n = TO_UINT32(this.length); // 被push對象的長度 var m = % _ArgumentsLength(); // push的參數(shù)個數(shù) for (var i = 0; i < m; i++) { this[i + n] = % _Arguments(i); // 復(fù)制元素 } this.length = n + m; //修正length屬性 return this.length; }
它只與this有關(guān),所以只要是類數(shù)組對象,都可以調(diào)用相關(guān)方法去處理。
這部分內(nèi)容比較復(fù)雜,再加上自己水平也不太夠。所以推薦有條件的同學(xué)去購買相關(guān)書籍,或者等我的后續(xù)博客文章。
感想
通過對這部分的學(xué)習(xí),算是加深了對JavaScript的理解。最直觀的表現(xiàn)就是,去看一些優(yōu)秀框架的源代碼時,不再是被this,call,apply,bind繞的暈乎乎的。還是很開心的~
下一段時間,準(zhǔn)備深入探索一下日常學(xué)習(xí)和使用的CSS。畢竟JavaScript學(xué)了,HTML和CSS也不能落下。
- JavaScript中的apply()方法和call()方法使用介紹
- js中繼承的幾種用法總結(jié)(apply,call,prototype)
- javascript中apply和call方法的作用及區(qū)別說明
- 詳解js中的apply與call的用法
- JS中改變this指向的方法(call和apply、bind)
- JavaScript中的apply和call函數(shù)詳解
- js中call與apply的用法小結(jié)
- js apply/call/caller/callee/bind使用方法與區(qū)別分析
- JS面向?qū)ο?、prototype、call()、apply()
- JavaScript學(xué)習(xí)點滴 call、apply的區(qū)別
- 詳解JS中的this、apply、call、bind(經(jīng)典面試題)
- 淺談javascript中call()、apply()、bind()的用法
- JavaScript中apply與call的用法意義及區(qū)別說明
- js中apply()和call()的區(qū)別與用法實例分析
- 跟我學(xué)習(xí)javascript的call(),apply(),bind()與回調(diào)
- javascript call和apply方法
- 深入理解JavaScript中的call、apply、bind方法的區(qū)別
- 再談JavaScript中bind、call、apply三個方法的區(qū)別與使用方式
相關(guān)文章
js之WEB開發(fā)調(diào)試?yán)?Firebug 下載
js之WEB開發(fā)調(diào)試?yán)?Firebug 下載...2007-01-01原生js實現(xiàn)獲取form表單數(shù)據(jù)代碼實例
這篇文章主要介紹了原生js實現(xiàn)獲取form表單數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03在javascript中關(guān)于節(jié)點內(nèi)容加強
本篇文章,小編為大家介紹,關(guān)于在javascript中關(guān)于節(jié)點內(nèi)容加強的問題2013-04-04Dojo Javascript 編程規(guī)范 規(guī)范自己的JavaScript書寫
良好的JavaScript書寫習(xí)慣的優(yōu)點不言而喻,今天彬Go向大家推薦Dojo Javascript 編程規(guī)范,相當(dāng)不錯的 Javascript 編程風(fēng)格規(guī)范,建議大家可以借鑒一下此規(guī)范編寫 Javascript。感謝i.feelinglucky的翻譯2014-10-10