理解javascript中的this關鍵字
阿新 • • 發佈:2018-12-13
一直以來,this關鍵字都是我的知識盲區,雖然平時一直都有用到,但是都不是很理解this的指向,今天看了一篇文章,感覺受益匪淺,所以做個記錄。參考文章地址https://www.jb51.net/article/74097.htm
1.首先確定它是不是用new進行呼叫的,如果是,那麼this就指向new出來的物件
function a(x,y) {
this.x = x
this.y = y
}
var b = new a(1,2)
b.x // 1
b.y // 2
這裡的this就指向new出來的b
2.如果不是new進行呼叫,那麼看是否用了dot點呼叫。(用了dot呼叫)
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
this.x = this.x + x;
this.y = this.y + y;
}
};
point.moveTo(1,2)
這裡用dot呼叫moveTo,那麼moveTo裡面的this就指向dot之前的物件。這裡dot之前的物件就是point,所以this指向point
3.如果不是new進行呼叫,那麼看是否用了dot點呼叫(沒有用dot呼叫)
function func(x) { this.x = x; } func(5); //this是全域性物件window,x為全域性變數 x;//x => 5
這裡是函式直接呼叫,那麼this就指向全域性變數window,這裡的this.x實際上等於window.x
var point = { x : 0, y : 0, moveTo : function(x, y) { var that = this // 加入這句,後面的this改成that,那麼就可以把this引用指向point // 內部函式 var moveX = function(x) { this.x = x;//this 指向什麼?window }; // 內部函式 var moveY = function(y) { this.y = y;//this 指向什麼?window }; moveX(x); moveY(y); } }; point.moveTo(1,1); point.x; //=>0 point.y; //=>0 x; //=>1 y; //=>1
之前一直不理解為什麼這裡的this是指向window,現在一目瞭然,因為它是函式直接呼叫,既不是dot呼叫,也不是new呼叫,所以這裡的this指向window。如果要讓this指向point,可以在moveTo函式裡面加入var that = this。
4.apply() 和 call() 方法裡面的this指向。
function Point(x, y){
this.x = x;
this.y = y;
this.moveTo = function(x, y){
this.x = x;
this.y = y;
}
}
var p1 = new Point(0, 0);
var p2 = {x: 0, y: 0};
p1.moveTo.apply(p2, [10, 10]);//apply實際上為p2.moveTo(10,10)
p2.x//10
實際上這還是dot呼叫,this之前dot之前的物件,這裡就是p2。