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

資訊專欄INFORMATION COLUMN

我對(duì)JavaScript中this的一些理解

focusj / 2098人閱讀

摘要：匿名函數(shù)的執(zhí)行環(huán)境具有全局性，因此它的對(duì)象通常指向。如果對(duì)此有疑惑，可以看知乎上的答案知乎匿名函數(shù)的指向?yàn)槭裁词亲鳛閷?duì)象方法的調(diào)用，指向該對(duì)象當(dāng)函數(shù)作為某個(gè)對(duì)象的方法調(diào)用時(shí)，就指這個(gè)函數(shù)所在的對(duì)象。

因?yàn)槿粘９ぷ髦薪?jīng)常使用到this，而且在JavaScript中this的指向問(wèn)題也很容易讓人混淆一部分知識(shí)。
這段時(shí)間翻閱了一些書籍也查閱了網(wǎng)上一些資料然后結(jié)合自己的經(jīng)驗(yàn)，為了能讓自己更好的理解this，進(jìn)而總結(jié)一篇文章。

this 是什么

this是 JavaScript 語(yǔ)言的一個(gè)關(guān)鍵字。它是函數(shù)運(yùn)行時(shí)，在函數(shù)體內(nèi)部自動(dòng)生成的一個(gè)對(duì)象，只能在函數(shù)體內(nèi)部使用。
實(shí)際是在函數(shù)被調(diào)用時(shí)才發(fā)生的綁定，也就是說(shuō)this具體指向什么，取決于你是怎么調(diào)用的函數(shù)。

this 指向的四種情況

這四種情況基本涵蓋了JavaScript中常見的this指向問(wèn)題

1. 全局的函數(shù)調(diào)用，this指向window 
var a = 1;
function fn() {
   console.log(this.a);
}
fn();  // 1

這種 情況下的this其實(shí)就是window對(duì)象，這個(gè)很好理解。
但是還有一種情況，就是匿名函數(shù)的this也會(huì)指向window。

var a= "window";
var obj={a: "object"}
obj.fn=function(){
    console.log(this.a);//Object
    +function(){
        console.log(this.a)//window
    }()
}
obj.fn()

匿名函數(shù)的執(zhí)行環(huán)境具有全局性，因此它的this對(duì)象通常指向windows。
如果對(duì)此有疑惑，可以看知乎上的答案：知乎 - 匿名函數(shù)的this指向?yàn)槭裁词莣indow?

2. 作為對(duì)象方法的調(diào)用，this指向該對(duì)象 
var a ="window"
var obj={
  a: "object",
  fn: function(){
    console.log(this.a);
  }
}

obj.fn(); // object

當(dāng)函數(shù)作為某個(gè)對(duì)象的方法調(diào)用時(shí)，this就指這個(gè)函數(shù)所在的對(duì)象。

3. 作為構(gòu)造函數(shù)調(diào)用，this指向?qū)嵗?/b> 
function fn() {
　this.x = 1;
}
var obj = new fn();
console.log(obj.x) // 1

構(gòu)造函數(shù)中的this，在通過(guò)new之后會(huì)生成一個(gè)新對(duì)象，this就指這個(gè)新對(duì)象。
對(duì)new有疑問(wèn)的話，可以看 冴羽的博客 JavaScript深入之new的模擬實(shí)現(xiàn)

4. 使用call/apply/bind調(diào)用, this指向第一個(gè)參數(shù) 
var obj1={
  a: "boj1"
}
var obj2={
  a: "obj2"
}
var obj3={
  a: "obj3"
}
function fn(){
  console.log(this.a);
}
// apply
fn.apply(obj1);// "obj1"
// call
fn.call(obj2);// "obj2"
// bind
var fnBind= fn.bind(obj3);
fnBind();// "obj3"

call/ apply / bind 都有一個(gè)共同的特點(diǎn)，就是改變this的指向，使用這種方法可以把別人的方法拿過(guò)來(lái)用到自己身上。

第一個(gè)參數(shù)為 null 的時(shí)候，視為指向 window.

var a="window"
var obj={
  a: "boj",
  fn: function (){
    console.log(this.a);
  }
}
obj.fn.call(null);// "window"

在這里如果是obj.fn()調(diào)用的fn()方法，this應(yīng)該指向obj沒錯(cuò)。
但是因?yàn)?b>call(null)的存在，改變了指向，所以this指向了window。

深入理解

正因?yàn)楸容^難理解，所以this指向也是面試時(shí)最容易遇到的問(wèn)題，比如下面這道我曾遇到的一個(gè)面試題：

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

在這道題里，不僅考察了對(duì)this熟悉程度，還考察了函數(shù)的傳參形式、作用域、以及arguments這種特殊的數(shù)組的理解。
只有真正理解了這些才能正確的判斷this究竟指向了誰(shuí)。
所以，只有對(duì)JavaScript中的各項(xiàng)知識(shí)點(diǎn)深入理解，才會(huì)對(duì)this的概念越加清晰。

參考：
阮一峰 - Javascript 的 this 用法
前端開發(fā)博客 - 深入理解JavaScript this

