ホームページ ウェブフロントエンド jsチュートリアル JavaScript オブジェクトとは何ですか?オブジェクトコードの作り方を詳しく解説

JavaScript オブジェクトとは何ですか?オブジェクトコードの作り方を詳しく解説

Jul 24, 2017 pm 03:36 PM
javascript js 作成する

オブジェクトとは何ですか? JavaScript の定義から、オブジェクトは順序付けされていないプロパティのコレクションであり、そのプロパティには基本的な値、オブジェクト、または関数を含めることができます。つまり、オブジェクトは、特定の順序ではない属性のセットであり、値はデータまたはオブジェクトのセットである値にマップされます。

最も単純なオブジェクト

JavaScript の中括弧 {} のペアでオブジェクトを定義できます。この記述方法は、実際には Object のコンストラクターを呼び出すのと同じです

var obj={};
var obj2=new Object();
ログイン後にコピー

この方法で構築されたオブジェクトには、プロトタイプへのポインターのみが含まれます。 Object の場合は、 valueOf 、 hasQwnProperty 、およびその他のメソッドを使用できますが、実際的な効果はほとんどありません。カスタム オブジェクトには常にいくつかのカスタム属性とメソッドがあります。

var obj={};
            obj.a=0;
            obj.fn=function(){
                alert(this);
            }
            var obj2={
                a:0,
                fn:function(){
                    alert(this);
                }
            }
ログイン後にコピー

オブジェクトを定義した後に「.」を使用してプロパティとメソッドを追加することも、オブジェクトを定義するときにリテラル割り当てメソッドを使用してプロパティとメソッドを追加することもできます。クラスの静的変数や静的関数と同様に、オブジェクト参照を使用してオブジェクトを作成する場合には、明らかな欠陥があります。多数のオブジェクトを定義するのは非常に手間がかかり、ほとんど繰り返しのコードを何度も書かなければなりません。また。

今度は関数が登場します。JavaScript では関数はオブジェクトです。オブジェクトを作成するときに、関数を直接オブジェクトとして使用できます。これは関数の特殊性です。オブジェクトとして。

1. 関数はパラメーターを受け入れることができ、パラメーターに基づいて同じタイプの異なる値のオブジェクトを作成できます

2. 関数がコンストラクターとして使用される場合 (new 演算子を介して呼び出される)、戻り値が返されます。 jQuery の貧しい中流階級のバージョンで言及されているように、オブジェクト コンストラクターの基本的な知識があれば、それをコピーするだけです

コンストラクターの戻り値は、関数が return ステートメントを持たない場合と基本的な関数を返す場合の 2 つの状況に分けられます。型 (bool、int、string、unknown、null) の場合は返されます。 new によって作成された匿名オブジェクトは関数インスタンスです。参照型オブジェクト (Array、Function、Object など) が関数本体で返された場合、そのオブジェクトが返されます。 new によって作成された匿名オブジェクトが戻り値として上書きされます。

3. では、関数を使用して型識別の問題を解決するにはどうすればよいでしょうか? 各関数インスタンス オブジェクトにはコンストラクター属性があります (「ある」ではなく、対応することができます)。 instanceof 演算子は、オブジェクトが XXX のインスタンスであるかどうかを判断するために使用されます。

コードは次のとおりです:

function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }
            var person1=new Person('Byron');
            console.log(person1.constructor==Person);//true
            console.log(person1 instanceof Person); //true
ログイン後にコピー
これは完璧です、いいえ!コンストラクターはオブジェクト固有にすることができますが、メソッドはオブジェクトのすべてのインスタンスで繰り返す必要があります。
function Person(name){
                this.name=name;
                this.fn=function(){
                    alert(this.name);
                }
            }
            var person1=new Person('Byron');
            var person2=new Person('Frank');
            console.log(person1.fn==person2.fn);//false
ログイン後にコピー

ほら、2 つのインスタンスの fn はまったく同じですが、それらは同じものではありません。関数オブジェクトに 1000 のメソッドがある場合、そのインスタンスのそれぞれにこれらのメソッドのコピーが含まれている必要があり、これは非常に面倒です。思い出は言葉にならない。

繰り返しの作業を必要とせず、スタイリッシュで、オブジェクトの一般的なメソッドを繰り返す必要がない、オブジェクトを構築するほぼ完璧な方法はありますか?実際、関数の使用はすでに要件に近いことがわかります。唯一の違いは、関数オブジェクトのすべてのインスタンスで共有されるコンテナーが必要であるということです。このコンテナーでは、インスタンスは属性とメソッドを共有する必要があります。たまたま、このコンテナは準備ができています - プロトタイプ、プロトタイプを知らない学生は、JavaScript プロトタイプを見てみることができます

function Person(name){
                this.name=name;
            }
            Person.prototype.share=[];
            Person.prototype.printName=function(){
                alert(this.name);
            }
            var person1=new Person('Byron');
            var person2=new Person('Frank');
            console.log(person1.printName==person2.printName);//true
