JS中的this指向問題？ 2018最全this指向解釋

本篇文章帶給大家的內容是關於JS中的this指向問題？ 2018最全this指向解釋，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。 

this,被誰調用就指向誰

在全局的this

console.log(this)  //这里的this是全局下的this, 因此这个this默认指向的是BOM的顶级对象window

在函數中的this

var fn = function() {
	console.log(this)}fn()	//window

這裡的this是函數fn裡的this,而fn函數是被window呼叫的, 因此這個函數中的this指向window

對像中的this

var obj = {
	name: 'zhang',
	fnObj: function() {
		console.log(this)
	}}obj.fnObj()  //obj

在obj物件中定義了一個fnObj方法, 在其中印出this, 因為fnObj是被obj這個物件呼叫的, 所以這個函數中的this指向是他的呼叫者obj

建構函數中的this

var func = function(ele) {
	console.log(this)  //func}var newFu = new func('p')

建構函數中的this就是指向這個建構子本身

var func = function(ele) {
	this.box = document.querySelector('p')
	this.box.onclick = function() {
		console.log(this)   //p
	}}

在建構函式中取得一個標籤, 並且為這個標籤新增一個事件, 這個事件中的this指向的是呼叫這個事件的p

箭頭函數中的this

在DOM&BOM環境下的箭頭函數

箭頭函數中的this,是繼承過來的, 也就是說, 箭頭函數中的this,會繼承其父級的this指向, 上文的this指向哪裡, 箭頭函數中的this就會指向哪裡

var a = {
	b : function(){
		var func = ()=> {
			console.log(this);  //这里的this指向a这个对象
		}
		func();
	},
	c : 'Hello!'}a.b()

箭頭函數func的父級是b函數, b函數被a調用, 因此b函數的this指向a, 因此func箭頭函數的this會繼承b函數中的this指向, 此外, 箭頭函數中的this,不會被apply,call,bind所改變

var a = {
  b : () => {
    console.log(this)   //指向window
    var func = ()=> {
      console.log(this);  //这里的this指向window
    }
    func();
  },
  c : 'Hello!'}a.b()

箭頭函數func的this繼承自箭頭函數b, 箭頭函數b的this繼承自他的父級a對象, 因為a對像是window創建出來的, 因此箭頭函數b的this指向window, 箭頭函數func繼承箭頭函數b的this,因此也指向window

在nodeJS環境下的箭頭函數

module.exports.b = 'haha'var b = 'asdvar a = {
  b: 'name',
  c: ()=>{
   console.log(this.b)  //haha
  }}a.c()

在node中箭頭函數中的this指向也會繼承其上一級的this指向, 只不過這裡沒有window對象了, 而是指向了module.exports這個對象

以上就是對JS中的this指向問題？ 2018最全this指向解釋的完整介紹，如果您想了解更多有關JavaScript影片教學，請關注PHP中文網。

以上是JS中的this指向問題？ 2018最全this指向解釋的詳細內容。更多資訊請關注PHP中文網其他相關文章！