文章僅日常學(xué)習(xí)工作所得，歡迎大家訪問(wèn)我的blog。

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

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

相關(guān)文章

  • 我對(duì)JavaScript對(duì)象的理解

    摘要：通過(guò)這種操作，就有了構(gòu)造函數(shù)的原型對(duì)象里的方法。你也看到了，就是一個(gè)普通對(duì)象，所以這種寄生式繼承適合于根據(jù)已有對(duì)象創(chuàng)建一個(gè)加強(qiáng)版的對(duì)象，在主要考慮通過(guò)已有對(duì)象來(lái)繼承而不是構(gòu)造函數(shù)的情況下，這種方式的確很方便。 原文地址在我的博客, 轉(zhuǎn)載請(qǐng)注明出處，謝謝！ 標(biāo)簽： [es5對(duì)象、原型, 原型鏈, 繼承] 注意（這篇文章特別長(zhǎng)）這篇文章僅僅是我個(gè)人對(duì)于JavaScript對(duì)象的理解，并不是...

    roadtogeek 評(píng)論0 收藏0

  • 對(duì)Javascript 類、原型鏈、繼承的理解

    摘要：因?yàn)槲覀冇眠@個(gè)函數(shù)來(lái)構(gòu)造對(duì)象，所以我們也把稱作構(gòu)造函數(shù)。所以通過(guò)定義構(gòu)造函數(shù)，就相當(dāng)于定義了一個(gè)類，通過(guò)關(guān)鍵字，即可生成一個(gè)實(shí)例化的對(duì)象。 一、序言 ??和其他面向?qū)ο蟮恼Z(yǔ)言（如Java）不同，Javascript語(yǔ)言對(duì)類的實(shí)現(xiàn)和繼承的實(shí)現(xiàn)沒有標(biāo)準(zhǔn)的定義，而是將這些交給了程序員，讓程序員更加靈活地（當(dāng)然剛開始也更加頭疼）去定義類，實(shí)現(xiàn)繼承。（以下不討論ES6中利用class、exten...

    sevi_stuo 評(píng)論0 收藏0

  • 用函數(shù)式編程對(duì)JavaScript進(jìn)行斷舍離

    摘要：函數(shù)式編程一開始我并不理解。漸漸地，我熟練掌握了使用函數(shù)式的方法去編程。但是自從學(xué)習(xí)了函數(shù)式編程，我將循環(huán)都改成了使用和來(lái)實(shí)現(xiàn)。只有數(shù)據(jù)和函數(shù)，而且因?yàn)楹瘮?shù)沒有和對(duì)象綁定，更加容易復(fù)用。在函數(shù)式的中，這些問(wèn)題不復(fù)存在。 譯者按: 當(dāng)從業(yè)20的JavaScript老司機(jī)學(xué)會(huì)函數(shù)式編程時(shí)，他扔掉了90%的特性，也不用面向?qū)ο罅耍詈蟀l(fā)現(xiàn)了真愛?。。?！ 原文: How I rediscov...

    dkzwm 評(píng)論0 收藏0

  • JavaScript中的this淺談

    摘要：在函數(shù)中調(diào)用時(shí)指向調(diào)用函數(shù)的對(duì)象，調(diào)用函數(shù)的在不同情況下有直接調(diào)用，此時(shí)函數(shù)內(nèi)部的指向全局對(duì)象作為對(duì)象的方法，此時(shí)指向該對(duì)象構(gòu)造函數(shù)，此時(shí)指向構(gòu)造的實(shí)例對(duì)象改變指向是語(yǔ)言的一個(gè)關(guān)鍵字。但是有一個(gè)總的原則，那就是指的是，調(diào)用函數(shù)的那個(gè)對(duì)象。 this在全局中調(diào)用時(shí)指向的是全局對(duì)象。this在函數(shù)中調(diào)用時(shí)指向調(diào)用函數(shù)的對(duì)象，調(diào)用函數(shù)的在不同情況下有 1.直接調(diào)用，此時(shí)函數(shù)內(nèi)部的this指向...

    YJNldm 評(píng)論0 收藏0

  • ES6部分方法點(diǎn)評(píng)（一）

    一直以來(lái)，我對(duì)ES6都不甚感興趣，一是因?yàn)樵谏a(chǎn)環(huán)境中使用ES5已是處處碰壁，其次則是只當(dāng)這ES6是語(yǔ)法糖不曾重視。只是最近學(xué)習(xí)react生態(tài)，用起babel來(lái)轉(zhuǎn)換jsx之余，也不免碰到諸多用上ES6的教程、案例，因此便稍作學(xué)習(xí)。這一學(xué)習(xí)，便覺得這語(yǔ)法糖實(shí)在是甜，忍不住嘗鮮，于是記錄部分自覺對(duì)自己有用的方法在此。 箭頭函數(shù)(Arrow Functions) 箭頭函數(shù)是一個(gè)典型的語(yǔ)法糖，即創(chuàng)造了一種...

    weakish 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<