JavaScript でローカル変数をグローバル変数に変換する方法

JavaScript でローカル変数をグローバル変数に変換する方法

まず関数の自己呼び出しを知る必要がある

関数の自己呼び出し - 自己呼び出し関数

1 回限りの関数 - 直接宣言され、呼び出されます。例:

(関数 () {
  console.log("関数");

})();

ブラウザが「函數」という2つの単語を直接出力しているのがわかります。

ページが読み込まれた後、この自己呼び出し関数のコードが実行されます。

フォームを使用する

(関数 (パラメータ) {
  
})(実際のパラメータ);

知らせ

コンストラクタを最初から呼び出す場合は、セミコロンを追加する必要があります。

では、ローカル変数をグローバル変数に変換するにはどうすればよいでしょうか?

ローカル変数をウィンドウに渡すだけです

(関数 (win) {
  var num=10;//ローカル変数//js は動的型付け言語です。オブジェクトには属性がないので、クリックするだけです。win.num=num;
})(ウィンドウ);
console.log(数値);

このページにはnumが印刷されます

ここに画像の説明を挿入

応用例1——ウィンドウに乱数オブジェクトを割り当てる

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <スクリプト>

     // 自己呼び出し関数を通じて乱数オブジェクトを生成します。自己呼び出し関数の外側で、乱数オブジェクトメソッドを呼び出して乱数を生成します (function (window) {
       //乱数を生成するコンストラクタ関数 function Random() {
       }
       //プロトタイプオブジェクトにメソッドを追加します。Random.prototype.getRandom = function (min,max) {
         Math.floor(Math.random()*(max-min)+min) を返します。
       };
       //Random オブジェクトを最上位オブジェクト ウィンドウに公開します--->このオブジェクトは window.Random の外部で直接使用できます。=Random;
     })(ウィンドウ);
     //乱数オブジェクトをインスタンス化します。var rm=new Random();
     //乱数を生成するメソッドを呼び出す console.log(rm.getRandom(0,5));



    //グローバル変数</script>
</head>
<本文>


</本文>
</html>

応用例2 - ランダムな位置に小さな四角形を生成する

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <メタ>
  <title>タイトル</title>
  <スタイル>
    。地図{
      幅: 800ピクセル;
      高さ: 600px;
      背景色: #CCC;
      位置: 相対的;
    }
  </スタイル>
</head>
<本文>
<div class="map"></div>
<script src="common.js"></script>
<スクリプト>
  //乱数オブジェクトを生成する(関数(ウィンドウ){
    関数ランダム() {
    }
    Random.prototype.getRandom=関数(最小値、最大値) {
      Math.floor(Math.random()*(max-min)+min) を返します。
    };
    // ローカル オブジェクトをウィンドウのトップレベル オブジェクトに公開すると、グローバル オブジェクトになります。window.Random=new Random();
  })(window);//自己呼び出しコンストラクタメソッド、セミコロンを追加する必要があります//小さな正方形のオブジェクトを生成します (function (window) {
    //console.log(Random.getRandom(0,5));
    //セレクター メソッドを使用して要素オブジェクトを取得します var map = document.querySelector(".map");

    //食品コンストラクタ関数 Food(width,height,color) {
      this.width=width||20;//小さな四角形のデフォルトの幅 this.height=height||20;//小さな四角形のデフォルトの高さ //水平座標、垂直座標 this.x=0;//水平座標はランダムに生成されます this.y=0;//垂直座標はランダムに生成されます this.color=color;//小さな四角形の背景色 this.element=document.createElement("div");//小さな四角形の要素 }
    //小さな四角形の表示効果と位置を初期化します---地図上に表示します Food.prototype.init=function (map) {
      // 小さな四角形のスタイルを設定します var div=this.element;
      div.style.position="absolute";//ドキュメントフロー外 div.style.width=this.width+"px";
      div.style.height=this.height+"px";
      div.style.backgroundColor=この色;
      //マップに小さな四角形を追加します。map.appendChild(div);
      これをレンダリングします(マップ);
    };
    //ランダムな位置を生成する Food.prototype.render = function (map) {
      //水平座標と垂直座標をランダムに生成します var x=Random.getRandom(0,map.offsetWidth/this.width)*this.width;
      var y=Random.getRandom(0,map.offsetHeight/this.height)*this.height;
      .x = x;
      y = y;
      var div = this.element;
      div.style.left=this.x+"px";
      div.style.top=this.y+"px";
    };

    //オブジェクトをインスタンス化します var fd = new Food(20,20,"green");
    fd.init(マップ);
    console.log(fd.x+"===="+fd.y);

    
  })(ウィンドウ);


  // 関数リフレッシュ(){
  // ウィンドウの場所を再読み込みします。
  // }
  // タイムアウトを設定します(refresh(), 1000);
