成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

es5中的this,es6中箭頭函數(shù)中的this

ssshooter / 1442人閱讀

一.判斷this的綁定對象

1.對于構(gòu)造函數(shù),new一個新對象,this綁定到新創(chuàng)建的對象上

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

2.由call或者apply調(diào)用,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.函數(shù)是否在某個上下文環(huán)境中調(diào)用,如果是的話,this指向的是那個上下文環(huán)境

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

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

5.當(dāng)new一個對象時遇到return總結(jié):如果return的是一個函數(shù)或者是對象,this指向的就是return出的函數(shù)或者對象;反之,this指向的是調(diào)用他的實例

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指向新創(chuàng)建的對象
二.es6箭頭函數(shù)中的this

1.箭頭函數(shù)中this

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

不使用箭頭函數(shù):
eg:
var a = {
  name: function() {
    console.log(this);
  }
}
a.name();//此時的this是指向?qū)ο骯


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

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

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

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

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

eg2:

(4).與異步函數(shù)的例子
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();
詳細(xì)說明:
a是一個普通函數(shù), 當(dāng)執(zhí)行到 console.log("1", this.name, this);時, 在function中并沒有定義name屬性, 于是根據(jù)詞法作用域向他的上一級去找是否有name屬性, 在window中找到, 輸出window.name的值;接著把全局屬性name的值改為 "yyy";最后, 在一秒鐘后執(zhí)行異步函數(shù)setTimeout輸出yyy, 此時由于箭頭函數(shù)的作用, 異步函數(shù)中的this還是指向window

eg2:

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

輸出結(jié)果:

總結(jié):箭頭函數(shù)中的this是在函數(shù)定義的時候就已經(jīng)確定,并不是指向調(diào)用函數(shù)時的上下文

箭頭函數(shù)中, this指向的固定化，并不是因為箭頭函數(shù)內(nèi)部有綁定this的機(jī)制，實際原因是箭頭函數(shù)根本沒有自己的this，導(dǎo)致內(nèi)部的this就是外層代碼塊的this。正是因為它沒有this，所以也就不能用作構(gòu)造函數(shù)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107074.html

相關(guān)文章

  • ES6+ class中代碼的真正樣子

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

    PascalXie 評論0 收藏0

  • 前端基礎(chǔ)進(jìn)階（十四）：es6常用基礎(chǔ)合集

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

    Ryan_Li 評論0 收藏0

  • 【ES6系列】函數(shù)部分

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

    enda 評論0 收藏0

  • 給React初學(xué)者的10分鐘ES6教程

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

    Awbeci 評論0 收藏0

  • 關(guān)于ES6中箭頭函數(shù)的this問題

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

    LeviDing 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<