JavaScript中this的一些應用場景

前端校園發表於2018-08-08
JavaScript

#####1.全域性環境中的this指向全域性物件

this.a = 10;
alert(a);//10
b = 20;
alert(this.b);//20
var c = 30;
alert(this.c);//30
複製程式碼

#####2.物件內部函式的this指向呼叫函式的當前物件

var a = 10;
var bar = {
 a: 20,
 test: function(){
  alert(this.a);
 }
}
bar.test();//20
複製程式碼

#####3.全域性環境函式的this指向全域性物件

var a = 10;
function foo(){
 alert(this.a);
}
foo();//10
複製程式碼

#####4.匿名函式中的this指向全域性物件

var a = 10;
var foo = {
 a: 20,
 fn: (function(){
  alert(this.a);
 })()
}
foo.fn//10
複製程式碼

#####5.setInterval和setTimeout定時器中的this指向全域性物件

var a = 10;
var oTimer1 = setInterval(function(){
 var a = 20;
 alert(this.a);//10
 clearInterval(oTimer1);
},100);
複製程式碼

#####6.eval中的this指向呼叫上下文中的this

(function(){
 eval("alert(this)");//[object Window]
})();
function Foo(){
 this.bar = function(){
  eval("alert(this)");//[object Object]
 }
}
var foo = new Foo();
foo.bar();
複製程式碼

#####7.建構函式中的this指向構造出的新物件

function Person(name,age){
 this.name = name;
 this.age = age;
 this.sayName = function(){
  alert(this.name);
 }
}
var p1 = new Person('lily','20');
p1.sayName();//'lily'
複製程式碼

#####8.new Function中的this指向全域性物件

(function(){
 var f = new Function("alert(this)");
 f();//[object Window]
})();
function Foo(){
 this.bar = function(){
  var f = new Function("alert(this)");
  f();//[object Window]
 }
}
var foo = new Foo();
foo.bar();
複製程式碼

#####9.apply和call中的this指向引數中的物件

var a = 10;
var foo = {
 a: 20,
 fn: function(){
  alert(this.a);
 }
};
var bar ={
 a: 30
}
foo.fn.apply();//10(若引數為空，預設指向全域性物件)
foo.fn.apply(foo);//20
foo.fn.apply(bar);//30
複製程式碼

#####10.當前物件呼叫另一物件方法屬性

var someone = {
 name: "Bob",
 showName: function(){
  alert(this.name);
 }
};
var other = {
 name: "Tom",
 showName: someone.showName
}
other.showName();  //Tom
 
//以上函式相當於
 
var other = {
 name: "Tom",
 showName: function(){
  alert(this.name);
 }
}
other.showName();  //Tom
複製程式碼

#####11.物件中匿名函式結合物件中函式

var name = 2;
var a = {
 name: 3,
 fn: (function(){
  alert(this.name);
 })(),
 fn1:function(){
  alert(this.name);
 }
}
a.fn;//2[匿名函式中的this指向全域性物件]
a.fn1();//3[物件內部函式的this指向呼叫函式的當前物件]

複製程式碼

#####12.物件函式中使用setTimeout呼叫this

var name = "Bob"; 
var nameObj ={ 
 name : "Tom", 
 showName : function(){ 
 alert(this.name); 
}, 
 waitShowName : function(){
  var that = this;
  setTimeout(function(){
   that.showName();
  }, 1000);
 }
}; 
nameObj.waitShowName();//"Tom"[that=this改變this的指向，使this從指向全域性變數變化到指向nameObj]
 
var name = "Bob"; 
var nameObj ={ 
 name : "Tom", 
 showName : function(){ 
  alert(this.name); 
 }, 
 waitShowName : function(){
  var that = this;//that指向nameObj
  setTimeout(function(){
   (function(){ 
    alert(this.name);
   })();
  }, 1000);
 }
}; 
nameObj.waitShowName();// 'Bob'[形成匿名函式，this指向全域性變數]
複製程式碼

#####13.箭頭函式中的 this

const obj = {
  test() {
    const arrow = () => {
      // 這裡的 this 是 test() 中的 this，
      // 由 test() 的呼叫方式決定
      console.log(this === obj);
    };
    arrow();
  },
  getArrow() {
    return () => {
      // 這裡的 this 是 getArrow() 中的 this，
      // 由 getArrow() 的呼叫方式決定
      console.log(this === obj);
    };
  }
};
obj.test();   // true
const arrow = obj.getArrow();
arrow();    // true
複製程式碼

箭頭函式沒有自己的 this 繫結。箭頭函式中使用的 this ，其實是直接包含它的那個函式或函式表示式中的 this 。 另外需要注意的是，箭頭函式不能用 new 呼叫，不能 bind() 到某個物件(雖然 bind() 方法呼叫沒問題，但是不會產生預期效果)。不管在什麼情況下使用箭頭函式，它本身是沒有繫結 this 的，它用的是直接外層函式(即包含它的最近的一層函式或函式表示式)繫結的 this 。

相關文章