你必須知道的Javascript知識點之'this指針'的應用

你必須知道的Javascript知識點之'this指針'的應用_javascript技巧

WBOY

發布： 2016-05-16 17:35:37

原創

1291 人瀏覽過

很多人都知道this指針，這篇文章的主要目的是為了培訓我們公司的新人。
預設的this指標指向
規則1
this指標預設指向方法呼叫時為其指定的對象，如：obj.fun()，fun方法體中的this指針指向obj。

var user = { name: '段光偉' }; 🎜>user.getName = function(){ return this.name; };
user.getName();  //回傳'段光偉'

複製程式碼程式碼如下:

var user = { name: '段光偉' };
 user.getName = function(){ return this(){ return this .name; };
 user.getName();  //回傳'段光偉'

 window.name = '李妞';
 window.getName = user.getName window.getName = user.getName window. getName();  //回傳'李妞'
 getName();  //回傳'李妞'

規則2
如果在方法呼叫時沒有為方法指定物件則this指標預設指向window，如：fun()，fun方法體中的this指標指向window。

複製程式碼程式碼如下:

var fun = function(){


var fun = function(){
 ;
 }

fun(); //返回window物件

規則3沒有在方法論中的程式碼可以看作執行在一個匿名方法，根據規則2可以推論出其this指標指向window。

this //window物件
改變this指標的預設指向

使用apply複製程式碼

複製程式碼

複製程式碼

var user = { name: '段光偉' };
user.hi= function(message){ return this.name ':' message; };

window.name return this.name ':' message; }; window.name = '李妞' user.hi('你好'); //輸出'段光偉:你好' user.hi.apply(window, ['你好']); //輸出'李妞：你好'用call

複製程式碼

複製程式碼

代碼:

var user = { name: '段光偉' }; user.hi= function(message){ return this.name ':' message; }; window.name = '李妞' user.hi('你好'); //輸出'段光偉:你好' user.hi.call(window, '你好'); //輸出'李妞：你好'

建構子中的this指向
建構函式中的this指標預設指向執行正在建構的物件。 

複製程式碼

 程式碼如下:

var User = function(name){
.name = name; };
User.prototype.hi = function(){

return this.name; }; var user = new User('段光偉'); user.hi(); //輸出'段光偉'

最後的小測試

猜猜最後的輸出時什麼？ 

複製程式碼

 程式碼如下:

var User = function(name){
  .name = name;

};
User.prototype.hi = function(){ return this.name; }; var 標 this.name; }; var user =usera User('s user.hi(); //輸出'段光偉' var hi = user.hi; hi(); //猜猜這裡的輸出 hi(); //猜猜這裡的輸出