javaScript中的this示例學習詳解及工作原理_基礎知識

如果一個函數被作為一個對象的方法調用，那么this將被指派為這個對象。
代碼如下:
var parent = {
method: function () {
console.log(this);
}
};

parent.method();
// <- parent

注意這種行為非常“脆弱”，如果你獲取一個方法的引用并且調用，那么this的值不會是parent了，而是window全局對象。這讓大多數開發者迷惑。
代碼如下:
ThisClownCar();
// <- Window

改動this

.call、 .apply 和.bind 方法用來操作調用函數的方式，幫我們定義this的值和傳遞給函數的參數值。

Function.prototype.call 可以有任意數量的參數，第一個參數被分配給this，剩下的被傳遞給調用函數。

代碼如下:
Array.prototype.slice.call([1, 2, 3], 1, 2)
// <- [2]

Function.prototype.apply 的行為和.call類似，但它傳遞給函數的參數是一個數組，而不是任意參數。

String.prototype.split.apply('13.12.02', ['.'])
// <- ['13', '12', '02']

Function.prototype.bind 創建一個特殊的函數，該函數將永遠使用傳遞給.bind的參數作為this的值，以及能夠分配部分參數，創建原函數的珂里化（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將無法在作用域鏈中保持不變。這是規則的缺陷，并且常常會給業余開發者帶來困惑。

代碼如下:
function scoping () {
console.log(this);

return function () {
console.log(this);
};
}

scoping()();
// <- Window
// <- Window

有一個常見的方法，創建一個局部變量保持對this的引用，并且在子作用域中不能有同命變量。子作用域中的同名變量將覆蓋父作用域中對this的引用。http://www.cnblogs.com/sosoft/
代碼如下:
function retaining () {
var self = this;

return function () {
console.log(self);
};
}

retaining()();
// <- Window

除非你真的想同時使用父作用域的this,以及當前this值，由于某些莫名其妙的原因,我更喜歡是使用的方法.bind函數。這可以用來將父作用域的this指定給子作用域。

代碼如下:
function bound () {
return function () {
console.log(this);
}.bind(this);
}

bound()();
// <- Window

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com