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)文章
本文為大家介紹下js中的對象聲明方式以及數(shù)組的一些用法，下面有個不錯的示例，感興趣的朋友可以參考下，希望對大家有所幫助2013-12-12
JavaScript 學(xué)習(xí)筆記之變量及其作用域
前篇文章我們介紹了學(xué)習(xí)javascript所需要的基礎(chǔ)中的基礎(chǔ)知識，今天我們來更進(jìn)一步，學(xué)習(xí)下javascript變量及其作用域，希望小伙伴們通過本文能夠有所得。2015-01-01
window.onload和$(function(){})的區(qū)別介紹
window.onload和$(function(){})有什么區(qū)別。window.onload表示頁面加載完了后（包括dom和js），再執(zhí)行函數(shù)里面的內(nèi)容，感興趣的朋友可以了解下2013-10-10
本文向大家簡單介紹了javascript事件的屬性列表，非常的詳細(xì)，推薦給有相同需求的小伙伴們。2015-03-03
這篇文章介紹了JavaScript中的數(shù)據(jù)類型，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了JS之作用域和閉包的相關(guān)知識，文中講解非常詳細(xì)，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
javascript 中__proto__和prototype詳解
本文詳細(xì)介紹了javascript的內(nèi)部原型__proto__和構(gòu)造器原型prototype，以及他們之間的異同，十分的詳盡，有需要的小伙伴快來研究下吧。2014-11-11
經(jīng)常在網(wǎng)頁html代碼中看見這樣的嵌入標(biāo)簽，但實際使用沒有用過，特此在記錄下。2010-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript對象的淺拷貝和深拷貝代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下.2016-10-10
Javascript模塊化編程(一)AMD規(guī)范(規(guī)范使用模塊)
這個系列的第一部分介紹了Javascript模塊的基本寫法，今天介紹如何規(guī)范地使用模塊,先想一想，為什么模塊很重要？接下來為您詳細(xì)介紹，感興趣的朋友可以了解下啊2013-01-01