ホームページ ウェブフロントエンド jsチュートリアル jsオブジェクトをベースにしたプロパティやメソッドの操作を詳しく解説

jsオブジェクトをベースにしたプロパティやメソッドの操作を詳しく解説

Feb 08, 2017 pm 05:48 PM

1. 概要

Java 言語では、独自のクラスを定義し、それらのクラスに基づいて使用するオブジェクトを作成できます。たとえば、User クラス、Hashtable クラスなどを定義することもできます。

現在、JavaScript には Date、Array、RegExp、String、Math、Number などの標準クラスがいくつかあり、プログラミングに非常に便利です。しかし、複雑なクライアント プログラムの場合、これだけでは十分ではありません。

Java とは異なり、Java2 は基本的にプログラミングのニーズを満たす多くの標準クラスを提供します。しかし、JavaScript が提供する標準クラスは非常に少なく、多くのプログラミングのニーズは自分で実装する必要があります。たとえば、JavaScript にはハッシュテーブルがありません。なので、キー値を扱うのは非常に不便です。

したがって、私は個人的に、完全な Javascript オブジェクト ビューは次のようになるべきだと考えています:

2. 基本概念

1. カスタム オブジェクト。

JS のオブジェクト拡張メカニズムに従って、ユーザーは Java 言語に似た JS オブジェクトをカスタマイズできます。

カスタムオブジェクトに対応するのは、Date、Array、MathなどのJS標準オブジェクトです。

2. プロトタイプ

JS では、プロトタイプを通じてオブジェクトに新しいプロパティとメソッドを追加する方法です。

プロトタイプを通じて、JS 標準オブジェクトに新しいプロパティとメソッドを追加できます。たとえば、String オブジェクトの場合は、新しいメソッド trim() を追加できます。

Java などの厳密なプログラミング言語とは異なり、実行時に JS オブジェクトに新しいプロパティを動的に追加できます。

三、構文規則

1、オブジェクト作成メソッド

1) オブジェクト初期化メソッド

形式: objectName = {property1:value1, property2:value2,…, propertyN:valueN}

propertyはオブジェクトのプロパティです

value は、オブジェクトの値です。例: var user={name: "user1",age:18};

var user={name: " user1" ",job:{salary:3000,title:programmer}

この方法で、オブジェクトのメソッドを初期化することもできます。例:

var user={name:“user1”,age:18,getName:function(){
 
return this.name;
 
}
 
}
ログイン後にコピー

以下では、次の定義を含むコンストラクター メソッドに焦点を当てます。属性とメソッドについては、コンストラクターのメソッドについても説明します。

2) コンストラクターメソッド

コンストラクターを記述し、新しいメソッドを通じてオブジェクトを作成します。コンストラクターには構築パラメーターを含めることができます

例:

function User(name,age){
 
this.name=name;
 
this.age=age;
 
this.canFly=false;
 
}
 
var use=new User();
ログイン後にコピー

2. オブジェクトの属性を定義します

1) JS の場合 3 種類のプロパティオブジェクトに対して定義できるのは、プライベート プロパティ、インスタンス プロパティ、クラス プロパティです。Java と同様、プライベート プロパティはオブジェクト内でのみ使用でき、インスタンス プロパティはオブジェクトのインスタンスを通じて参照する必要があり、クラス プロパティはオブジェクトを通じて直接参照できます。クラス名を参照します。

2) プライベート プロパティの定義

プライベート プロパティはコンストラクター内でのみ定義および使用できます。

文法形式: var propertyName=value;

例:

function User(age){
 
this.age=age;
 
var isChild=age<12;
 
this.isLittleChild=isChild;
 
}
 
var user=new User(15);
 
alert(user.isLittleChild);//正确的方式
 
alert(user.isChild);//报错:对象不支持此属性或方法
ログイン後にコピー

3) インスタンスのプロパティを定義するには 2 つの方法があります:

prototype メソッド、構文形式: functionName.prototype.propertyName=value

このメソッド, 文法形式: this.propertyName=value、次の例では this の位置に注意してください

上記の値には、文字、数字、オブジェクトを使用できます。

例:

function User(){ }
 
User.prototype.name=“user1”;
 
User.prototype.age=18;
 
var user=new User();
 
alert(user.age);
 
—————————————–
 
function User(name,age,job){
 
this.name=“user1”;
 
this.age=18;
 
this.job=job;
 
}
 
alert(user.age);
ログイン後にコピー

3) クラス属性定義

文法形式: functionName.propertyName=value

例:

function User(){ }
 
User.MAX_AGE=200;
 
User.MIN_AGE=0;
 
alert(User.MAX_AGE);
ログイン後にコピー

JS標準オブジェクトのクラス属性を参照:

Number.MAX_VALUE //最大値 Math.PI //Pi

4) 属性の定義については、上記のより正式な方法に加えて、非常に特殊な定義方法、構文形式 obj[index]=value

もあります。

例:

function User(name){
 
this.name=name;
 
this.age=18;
 
this[1]=“ok”;
 
this[200]=“year”;
 
}
 
var user=new User(“user1”);
 
alert(user[1]);
ログイン後にコピー

上記の例では、age 属性は this[1] を通じて取得できず、name 属性は this[0] を通じて取得できないことに注意してください。つまり、index メソッドを使用する必要があります。は、index メソッドで定義された属性を参照するために使用されますが、index メソッドでは定義されていません。通常の方法で参照する必要があります

3、オブジェクトのメソッドを定義します

1) JS のオブジェクトには 3 種類のメソッドを定義できます。 : Java と同様のプライベート メソッド、インスタンス メソッド、およびクラス メソッド:

プライベート メソッドは、オブジェクト内でのみ使用できます。