ログイン後にコピー
このように、 Person の各インスタンスには独自の属性名があり、属性 share とメソッド printName もあります。すべてのインスタンスで共有される一般的なオブジェクト処理では、常にこのスタイリッシュで愛情のあるモードでオブジェクトを作成できます。

以上がJavaScript オブジェクトとは何ですか?オブジェクトコードの作り方を詳しく解説の詳細内容です。詳細については、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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

Realme Phoneでフォルダーを作成するにはどうすればよいですか? Realme Phoneでフォルダーを作成するにはどうすればよいですか? Mar 23, 2024 pm 02:30 PM

タイトル: Realme Phone 初心者ガイド: Realme Phone でフォルダーを作成する方法?今日の社会において、携帯電話は人々の生活に欠かせないツールとなっています。人気のスマートフォン ブランドとして、Realme Phone はそのシンプルで実用的なオペレーティング システムでユーザーに愛されています。 Realme 携帯電話を使用する過程で、多くの人が携帯電話上のファイルやアプリケーションを整理する必要がある状況に遭遇する可能性があり、フォルダーを作成するのが効果的な方法です。この記事では、ユーザーが携帯電話のコンテンツをより適切に管理できるように、Realme 携帯電話にフォルダーを作成する方法を紹介します。いいえ。

GIMPでピクセルアートを作成する方法 GIMPでピクセルアートを作成する方法 Feb 19, 2024 pm 03:24 PM

この記事は、Windows でのピクセル アート作成に GIMP を使用することに興味がある場合に役立ちます。 GIMP は、無料でオープンソースであるだけでなく、美しい画像やデザインを簡単に作成できる有名なグラフィック編集ソフトウェアです。 GIMP は、初心者にもプロのデザイナーにも同様に適していることに加えて、描画と作成のための唯一の構成要素としてピクセルを利用するデジタル アートの形式であるピクセル アートの作成にも使用できます。 GIMP でピクセル アートを作成する方法 Windows PC で GIMP を使用してピクセル アートを作成する主な手順は次のとおりです。 GIMP をダウンロードしてインストールし、アプリケーションを起動します。新しいイメージを作成します。幅と高さのサイズを変更します。鉛筆ツールを選択します。ブラシの種類をピクセルに設定します。設定

Gree+ でファミリーを作成する方法 Gree+ でファミリーを作成する方法 Mar 01, 2024 pm 12:40 PM

「Gree+ ソフトウェアでファミリーを作成する方法を知りたい」という友達がたくさんいました。操作方法は次のとおりです。詳しく知りたい友達は、一緒に見に来てください。まず、携帯電話で Gree+ ソフトウェアを開き、ログインします。次に、ページ下部のオプション バーで、右端の [My] オプションをクリックして、個人アカウント ページに入ります。 2. マイページにアクセスすると、「ファミリー」の下に「ファミリーを作成」という項目があるので、それをクリックして入力します。 3. 次にファミリーを作成するページにジャンプし、表示に従って入力ボックスに設定するファミリー名を入力し、入力後右上の「保存」ボタンをクリックします。 4. 最後に、ページの下部に「正常に保存しました」というプロンプトが表示され、ファミリが正常に作成されたことが示されます。

iPhone 用の連絡先ポスターを作成する方法 iPhone 用の連絡先ポスターを作成する方法 Mar 02, 2024 am 11:30 AM

iOS17 では、Apple は一般的に使用される電話アプリと連絡先アプリに連絡先ポスター機能を追加しました。この機能を使用すると、ユーザーは連絡先ごとにパーソナライズされたポスターを設定できるため、アドレス帳がより視覚的で個人的なものになります。連絡先ポスターは、ユーザーが特定の連絡先をより迅速に識別して見つけるのに役立ち、ユーザー エクスペリエンスを向上させます。この機能により、ユーザーは自分の好みやニーズに応じて各連絡先に特定の写真やロゴを追加でき、アドレス帳のインターフェイスがより鮮明になり、iOS17 では Apple は iPhone ユーザーに自分自身を表現する新しい方法を提供し、パーソナライズ可能な連絡先ポスターを追加しました。連絡先ポスター機能を使用すると、他の iPhone ユーザーに電話をかけるときに、独自のパーソナライズされたコンテンツを表示できます。あなた

Django の概要: コマンド ラインを使用して最初の Django プロジェクトを作成する Django の概要: コマンド ラインを使用して最初の Django プロジェクトを作成する Feb 19, 2024 am 09:56 AM

Django プロジェクトの旅を始めましょう: コマンド ラインから開始して、最初の Django プロジェクトを作成します。Django は、強力で柔軟な Web アプリケーション フレームワークです。Python をベースにしており、Web アプリケーションの開発に必要な多くのツールと機能を提供します。この記事では、コマンド ラインから最初の Django プロジェクトを作成する方法を説明します。始める前に、Python と Django がインストールされていることを確認してください。ステップ 1: プロジェクト ディレクトリを作成する まず、コマンド ライン ウィンドウを開き、新しいディレクトリを作成します。

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する 株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

See all articles