javascript this詳細介紹_基礎知識

this的值是在運行時確定的

JS中的this究竟代表什麼，這是在程式運行時根據上下文環境確定，可以分為以下幾種情況。

1. 全域範圍中的this

在全域範圍中，this指向window對象。

console.log(this);//指向window對象this.x = 5//在全域範圍內建立一個x//與this.x = 5的等價情況：//var x = 5;//x = 5;

在全域範圍中執行var x=5，其實是為window對象建立一個屬性x，並令其等於5。

若定義變數時不加var，JS會認為該變數為全域變數，會將其當作window對象的屬性。

2. 函數中的this

JS中函數有兩種，直接調用的函數稱為普通函數，通過new建立對象的函數稱為建構函式。

2.1 建構函式中的this

建構函式的this指向它所建立的對象，如：

function Person(name){  this.name = name;//this指向該函數建立的對象person}var person = new Person("chaimm");

2.2 普通函數中的this

普通函數的this指向window對象。
若上述例子，直接執行Perosn函數，則其中this代表window對象，因此該函數執行後會建立一個全域的name。

function Person(name){  this.name = name;//this指向window}Person("chai");//當作普通函數執行，this指向window對象

3. 對象中的this

對象中的this指向當前對象，如：

var person = {  name : "chaimm",  getName : function(){    return this.name;  }}

上述代碼中this指向函數getName所屬的對象。

但是，如果一個對象的函數中又嵌套了一個函數，這個函數的this指向的卻是window，而並不是其外層的對象。

var person = {  name : "chaimm",  setName : function(name){    (function(name){      this.name = name; //此時this並不代表person對象，而是代表window對象    })(name);  }}

上述樣本中，person對象中有一個getName函數，而getName函數內部又有一個函數，這個函數內部的this指向window對象，而非person對象，這是JS的一個bug！一般作如下處理，規避這個bug：

var person = {  name : "chaimm",  setName : function(name){    var thar = this;//將this賦給that    (function(name){      that.name = name;//此時that指向person對象    })(name);  }}

我們在person對象的第一層函數中，將this賦給局部變數that，然後在第二層函數中使用that，此時that指向person對象，可對person的屬性進行操作。

注意：若將一個對象中的函數賦給一個變數後，再通過該變數調用這個函數，此時該函數中的this指向window，而非該對象，如下所示：

var person = {  name : "chaimm",  getName : function(){    return this.name;  }}//將getName函數賦給一個新的變數var newGetName = person.getName;//通過新的變數調用這個函數，這個函數中的this將指向windownewGetName();//若全域範圍中沒有name，則將返回undefined

4. 用call和apply函數給this開掛

這兩個函數都能手動指定被調用函數內部的this指向哪個對象。

//定義一個建構函式var Person = function(name){  this.name = "";  this.setName = function(name){    this.name = name;  }}//建立兩個對象var personA = new Person("A");var personB = new Person("B");//使用personA的setName函數去修改personB的name屬性personA.setName.apply(personB,["C"]);

apply用法

對象A.函數名.apply(對象B, 參數列表);
當對象B作為apply的第一個參數傳給apply時，對象A的函數中this就指向了對象B，此時對象A的該函數對this的操作將會作用在對象B上，由此實現了用對象A去調用對象B的函數。

以上就是對javascript this的資料整理，後續繼續補充相關資料，謝謝大家對本站的支援！