首頁 > 文章 > web前端 > js中的this如何使用

js中的this如何使用

php中世界最好的语言原創: 2017-11-17 18:01:212518瀏覽

js中的this到底是什麼意思

JS裡面總是會用到this,今天就和大家好好的談一下這個容易把人弄糊塗的this到底是個什麼東西，怎樣使用this

this的指向1, 普通函數指向函數的呼叫者:有個簡單的方法就是看函數前面有沒有點,如果有點,那麼就指向點前面的那個值; 2, 箭頭函數指向函數所在的所用域: 注意理解作用域,只有函數的{}構成作用域,物件的{}以及if(){}都不構成作用域;

const obj = {
name: &#39;objName&#39;,
say() {
console.log(this.name);  
      }, 
read: () => {
     console.log(this.name);
             }
       }
obj.say(); // objName
obj.read(); // undefined

普通函數,呼叫者是obj,所以結果是objname;也是理解say()是普通函數,前面有點,所以this指向obj;

箭頭函數,this指向函數所在的作用域,目前的作用域為全域環境,所以this.name為undefined,

舉下面的例子更清楚的了解一下箭頭函數this的指向,箭頭函數所在的作用域是普通函數say,say()的呼叫者是obj

const obj = { 
say: function () {
  setTimeout(() => {
   console.log(this)
                  });
                 }
             }

#obj.say(); // obj,此時this指的是定義他的obj

補充知識點

瀏覽器預設的this為window

function test() {  
console.log(this);
}

test( ); //window

node.js中全域環境預設this為{},普通函數預設this為global

console.log(this); // {}
function test() {
 console.log(this);
}
test(); //global

來兩題檢查你是否掌握了

example1

const length = 10;
function fn() {
console.log(this.length);
}
const  obj = {
  length: 5,
  method: function(fn) { 
  fn();
  arguments[0]();   
  }
};
obj.method(fn, 1);

輸出10, 2

剛開始看到這道題我也是濛濛的,現在也終於理解了,method這個函數傳入了兩個參數,一個參數為fn(),fn()為普通函數,this指向函數的調用者,此時指向全局(也可以看這個函數前面沒有點),所以運行結果為10,arguments是函數的所有參數,是一個類別數組的物件,arguments[0] (),可以看成是arguments.0() ,呼叫這個函數的是arguments,此時this就是指arguments,this.length就是angument.length,就是傳入的參數的總個數2

註:上面範例在node環境中的運行結果為undefined 2, const length = 10改成global.length = 10;是因為node環境下定義在全域的變數不會綁定到global,瀏覽器也會自動綁定到全域環境window

改成下面這樣結果又是什麼呢?

const length = 10;
function fn() {
    console.log(this.length);
}
const obj = {
    length: 5,
    method: function(fn) {
        fn();
        const fun = arguments[0];
        fun()；
    }
};
obj.method(fn, 1);
10, 10
example 2
window.val = 1;
var obj = {
    val: 2,
    dbl: function() {
        this.val *= 2
        val *= 2;
        console.log(val);
        console.log(this.val);
    }
}
obj.dbl(); // 2 4
var func = obj.dbl;
func(); // 8 8

這個就是有點繞了,不過一步步來分析就很容易理解了:

obj.dbl();執行這行程式碼時，this指的是obj，所以this.val === obj.val*=2,最後結果為4 ,val*=2 === window.val *= 2，最後結果是2

func()，執行這行程式碼時，func()沒有任何前綴，this指的是window.func( );所以此時this值得是window，this.val === window.val *= 2,此時window.val 為4，val*=2 === window.val *2,最後結果為8，最後console.log(this.val),與console.log(val),指的都是window.val。

以上就是我對this的一些小理解，如果大家對於我的這篇文章有所疑問，歡迎和我交流。

js中的this如何使用

相關文章