</スクリプト>
</本文>
</html>

これで、JavaScript でローカル変数をグローバル変数に変換する方法についての記事は終了です。JavaScript でローカル変数をグローバル変数に変換する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript変数オブジェクトの詳細な理解
  • JavaScript 変数と変換の詳細
  • JavaScript 変数の型と変数間の変換を理解していますか?
  • JavaScript での変数宣言をご存知ですか?
  • JavaScript の基本変数
  • JavaScript 変数の昇格についての簡単な説明
  • JS ES6 変数分割代入の詳細な説明
  • 文字列連結と変数の適用に関する Javascript 初心者向けガイド
  • JS変数プロモーションの原理と使用例の簡単な分析
  • JavaScript での変数の使用

<<:  Ubuntu に MySQL 5.7 をインストールし、データ ストレージ パスを構成する方法

>>:  Linux 上の Tomcat で MySQL にデータを挿入するときに中国語の文字化けが発生する問題を解決する

推薦する

Dockerのオンラインおよびオフラインインストールと一般的なコマンド操作

1. テスト環境名前バージョンセント7.6ドッカー18.09.06 2. オンラインインストールここ...

高度な JavaScript フロントエンド開発でよく使用されるいくつかの API の例の詳細な説明

目次ミューテーションオブザーバーAPI特徴インターセクションオブザーバーAPI例えば画像の遅延読み込...

ReactのEffectListの簡単な分析

目次EffectList コレクション最初のレンダリング時のEffectList EffectLis...

CSS3 は 3D キューブの読み込み効果を作成します

簡単な説明これは CSS3 のクールな 3D キューブのプリロード効果です。この特殊効果は、シンプル...

ウェブページ内のFlash SWFファイルを変更する方法

これは多くの人が遭遇した問題だと思います。実際、Web ページから FLASH をダウンロードして修...

Dockerfile をベースに Zabbix 監視システムのコード例を作成する

forループを使用してZabbixイメージをコンテナにインポートします。 n を `ls *.tar...

Tomcat マルチポートドメイン名アクセスと gzip 圧縮方式を有効にする構成

1. デフォルトのポート8080に加えて、ドメイン名のアクセスとserver.xmlのオープンにポー...

テーブルタグ(テーブル)詳細

<br />テーブルは、昔から誰もが使ってきたタグで、今も使われています。しかし、現在の...

vscodeを使用してuniappを開発する方法

私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...

JSON.stringify のさまざまな用途のまとめ

序文json を使用したことがある人なら、オブジェクトを文字列化してからバックエンドに送信するのが一...

Linux でアップロードされたファイルのスケジュールされたバックアップと増分バックアップを実装する方法

導入Alibaba Cloud のような OSS ストレージ サービスを使用している場合は、サービス...

Layuiテーブルは指定された行のラジオボタンを選択し、その行の実装コードまでスクロールします。

layui テーブルには複数行のデータがあります。外部入力コンテンツを通じて、指定された行を見つけ...

Mysql 8.0.17 winx64バージョンのインストール中に発生した問題を解決する

1. my.iniファイルを手動で作成して追加する # クライアントセクション # --------...

CSSアニメーションを途中で止めて姿勢を維持する方法

序文かつて、難しい問題に遭遇しました。タワークレーンからスイングハウスを落下させる必要がありましたが...

Zenコーディングリソース更新機能強化

公式サイト: http://code.google.com/p/zen-coding/ Zen コー...