国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Javascript中this基礎應用

NicolasHe / 636人閱讀

摘要:不過,匿名函數的執行環境具有全局性,因此其對象通常指向。示例如下依然指向全局全局方法指向匿名函數目前為止,一切都符合預期表現。指向指向全局調用對象方法調用方法內部方法雖然有點繞,但是還是可以明白的,指向調用方法該對象,匿名函數指向全局。

前言

以下內容只針對非嚴格模式,嚴格模式區不說了
如果看過《JavaScript高級程序設計(第3版)》的人都應該有印象,里面關于this對象是這么形容的

this 對象是在運行時基于函數的執行環境綁定的:在全局函數中,this等于window,而當函數被作為某個對象的方法調用時,this 等于那個對象。不過,匿名函數的執行環境具有全局性,因此其 this 對象通常指向 window。
demo1

示例如下

var a = 10,
  obj = {
    a: 20
  };

function log() {
  var a = 30;
  console.log(this.a); //依然指向全局
};

console.log(this.a); // 全局
log(); //方法
log.call(obj); //指向obj

;
(function () {
  console.log(this.a) //匿名函數
})()

// 10
// 10
// 20
// 10

目前為止,一切都符合預期表現。然后我們再看些復雜點的寫法。

demo2
var a = 10,
  obj = {
    a: 20,
    log: function () {
      console.log(this.a); //指向obj
    }
  };

function log() {
  function _log() {
    console.log(this.a); //指向全局
  };
  _log();
};

obj.log(); //調用對象方法
log(); //調用方法內部方法

// 20
// 10

雖然有點繞,但是還是可以明白的,this指向調用方法該對象,匿名函數this指向全局
看到這里我們好像已經大概明白this是怎么一回事了,然后我們再寫復雜點

demo3
var a = 10,
  obj = {
    a: 20,
    b: this.a + 30
  };
console.log(obj.b); // 40

是不是又猛的懷疑人生了?明明應該this是指向obj得出50,為什么會指向全局得出40的!?
想想上面說的當函數被作為某個對象的方法調用時, this 等于那個對象。難道屬性值又是另一回事?
帶著疑問我們直接打印出this看看

var a = 10,
  obj = {
    a: 20,
    b: this
  };
console.log(obj.b === window); //true

所以屬性值里的this真的指向全局,于是我們可以假設得出一個結論:當函數被作為某個對象的方法調用時, this 等于那個對象,而某個對象的屬性值的this是直接指向全局的
聽起來好拗口,是不是意思對象的方法this指向對象,屬性值指向全局!?

demo4

帶著疑問我們直接看例子

var a = 10,
  obj = {
    a: 20,
    log: function () {
      console.log(this.a);
    }
  };
var fn = obj.log;
fn(); //調用賦值方法10

正如前面所說,當函數被作為某個對象的方法調用時, this 等于那個對象。如果不是該對象直接調用時,this指向調用對象。
基于這個結論,即使中間經過幾層函數調用也一樣的

var a = 10,
  obj = {
    a: 20,
    log: function () {
      console.log(this.a); //指向obj
    }
  };

function all_log(fn) {
  fn();
}

all_log(obj.log); // 10

看到了吧,即使經過一個中間函數調用,實際相當于window調用對象方法,所以this也是指向全局的.

demo5

然后看看經常會用到的函數return出的this指向

var a = 10,
  obj = {
    a: 20,
    log: function () {
      return function () {
        console.log(this.a); //指向??
      }
    }
  };
obj.log()(); //10

衹要基礎稍好也能理解,因為obj.log()返回一個匿名函數,然后相當于在全局下再調用匿名函數,因此this直接指向全局了。書里官方點的解釋就是

每個函數在被調用時都會自動取得兩個特殊變量: thisarguments。內部函數在搜索這兩個變量時,只會搜索到其活動對象為止,因此永遠不可能直接訪問外部函數中的這兩個變量(例子是指obj)

需要注意的是如果沒有明確指向全局的話this實際上都是指向undefined的,衹是非嚴格模式下,它會被自動指向全局對象。

function log() {
  "use strict";
  console.log(this === window);
}

log(); // 獨立調用false
window.log(); // window下調用 true
demo6

書里還提到一個挺有意思的寫法

var a = 10,
  obj = {
    a: 20,
    log: function () {
      console.log(this.a); //指向??
    }
  };
(obj.log = obj.log)(); //先賦值再調用 10

你會發現居然this也指向全局了。
因為代碼先執行了一條賦值語句,然后再調用賦值后的結果。因為這個賦值表達式的值是函數本身,所以 this 的值不能得到維持,結果就返回了10。

demo7

如果是作為構造函數使用的情況下

function Person() {
  this.name = "mike";
  this.log = function () {
    console.log(this);
  }
};

var man = new Person();
man.log();//Person {name: "mike", log: function}

里面的this是指向new出來的對象,詳情可以看看我之前寫的博文關于Javascript中的new運算符,構造函數與原型鏈一些理解

demo8

還有種情況是通過callapply修改this指向,它會強制指向方法的第一個參數

var a = 10,
  obj = {
    a: 20
  };

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

log.call(obj); //指向obj
log.apply(obj); //指向obj
基于上面的情況,我們可以得出幾個結論

1, this 對象是在運行時基于函數的執行環境綁定的
2, 如果沒有明確指向全局的話this實際上都是指向undefined的,衹是非嚴格模式下,它會被自動指向全局對象
3, 當函數被作為某個對象的方法調用時,this 等于那個對象
4, 當某個對象的屬性值里的this是直接指向全局對象
5, 匿名函數的執行環境具有全局性,因此其 this 對象通常指向全局對象
6, 構造函數中的this會指向它實例化對象
7, call或apply方法能強制修改this指向方法指定對象

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

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

相關文章

  • 學習React之前你需要知道的的JavaScript基礎知識

    摘要:和類在開始時遇到類組件,只是需要有關類的基礎。畢竟,中的條件呈現僅再次顯示大多數是而不是特定的任何內容。 在我的研討會期間,更多的材料是關于JavaScript而不是React。其中大部分歸結為JavaScript ES6以及功能和語法,但也包括三元運算符,語言中的簡寫版本,此對象,JavaScript內置函數(map,reduce,filter)或更常識性的概念,如:可組合性,可重用...

    bitkylin 評論0 收藏0
  • JavaScript基礎心法——call apply bind

    摘要:原文地址基礎心法歡迎。也就是說,這三個方法可以改變函數體內部的指向。令為一個空列表。提供作為值并以作為參數列表,調用的內部方法,返回結果。在外面傳入的值會修改并成為值。語法其中,就是指向,是指定的參數。 原文地址:JavaScript基礎心法——call apply bind 歡迎star。 如果有錯誤的地方歡迎指正。 整理call、apply、bind這三個方法的的知識點。 之前...

    techstay 評論0 收藏0
  • [譯] 在你學習 React 之前必備的 JavaScript 基礎

    摘要:前言在理想的狀態下,你可以在深入了解之前了解和開發的所有知識。繼承另一個類的類,通常稱為類或類,而正在擴展的類稱為類或類。這種類型的組件稱為無狀態功能組件。在你有足夠的信心構建用戶界面之后,最好學習。 原文地址:JavaScript Basics Before You Learn React 原文作者: Nathan Sebhastian 寫在前面 為了不浪費大家的寶貴時間,在開...

    Chaz 評論0 收藏0

發表評論

0條評論

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