JavaScript中對this深入了解

April 發布于2019-08-21 17:34 / 3341人閱讀

摘要：但是有一個總的原則，那就是指的是調用函數的那個對象。作為構造函數調用如果在一個函數前面帶上來調用，那么背地里將會創建一個鏈接到該函數的成員的新對象，同時會被綁定到那個新對象上。使用或調用方法讓我們構建一個參數數組傳遞給調用函數。

讓我們深入探索一下this的具體用法 只有了解this用法才算真正入門了

首先來聊聊：what"this?
this是Javascript語言的一個關鍵字。
它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用。隨著函數使用場合的不同，this的值會發生變化。但是有一個總的原則，那就是this指的是調用函數的那個對象。
This 被分為三種情況：全局對象、當前對象或者任意對象;判斷處于那種情況，這完全取決于函數的調用方式
JavaScript 中函數的調用有以下幾種方式：

作為函數調用

作為對象方法調用

作為構造函數調用

使用 apply 或 call 調用

“我要問的是this！你咋給我講起函數調用來了？要暈了！！！”

別急！且聽我慢慢道來:

作為函數調用

這是我們最常用的方法，這種調用方式屬于全局調用！以此模式調用函數時，
this被綁定到全局對象。（什么？全局變量，難道它是一輛公交車？）

先來個干貨

  function example(){ 
    this.n = "hello world !"; 　　
    console.log(this.n); 
    console.log(this); 　
  } 　　
    example();

調用 example(); 時，輸出了 ‘hello world !’ 還有 Window;
什么，還不信？行，再來個更猛的

var n = "hello world !"; 　
function example(){ 
  this.n = 0;
} 
example(); 
console.log(n);

果然是一輛公交車！！！

作為對象方法調用

當一個函數被保存為對象的一個屬性時，我們稱它為一個方法。當一個方法被調用，this被綁定到該對象。

var name="A";
var student = { 
  name:"C", 
  showName:function(){ 
    console.log(this.name); 
  } 
} 
  dogs.showName(); //輸出 C

  var boyName = student.showName(); 

  boyName(); //輸出 A

當執行 dogs.showName(); 時輸出 C ，說明這個時候this指向的是student這個對象的；當我們把student.showName();賦給boyName時，showName() 是做什么用的，很顯然，輸出它函數的執行環境所指向對象的name，而此時boyName 變量相當于 Window 對象的一個屬性，因此 boyName() 執行的時候相當于 window.boyName(),所以 this 關鍵字指向 window;所以就會輸出 A 。

作為構造函數調用

如果在一個函數前面帶上new來調用，那么背地里將會創建一個鏈接到該函數的prototype成員的新對象，同時this會被綁定到那個新對象上。

  function example(){ 　　
    　this.n = "hello world !"; 　
  } 　
  　var other = new example(); 　
  　console.log(other.n);

從運行結果可以看出：
我們為example這個函數new(構造)了一個新的對象 other,那么 this 就會指向 other 這個對象，所以就會輸出 ‘hello world !’。

使用 apply 或 call 調用

apply 方法讓我們構建一個參數數組傳遞給調用函數。他允許我們選擇this值。
它應用某對象的一個方法，用另一個對象替換當前對象。

var n = "hello world!"; 
  function example(){ 　　　
    console.log(this.n); 
  } 　　
  var o={}; 　　
  o.n = "hey~"; 　
  o.m = example; 　
  o.m.apply(); //輸出 "hello world!"

當apply()的參數為空時，就是沒有對象去替換掉當前的對象，所以默認調用全局對象。
因此，這時會輸出’hello world!’，證明this指的是全局對象。

當我們給apply()指定一個對象時：

  var n = "hello world!"; 
  function example(){ 　　
    　console.log(this.n); 
  } 　
  var o={}; 　
  o.n = "hey~"; 　　
  o.m = example; 　
  o.m.apply(o); //  輸出"hey~"

此時輸出了’hey~’,說明對象替換成功，this 指向了 o 這個對象。

以上介紹的就是JavaScript中this在不同情況下的含義。雖然這只是很小的一部分，但對于理解函數卻作用很大。作為一個入門不久的我，這只是我最近一些小小的理解，希望能幫助那些想學習的小白！
也希望大佬們能多多包涵，畢竟知識有限寫的肯定有很多缺陷!部分借鑒網絡!
溜了溜了！

云服務器 GPU云服務器深入了解javascript 深入了解php項目如何深入了解linux javascript的this

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

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

ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
React高階組件

摘要：結語高階函數對于初學者來說可能不太好理解，但當你深入其中，了解其中的原理之后，我們可以使用高階函數來完成很多的工作。前段時間在工作中寫Hybrid頁面時遇到了這樣的一個場景，公司需要一系列的活動組件，在每個組件注冊的時候都需要調用App端提供的一個接口。一開始也考慮了幾種方式，包括mixin、組件繼承以及react高階組件。但經過了種種衡量，最后選擇使用了高階組件的做法。 1、Mix...

ThinkSNS 2019-08-22 15:47 評論0 收藏0
理解JavaScript的核心知識點：This

摘要：關鍵字計算為當前執行上下文的屬性的值。毫無疑問它將指向了這個前置的對象。構造函數也是同理。嚴格模式無論調用位置，只取顯式給定的上下文綁定的，通過方法傳入的第一參數，否則是。其實并不屬于特殊規則，是由于各種事件監聽定義方式本身造成的。 this 是 JavaScript 中非常重要且使用最廣的一個關鍵字，它的值指向了一個對象的引用。這個引用的結果非常容易引起開發者的誤判，所以必須對這個關...

TerryCai 2019-08-23 17:00 評論0 收藏0
深入了解js對象

摘要：通過創建的對象運算符創建并初始化一個新對象，關鍵字后跟隨一個函數調用，這里的函數稱作構造函數，構造函數用以初始化一個新創建的對象。該文章以收錄：《JavaScript深入探索之路》前言對象是Javascript 的基本類型。對象是一種復合值，它將很多值（原始值或者其他對象）聚合在一起，可通過名字訪問這些值。對象也可看做是屬性的無序集合。每個屬性都是一個名/值對。JavaSc...

cheukyin 2019-08-21 17:42 評論0 收藏0
JavaScript是如何工作的：深入類和繼承內部原理+Babel和 TypeScript 之間轉換

摘要：下面是用實現轉成抽象語法樹如下還支持繼承以下是轉換結果最終的結果還是代碼，其中包含庫中的一些函數。可以使用新的易于使用的類定義，但是它仍然會創建構造函數和分配原型。這是專門探索 JavaScript 及其所構建的組件的系列文章的第 15 篇。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！如果你錯過了前面的章節，可以在這里找到它們： JavaScript 是...

PrototypeZ 2019-08-23 14:54 評論0 收藏0