javaScript中的this示例學(xué)習(xí)詳解及工作原理
this的工作原理
如果一個函數(shù)被作為一個對象的方法調(diào)用，那么this將被指派為這個對象。
var parent = {
method: function () {
console.log(this);
}
};
parent.method();
// <- parent
注意這種行為非常“脆弱”，如果你獲取一個方法的引用并且調(diào)用，那么this的值不會是parent了，而是window全局對象。這讓大多數(shù)開發(fā)者迷惑。
ThisClownCar();
// <- Window
改動this
.call、 .apply 和.bind 方法用來操作調(diào)用函數(shù)的方式，幫我們定義this的值和傳遞給函數(shù)的參數(shù)值。
Function.prototype.call 可以有任意數(shù)量的參數(shù)，第一個參數(shù)被分配給this，剩下的被傳遞給調(diào)用函數(shù)。
Array.prototype.slice.call([1, 2, 3], 1, 2)
// <- [2]
Function.prototype.apply 的行為和.call類似，但它傳遞給函數(shù)的參數(shù)是一個數(shù)組，而不是任意參數(shù)。
String.prototype.split.apply('13.12.02', ['.'])
// <- ['13', '12', '02']
Function.prototype.bind 創(chuàng)建一個特殊的函數(shù)，該函數(shù)將永遠(yuǎn)使用傳遞給.bind的參數(shù)作為this的值，以及能夠分配部分參數(shù)，創(chuàng)建原函數(shù)的珂里化（curride）版本。
var arr = [1, 2];
var add = Array.prototype.push.bind(arr, 3);
// effectively the same as arr.push(3)
add();
// effectively the same as arr.push(3, 4)
add(4);
console.log(arr);
// <- [1, 2, 3, 3, 4]
作用域鏈中的this
在下面的例子，this將無法在作用域鏈中保持不變。這是規(guī)則的缺陷，并且常常會給業(yè)余開發(fā)者帶來困惑。
function scoping () {
console.log(this);
return function () {
console.log(this);
};
}
scoping()();
// <- Window
// <- Window
有一個常見的方法，創(chuàng)建一個局部變量保持對this的引用，并且在子作用域中不能有同命變量。子作用域中的同名變量將覆蓋父作用域中對this的引用。http://www.cnblogs.com/sosoft/
function retaining () {
var self = this;
return function () {
console.log(self);
};
}
retaining()();
// <- Window
除非你真的想同時使用父作用域的this,以及當(dāng)前this值，由于某些莫名其妙的原因,我更喜歡是使用的方法.bind函數(shù)。這可以用來將父作用域的this指定給子作用域。
function bound () {
return function () {
console.log(this);
}.bind(this);
}
bound()();
// <- Window
相關(guān)文章
總結(jié)JavaScript在IE9之前版本中內(nèi)存泄露問題
本篇文章給大家總結(jié)了JavaScript在IE9之前版本中內(nèi)存泄露問題，對此有興趣的朋友可以學(xué)習(xí)下。2018-04-04
這篇文章主要介紹了多個javascript閉包入門示例，理解了這幾個例子，對于閉包，應(yīng)該可以算是入門了,需要的朋友可以參考下2014-04-04
這篇文章主要針對javascript中遞歸函數(shù)用法注意點做介紹，有需要小伙伴可以來學(xué)習(xí)下2015-07-07
如果在使用javascript的時候涉及到event處理，就需要知道event在不同的瀏覽器中的差異，主要的JavaScript的事件模型有三種（參考《Supporting Three Event Models at Once》），它們分別是NN4、IE4+和W3C/Safar。2014-06-06
JavaScript高級程序設(shè)計（第3版）學(xué)習(xí)筆記3 js簡單數(shù)據(jù)類型
數(shù)據(jù)類型是編程語言的磚瓦，是所有你能想象到的復(fù)雜抽象的基礎(chǔ)，在現(xiàn)代編程語言中，除了語言本身內(nèi)置的一些簡單數(shù)據(jù)類型外，基本上都提供了用于自定義數(shù)據(jù)類型的語言機制（在C中也可以利用結(jié)構(gòu)體來實現(xiàn)），這些機制在一定程度上也決定了該語言的流行度和生命力2012-10-10
JavaScript中將數(shù)組進行合并的基本方法講解
這篇文章主要介紹了JavaScript中將數(shù)組進行合并的基本方法講解,包括快速合并多個數(shù)組的方法,需要的朋友可以參考下2016-03-03
這篇文章主要介紹JavaScript編程中的對象概念,也是JS面向?qū)ο缶幊痰幕A(chǔ)知識,需要的朋友可以參考下2015-10-10
javascript Window及document對象詳細(xì)整理
注:頁面上元素name屬性以及JavaScript引用的名稱必須一致包括大小寫否則會提示你1個錯誤信息 引用的元素為空或者不是對象2011-01-01
本文介紹了javascript中的5個原始值（數(shù)字，字符，布爾，null,undefined），6個typeo能判斷（數(shù)字，字符，布爾，object,function,undefined）以及9個原生的內(nèi)置構(gòu)造函數(shù)，是篇非常不錯的文章，這里推薦給大家。2014-11-11
JavaScript中循環(huán)遍歷Array與Map的方法小結(jié)
這篇文章主要介紹了JavaScript中循環(huán)遍歷Array與Map的各種方法,利用的都是js入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2016-03-03