es5中的this,es6中箭頭函數中的this

ssshooter 發布于2019-08-26 11:32 / 1437人閱讀

一.判斷this的綁定對象

1.對于構造函數,new一個新對象,this綁定到新創建的對象上

function Fun(){
    this.user ="fff";
}
var fun1 = new Fun();
console.log(fun1.user);//"fff"

2.由call或者apply調用,this綁定到指定的對象上

function Fun(){
    console.log(this.user);
}
var obj1 ={
    user:"obj1",
    fun:Fun
}
var obj2 ={
    user:"obj2",
    fun:Fun
}
obj1.fun.call(obj2);//obj2

3.函數是否在某個上下文環境中調用,如果是的話,this指向的是那個上下文環境

(1).如果一個函數中有this,并被上一級對象所調用,那么他指向上級對象
    function Fun(){
        console.log(this.user);
    }
    var obj1 ={
        user:"obj1",
        fun:Fun
    }
    obj1.fun();//obj1
(2).如果函數中有多個對象,this還是指向他的上一級對象
    function Fun(){
        console.log(this.user);
    }
    var obj1 ={
        user:"obj1",
        foo:{fun:Fun}
    }
    obj1.foo.fun();//undefined

4.如果以上都不是的話就使用的是默認綁定,在嚴格模式下,綁定到undefined,在非嚴格模式下,綁定到全局對象

5.當new一個對象時遇到return總結:如果return的是一個函數或者是對象,this指向的就是return出的函數或者對象;反之,this指向的是調用他的實例

eg1.
function Fun(user){
    this.user =user;
    return {};//或者是function(){}
}
var a = new Fun();
console.log(a);//{}
//這個時候的this是指向return出的空對象的

eg2.
function Fun(user){
    this.user =user;
    return 1;//或者是undefined
}
var a = new Fun();
console.log(a);//Fun {user: undefined}
//this指向新創建的對象

二.es6箭頭函數中的this

1.箭頭函數中this

(1)箭頭函數中的this指向詞法作用域,即外層調用者

不使用箭頭函數:
eg:
var a = {
  name: function() {
    console.log(this);
  }
}
a.name();//此時的this是指向對象a


使用箭頭函數:
var a = {
  name: () => {
    console.log(this);
  }
}
a.name();//此時的this指向全局window

(2).箭頭函數中call或者apply并不能修改this的指向

eg:
var a = {
  name: () => {
    console.log(this);
  }
}
a.name.call({ b: "11" });//此時this還是指向window

(3).多層嵌套,箭頭函數中的this指向最最外層作用域
eg1:

var a = {
  b: {
    c: {
      d: () => {
        console.log(this);//此時的this是指向window的
      }
    }
  }
}

eg2:

(4).與異步函數的例子
eg1:

window.name = "window";
var a = () => {
  console.log("1", this.name, this); //輸出window,this指向window
  this.name = "yyy";
  console.log("2", this.name, this); //輸出yyy,this還是指向window
  setTimeout(() => {
        console.log(this.name, this); //輸出yyy,說明this是指向window
  }, 1000)
}
a();
詳細說明:
a是一個普通函數, 當執行到 console.log("1", this.name, this);時, 在function中并沒有定義name屬性, 于是根據詞法作用域向他的上一級去找是否有name屬性, 在window中找到, 輸出window.name的值;接著把全局屬性name的值改為 "yyy";最后, 在一秒鐘后執行異步函數setTimeout輸出yyy, 此時由于箭頭函數的作用, 異步函數中的this還是指向window

eg2:

var b = {
  c: function() {
setTimeout(() => {
  console.log(this);//此時的this指向函數c
}, 1000);
  }
}
b.c();

輸出結果:

總結:箭頭函數中的this是在函數定義的時候就已經確定,并不是指向調用函數時的上下文

箭頭函數中, this指向的固定化，并不是因為箭頭函數內部有綁定this的機制，實際原因是箭頭函數根本沒有自己的this，導致內部的this就是外層代碼塊的this。正是因為它沒有this，所以也就不能用作構造函數。

GPU云服務器云服務器 javaScript中的this js中的this js中的this機制 js中的this與html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107074.html

ES6+ class中代碼的真正樣子

摘要：一用定義一個空類在中在中結論這個結果很清晰，原來中的類在中也是定義一個構造函數，然后返回出來。這篇文章用代碼對比的方式解釋ES6中的類如果用我們熟悉的ES5來看是什么樣的。一、用class定義一個空類在ES6中： class Person { } 在ES5中： var Person = (function () { function Person() { } ...

PascalXie 2019-08-20 15:11 評論0 收藏0
前端基礎進階（十四）：es6常用基礎合集

摘要：在繼承的構造函數中，我們必須如上面的例子那么調用一次方法，它表示構造函數的繼承，與中利用繼承構造函數是一樣的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在實際開發中，ES6已經非常普及了。掌握ES6的知識變成了一種必須。盡管我們在使用時仍然需要經過babel編譯。 ES6徹底改變了前端的編碼風格，...

Ryan_Li 2019-08-21 18:31 評論0 收藏0
【ES6系列】函數部分

摘要：正是因為它沒有，所以也就不能用作構造函數。不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。不可以使用對象，該對象在函數體內不存在。箭頭函數在之前ES5的版本中，我們定義一個函數的形式如下： function a() { // do something…… } 但是在ES6中，則新增了箭頭函數的方式，ES6中允許使用箭頭（=>）來定義函數。 () => { ...

enda 2019-08-22 16:15 評論0 收藏0
給React初學者的10分鐘ES6教程

摘要：但是在中，可以通過關鍵字來實現類的繼承的使用可以使得繼承意義更加明確并且值得一提的是，如果你使用來定義的組件，那么可以在類的構造器里面，用簡單的的聲明方式來替代方法。原文：The 10 min ES6 course for the beginner React Developer譯者：Jim Xiao 著名的80/20定律可以用來解釋React和ES6的關系。因為ES6增加了超過75...

Awbeci 2019-08-22 18:04 評論0 收藏0
關于ES6中箭頭函數的this問題

摘要：對象的指向是可變的，但是在箭頭函數中，它是固定的。同樣的由于箭頭函數沒有自己的所以傳統的顯性綁定無效內部的指向外部在的學習中，的指向問題一直是個難點，特別是在對象方法中使用時，必須更加小心。由此箭頭函數在很大程度上減少了我們的困擾。什么是箭頭函數用法 ES6 允許使用箭頭（=>）定義函數測試 var p1 = document.getElementById(test1)...

LeviDing 2019-08-22 10:53 評論0 收藏0