1. 程式人生 > >this繫結

this繫結

預設繫結

  • 預設繫結一般是繫結到window上,嚴格模式下是undefined
1 function mfoo () {
2     let a = 1;
3     console.log(this.a);
4 }
5 let a = 10;
6 mfoo();    // undefined
7 // 預設繫結一般是繫結到window上,嚴格模式下是undefined

 

隱性繫結

1 function yfoo() {
2     console.log(this.a);
3 }
4 let obj = {
5     a: 10,
6     yfoo: yfoo
7 } 8 yfoo(); // undefined 預設繫結 等價於window.a 9 obj.yfoo(); // 10 隱性繫結 函式yfoo執行的時候有了上下文物件,即obj。

 

顯性繫結

  • 使用call、apply或者bind進行顯性繫結
  • call 、apply 和 bind 這三者的區別
    • call 從第二個引數開始所有的引數都是原函式的引數
    • apply 只接受兩個引數,且第二個引數必須是陣列,這個陣列代表原函式的引數列表
    • bind 只有一個引數,且不會立即執行,知識將一個值繫結到函式的 this 上,並將繫結好的函式返回。
1 function bfoo () {
2     console.log(this.a);
3 }
4 
5 let bobj = { a: 10 };
6 bfoo = bfoo.bind(bobj);
7 
8 bfoo();    // 10

 

1 function xfoo () {
2     console.log(this.a);
3 }
4 let xobj = {
5     a: 888
6 }
7 xfoo.call(xobj);
8 
9 xfoo.apply(xobj);

 

new繫結

1 function nfoo () {
2 this.a = 10; 3 console.log(this); 4 } 5 nfoo(); 6 console.log(window.a); 7 let nobj = new nfoo(); 8 console.log(nobj.a);