まず関数の自己呼び出しを知る必要がある 関数の自己呼び出し - 自己呼び出し関数1 回限りの関数 - 直接宣言され、呼び出されます。例: (関数 () { console.log("関数"); })(); ブラウザが「 ページが読み込まれた後、この自己呼び出し関数のコードが実行されます。 フォームを使用する (関数 (パラメータ) { })(実際のパラメータ); 知らせ コンストラクタを最初から呼び出す場合は、セミコロンを追加する必要があります。 では、ローカル変数をグローバル変数に変換するにはどうすればよいでしょうか?ローカル変数をウィンドウに渡すだけです (関数 (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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntu に MySQL 5.7 をインストールし、データ ストレージ パスを構成する方法
>>: Linux 上の Tomcat で MySQL にデータを挿入するときに中国語の文字化けが発生する問題を解決する
ここでは、フォーム要素とフォーム送信に関する知識を紹介します。フォーム要素フォーム要素の DOM イ...
序文まずは最終的な効果を見てみましょう。私が自分で作った小さなデモです。まずEChartsの公式サイ...
問題の説明Ele.me UI のフレームワークでは、入力データは el-form であり、出力データ...
目次序文環境インストールMySQLコンテナを作成して起動する思い出させるMySQLコンテナコマンドを...
目次仮想DOM仮想DOMとは何か仮想DOMの役割Vue の仮想 DOM vノードvNodeとはvNo...
エンジニアリング構造プロジェクトは2つの部分に分かれています。bilibili-apiはAPIインタ...
目次序文keep-avlive フック関数keep-avliveはどのコンポーネントをキャッシュする...
目次1. 問題の説明: 2. Jenkins設定のトラブルシューティング3. コードログのエンコード...
この記事では、参考までに、シンプルなページカウントダウンを実装するためのJavaScriptの具体的...
HTML5 では、ヘッダー、フッター、ナビゲーションなどのセマンティック タグが追加されているため...
この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...
この記事を読む前に、Volumes について予備知識を身に付けておいてください。詳細については、こち...
目次典型的なウォーターフォールウェブサイトウォーターフォールフローレイアウトの原則一般的な考え方具体...
1 ダウンロードアドレスは https://dev.mysql.com/downloads/mysq...
目次01. レンダリングが不要な場合はuseStateを使用する02. リンクの代わりにrouter...