オブジェクト内で使用されるインスタンス メソッドは、オブジェクトがインスタンス化された後に使用する必要があります。

クラス メソッドは、

注: メソッドの定義は、上記のインデックス メソッドを通じて行うことはできません。

2) プライベート メソッドを定義する

プライベート メソッドはコンストラクター本体内で定義する必要があり、コンストラクター本体内でのみ使用できます。

構文形式: function methodName(arg1,…,argN){ }

例:

function User(name){
 
this.name=name;
 
function getNameLength(nameStr){
 
return nameStr.length;
 
}
 
this.nameLength=getNameLength(this.name);
 
}
ログイン後にコピー

3) インスタンス メソッドを定義する方法は現在 2 つあります:

プロトタイプ メソッド、コンストラクターの外部で使用、構文。形式:

functionName.prototype.methodName=method;

または

functionName.prototype.methodName=function(arg1,…,argN){};

このメソッドはコンストラクター内で使用されます。構文形式:

this .methodName=method;

または

this.methodName=function(arg1,...,argN){};

上記の構文の説明では、method は既存の外部メソッドであり、methodName はオブジェクトです。定義されるメソッドとは、オブジェクトのメソッドに外部メソッドを直接割り当てることを意味します。

以function(arg1,…,argN){}的方式定义对象方法是开发人员应该掌握的。

定义实例方法的一些例子:例子1

function User(name){
 
this.name=name;
 
this.getName=getUserName;
 
this.setName=setUserName;
 
}
 
function getUserName(){
 
return this.name;
 
}
 
Function setUserName(name){
 
this.name=name;
 
}
ログイン後にコピー

定义实例方法的一些例子:例子2

function User(name){
 
this.name=name;
 
this.getName=function(){
 
return this.name;
 
};
 
this.setName=function(newName){
 
this.name=newName;
 
};
 
}
ログイン後にコピー

定义实例方法的一些例子:例子3

function User(name){
 
this.name=name;
 
}
 
User.prototype.getName=getUserName;
 
User.prototype.setName=setUserName();
 
function getUserName(){
 
return this.name;
 
}
 
Function setUserName(name){
 
this.name=name;
 
}
ログイン後にコピー

定义实例方法的一些例子:例子4

function User(name){
 
this.name=name;
 
}
 
User.prototype.getName=function(){
 
return this.name;
 
};
 
User.prototype.setName=function(newName){
 
this.name=newName;
 
};
ログイン後にコピー

4)定义类方法

类方法需要在构造函数外面定义,可以直接通过构造函数名对其进行引用。

语法格式:

functionName.methodName=method;

或者

functionName.methodName=function(arg1,…,argN){};

例子:

function User(name){
 
this.name=name;
 
}
 
User.getMaxAge=getUserMaxAge;
 
function getUserMaxAge(){
 
return 200;
 
}
ログイン後にコピー

或者

User.getMaxAge=function(){return 200;};

alert(User.getMaxAge());

4,属性与方法的引用

1)从可见性上说:

私有属性与方法,只能在对象内部引用。

实例属性与方法,可以在任何地方使用,但必须通过对象来引用。

类属性与方法,可以在任何地方使用,但不能通过对象的实例来引用(这与Java不同,在Java中静态成员可以通过实例来访问)。

2)从对象层次上说:

与Java bean的引用类似,可以进行深层次的引用。

几种方式:

简单属性:obj.propertyName

对象属性:obj.innerObj.propertyName

索引属性:obj.propertyName[index]

对于更深层次的引用与上面类似。

3)从定义方式上说:

通过index方式定义的属性,必须通过index方式才能引用。

通过非index方式定义的属性,必须通过正常的方式才能引用。

另外注意:对象的方法不能通过index方式来定义。

5,属性与方法的动态增加和删除

1)对于已经实例化的对象,我们可以动态增加和删除它的属性与方法,语法如下(假定对象实例为obj):

动态增加对象属性

obj.newPropertyName=value;

动态增加对象方法

obj.newMethodName=method或者=function(arg1,…,argN){}

动态删除对象属性

delete obj.propertyName

动态删除对象方法

delete obj.methodName

2)例子:

function User(name){
 
this.name=name;
 
this.age=18;
 
}
 
var user=new User(“user1”);
 
user.sister=“susan”;
 
alert(user.sister);//运行通过
 
delete user.sister;
 
alert(user.sister);//报错:对象不支持该属性
 
user.getMotherName=function(){return “mary”;}
 
alert(user.getMotherName());//运行通过
 
delete user.getMotherName;
 
alert(user.getMotherName());//报错:对象不支持该方法
ログイン後にコピー

四,总结

1,自定义对象机制,是JS最为吸引人的机制之一,对于C++和Java程序员而言,这简直太棒了!

2,对象创建存在两种方式:对象初始化器和构造函数。

3,对象属性和方法,具有可见性的约束,不同可见性的属性和方法,其定义方式也不一样。

以上这篇基于js对象,操作属性、方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。

更多基于js对象,操作属性、方法详解相关文章请关注PHP中文网!

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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)

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解:それが何をするのか、なぜそれが重要なのか javascriptの分解:それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は?
または:
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は? または: Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。

JavaScriptは学ぶのが難しいですか? JavaScriptは学ぶのが難しいですか? Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。

フロントエンド開発でVSCodeと同様に、パネルドラッグアンドドロップ調整機能を実装する方法は? フロントエンド開発でVSCodeと同様に、パネルドラッグアンドドロップ調整機能を実装する方法は? Apr 04, 2025 pm 02:06 PM

フロントエンドのVSCodeと同様に、パネルドラッグアンドドロップ調整機能の実装を調べます。フロントエンド開発では、VSCODEと同様のVSCODEを実装する方法...

Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

See all articles