ホームページ ウェブフロントエンド jsチュートリアル これはどのように使用されますか?

これはどのように使用されますか?

Jun 26, 2017 am 09:27 AM
this 使用

(1) グローバル環境

グローバル環境で this を使用します。これは、トップレベルのオブジェクト を参照します。ウィンドウcode>。 this,它指的就是顶层对象window

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="k">this <span class="o">=== <span class="nb">window <span class="c1">// true<span class="kd">function <span class="nx">f<span class="p">() <span class="p">{  <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this <span class="o">=== <span class="nb">window<span class="p">); <span class="c1">// true<span class="p">}<br/>不管是不是在函数内部,只要是在全局环境下运行,<code class="highlighter-rouge">this</code>就是指顶层对象<code class="highlighter-rouge">window</code>。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span>
ログイン後にコピー

(2)构造函数

构造函数中的this,指的是实例对象。

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="kd">var <span class="nx">Obj <span class="o">= <span class="kd">function <span class="p">(<span class="nx">p<span class="p">) <span class="p">{  <span class="k">this<span class="p">.<span class="nx">p <span class="o">= <span class="nx">p<span class="p">;<span class="p">};<span class="nx">Obj<span class="p">.<span class="nx">prototype<span class="p">.<span class="nx">m <span class="o">= <span class="kd">function<span class="p">() <span class="p">{  <span class="k">return <span class="k">this<span class="p">.<span class="nx">p<span class="p">;<span class="p">};</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/><span style="font-size: 16px; font-family: "Microsoft YaHei"">上面代码定义了一个构造函数<code class="highlighter-rouge">Obj</code>。由于<code class="highlighter-rouge">this</code>指向实例对象,所以在构造函数内部定义<code class="highlighter-rouge">this.p</code>,就相当于定义实例对象有一个<code class="highlighter-rouge">p</code>属性;然后<code class="highlighter-rouge">m</code>方法可以返回这个p属性。</span>
ログイン後にコピー

(3)对象的方法

当A对象的方法被赋予B对象,该方法中的this就从指向A对象变成了指向B对象。所以要特别小心,将某个对象的方法赋值给另一个对象,会改变this的指向。

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="kd">var <span class="nx">obj <span class="o">=<span class="p">{  <span class="na">foo<span class="p">: <span class="kd">function <span class="p">() <span class="p">{<span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);  <span class="p">}<span class="p">};<span class="nx">obj<span class="p">.<span class="nx">foo<span class="p">() <span class="c1">// obj</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/>
ログイン後にコピー

obj.foo方法执行时,它内部的this指向obj

但是,只有这一种用法(直接在obj对象上调用foo方法),this指向obj;其他用法时,this都指向代码块当前所在对象(浏览器为window对象)。

// 情况一(obj.foo = obj.foo)() // window// 情况二(false || obj.foo)() // window// 情况三(1, obj.foo)() // window
ログイン後にコピー

obj.foo先运算再执行,即使它的值根本没有变化,this也不再指向obj了。

可以这样理解,在JavaScript引擎内部,objobj.foo储存在两个内存地址,简称为M1M2。只有obj.foo()这样调用时,是从M1调用M2,因此this指向obj。但是,上面三种情况,都是直接取出M2进行运算,然后就在全局环境执行运算结果(还是M2),因此this指向全局环境。

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="c1">// 情况一<span class="p">(<span class="nx">obj<span class="p">.<span class="nx">foo <span class="o">= <span class="kd">function <span class="p">() <span class="p">{  <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);<span class="p">})()<span class="c1">// 情况二<span class="p">(<span class="kc">false <span class="o">|| <span class="kd">function <span class="p">() <span class="p">{  <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);<span class="p">})()<span class="c1">// 情况三<span class="p">(<span class="mi">1<span class="p">, <span class="kd">function <span class="p">() <span class="p">{  <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);<span class="p">})()</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/><span style="font-size: 16px; font-family: "Microsoft YaHei"">同样的,如果某个方法位于多层对象的内部,这时为了简化书写,把该方法赋值给一个变量,往往会得到意料之外的结果。</span>
ログイン後にコピー
var a = {  b: {m: function() {      console.log(this.p);},p: &#39;Hello&#39;  }};var hello = a.b.m;hello() // undefined
ログイン後にコピー
上面代码中,m是多层对象内部的一个方法。为求简便,将其赋值给hello变量,结果调用时,this指向了顶层对象。为了避免这个问题,可以只将m所在的对象赋值给hello,这样调用时,this的指向就不会变。
ログイン後にコピー
<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="kd">var <span class="nx">hello <span class="o">= <span class="nx">a<span class="p">.<span class="nx">b<span class="p">;<span class="nx">hello<span class="p">.<span class="nx">m<span class="p">() <span class="c1">// Hello</span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/>
ログイン後にコピー

(4)Node

在Node中,this的指向又分成两种情况。全局环境中,this指向全局对象global;模块环境中,this

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="c1">// 全局环境<span class="k">this <span class="o">=== <span class="nx">global <span class="c1">// true<span class="c1">// 模块环境<span class="k">this <span class="o">=== <span class="nx">module<span class="p">.<span class="nx">exports <span class="c1">// true</span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/><span style="font-size: 16px; font-family: "Microsoft YaHei""><br/></span><br/><br/>
ログイン後にコピー

🎜 (2) コンストラクター 🎜🎜🎜🎜 コンストラクター内のthis はインスタンス オブジェクトを参照します。 🎜🎜
 <br/>
ログイン後にコピー
🎜🎜(3) オブジェクトのメソッド🎜🎜🎜🎜オブジェクトAのメソッドがオブジェクトBに代入されると、メソッド内のthisがオブジェクトAを指すように変わります。 to B オブジェクトを指すようになります。したがって、オブジェクトのメソッドを別のオブジェクトに割り当てると、this のポインタが変更されますので、特に注意してください。 🎜🎜rrreee🎜🎜 obj.foo メソッドが実行されると、その内部の thisオブジェクトコード>。 🎜🎜🎜🎜ただし、使用方法は 1 つだけです (<code class="highlighter-rouge">obj オブジェクトの foo メソッドを直接呼び出す) 、this は、他の用途の obj を指します。this > すべては、コード ブロックが現在配置されているオブジェクトを指します (ブラウザは <code class="highlighter-rouge">window オブジェクトです)。 🎜🎜rrreee🎜🎜obj.foo は、値がまったく変更されていない場合でも、最初に計算されてから実行されます。これは obj を指しなくなりました。 🎜🎜🎜🎜JavaScript エンジン内部では、objobj.foo が保存されていることがわかります。 2 つのメモリ アドレス。M1M2 と呼ばれます。このように obj.foo() が呼び出された場合のみ、M1 ">M2 から呼び出されます。 code> なので、thisobj を指します。ただし、上記 3 つのケースでは、M2 を直接取り出して計算し、その計算結果をグローバル環境で実行します (それでも M2 )、this は地球環境を指します。 🎜🎜rrreeerrreeerreerrreee🎜🎜 (4) Node🎜🎜🎜🎜 Node では、this のポイントは 2 つの状況に分けられます。グローバル環境では、this はモジュール環境のグローバル オブジェクト global を指します。 "highlighter-rouge ">this は module.exports を指します。 🎜🎜れーれーれー

以上がこれはどのように使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

マグネットリンクの使い方 マグネットリンクの使い方 Feb 18, 2024 am 10:02 AM

マグネット リンクは、リソースをダウンロードするためのリンク方法であり、従来のダウンロード方法よりも便利で効率的です。マグネット リンクを使用すると、中間サーバーに依存せずに、ピアツーピア方式でリソースをダウンロードできます。この記事ではマグネットリンクの使い方と注意点を紹介します。 1. マグネット リンクとは? マグネット リンクは、P2P (Peer-to-Peer) プロトコルに基づくダウンロード方式です。ユーザーはマグネット リンクを通じてリソースの発行者に直接接続し、リソースの共有とダウンロードを完了できます。従来のダウンロード方法と比較して、磁気

mdfおよびmdsファイルの使用方法 mdfおよびmdsファイルの使用方法 Feb 19, 2024 pm 05:36 PM

mdf ファイルと mds ファイルの使用方法 コンピューター技術の継続的な進歩により、さまざまな方法でデータを保存および共有できるようになりました。デジタル メディアの分野では、特殊なファイル形式に遭遇することがよくあります。この記事では、一般的なファイル形式である mdf および mds ファイルについて説明し、その使用方法を紹介します。まず、mdf ファイルと mds ファイルの意味を理解する必要があります。 mdf は CD/DVD イメージ ファイルの拡張子で、mds ファイルは mdf ファイルのメタデータ ファイルです。

CrystalDiskmarkとはどのようなソフトウェアですか? -crystaldiskmarkの使い方は? CrystalDiskmarkとはどのようなソフトウェアですか? -crystaldiskmarkの使い方は? Mar 18, 2024 pm 02:58 PM

CrystalDiskMark は、シーケンシャルおよびランダムの読み取り/書き込み速度を迅速に測定する、ハード ドライブ用の小型 HDD ベンチマーク ツールです。次に、編集者が CrystalDiskMark と Crystaldiskmark の使用方法を紹介します。 1. CrystalDiskMark の概要 CrystalDiskMark は、機械式ハード ドライブとソリッド ステート ドライブ (SSD) の読み取りおよび書き込み速度とパフォーマンスを評価するために広く使用されているディスク パフォーマンス テスト ツールです。 ). ランダム I/O パフォーマンス。これは無料の Windows アプリケーションで、使いやすいインターフェイスとハード ドライブのパフォーマンスのさまざまな側面を評価するためのさまざまなテスト モードを提供し、ハードウェアのレビューで広く使用されています。

foob​​ar2000のダウンロード方法は? -foobar2000の使い方 foob​​ar2000のダウンロード方法は? -foobar2000の使い方 Mar 18, 2024 am 10:58 AM

foob​​ar2000 は、音楽リソースをいつでも聴くことができるソフトウェアです。あらゆる種類の音楽をロスレス音質で提供します。音楽プレーヤーの強化版により、より包括的で快適な音楽体験を得ることができます。その設計コンセプトは、高度なオーディオをコンピュータ上で再生可能 デバイスを携帯電話に移植し、より便利で効率的な音楽再生体験を提供 シンプルでわかりやすく、使いやすいインターフェースデザイン 過度な装飾や煩雑な操作を排除したミニマルなデザインスタイルを採用また、さまざまなスキンとテーマをサポートし、自分の好みに合わせて設定をカスタマイズし、複数のオーディオ形式の再生をサポートする専用の音楽プレーヤーを作成します。過度の音量による聴覚障害を避けるために、自分の聴覚の状態に合わせて調整してください。次は私がお手伝いさせてください

Baidu Netdisk アプリの使用方法 Baidu Netdisk アプリの使用方法 Mar 27, 2024 pm 06:46 PM

クラウド ストレージは今日、私たちの日常生活や仕事に欠かせない部分になっています。中国有数のクラウド ストレージ サービスの 1 つである Baidu Netdisk は、強力なストレージ機能、効率的な伝送速度、便利な操作体験により多くのユーザーの支持を得ています。また、重要なファイルのバックアップ、情報の共有、オンラインでのビデオの視聴、または音楽の聴きたい場合でも、Baidu Cloud Disk はニーズを満たすことができます。しかし、Baidu Netdisk アプリの具体的な使用方法を理解していないユーザーも多いため、このチュートリアルでは Baidu Netdisk アプリの使用方法を詳しく紹介します。まだ混乱しているユーザーは、この記事に従って詳細を学ぶことができます。 Baidu Cloud Network Disk の使用方法: 1. インストール まず、Baidu Cloud ソフトウェアをダウンロードしてインストールするときに、カスタム インストール オプションを選択してください。

NetEase メールボックス マスターの使用方法 NetEase メールボックス マスターの使用方法 Mar 27, 2024 pm 05:32 PM

NetEase Mailbox は、中国のネットユーザーに広く使用されている電子メール アドレスとして、その安定した効率的なサービスで常にユーザーの信頼を獲得してきました。 NetEase Mailbox Master は、携帯電話ユーザー向けに特別に作成された電子メール ソフトウェアで、電子メールの送受信プロセスが大幅に簡素化され、電子メールの処理がより便利になります。 NetEase Mailbox Master の使い方と具体的な機能について、以下ではこのサイトの編集者が詳しく紹介しますので、お役に立てれば幸いです。まず、モバイル アプリ ストアで NetEase Mailbox Master アプリを検索してダウンロードします。 App Store または Baidu Mobile Assistant で「Ne​​tEase Mailbox Master」を検索し、画面の指示に従ってインストールします。ダウンロードとインストールが完了したら、NetEase の電子メール アカウントを開いてログインします。ログイン インターフェイスは次のとおりです。

BTCC チュートリアル: BTCC 取引所で MetaMask ウォレットをバインドして使用する方法は? BTCC チュートリアル: BTCC 取引所で MetaMask ウォレットをバインドして使用する方法は? Apr 26, 2024 am 09:40 AM

MetaMask (中国語ではリトル フォックス ウォレットとも呼ばれます) は、無料で評判の高い暗号化ウォレット ソフトウェアです。現在、BTCC は MetaMask ウォレットへのバインドをサポートしており、バインド後は MetaMask ウォレットを使用してすぐにログイン、値の保存、コインの購入などが可能になり、初回バインドで 20 USDT のトライアル ボーナスも獲得できます。 BTCCMetaMask ウォレットのチュートリアルでは、MetaMask の登録方法と使用方法、および BTCC で Little Fox ウォレットをバインドして使用する方法を詳しく紹介します。メタマスクウォレットとは何ですか? 3,000 万人を超えるユーザーを抱える MetaMask Little Fox ウォレットは、現在最も人気のある暗号通貨ウォレットの 1 つです。無料で使用でき、拡張機能としてネットワーク上にインストールできます。

Xiaoai スピーカーの使用方法 Xiaoai スピーカーを携帯電話に接続する方法 Xiaoai スピーカーの使用方法 Xiaoai スピーカーを携帯電話に接続する方法 Feb 22, 2024 pm 05:19 PM

スピーカーの再生ボタンを長押し後、ソフトウェア内でWi-Fiに接続すると使用可能になります。チュートリアル 該当するモデル: Xiaomi 12 システム: EMUI11.0 バージョン: Xiaoai Classmate 2.4.21 分析 1 まずスピーカーの再生ボタンを見つけ、長押ししてネットワーク配信モードに入ります。 2 携帯電話の Xiaoai Speaker ソフトウェアで Xiaomi アカウントにログインし、クリックして新しい Xiaoai Speaker を追加します。 3. Wi-Fi の名前とパスワードを入力した後、Xiao Ai に電話して使用することができます。補足: Xiaoai Speakerにはどのような機能がありますか? 1 Xiaoai Speakerには、システム機能、ソーシャル機能、エンターテイメント機能、ナレッジ機能、ライフ機能、スマートホーム、トレーニングプランがあります。概要/注意事項: 簡単に接続して使用するには、Xiao Ai アプリを事前に携帯電話にインストールしておく必要があります。

See all articles