ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でオブジェクトをカスタマイズする方法

JavaScript でオブジェクトをカスタマイズする方法

青灯夜游
リリース: 2023-01-07 11:41:26
オリジナル
5026 人が閲覧しました

カスタム メソッド: 1. 「属性名/値」、構文「var オブジェクト名={属性名:属性値};」を使用して直接作成します。 2. 「var オブジェクト名=新しいコンストラクター名 (args)」を使用します。 );" ステートメント; 3. "Object.create (プロトタイプ オブジェクト、記述子)" ステートメントを使用します。

JavaScript でオブジェクトをカスタマイズする方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

Js では、Array、Date、Number などの組み込みオブジェクトに加えて、開発者は Js コードを通じて独自のオブジェクトを作成できます。

オブジェクトの特性

① 構造は「辞書」に似ています: オブジェクトのプロパティはキーと値のペアに似ています。プロパティは文字列で、プロパティの値は Any 型です。

② プロトタイプの継承: Js オブジェクトはプロトタイプのプロパティを継承できます。

③ 動的構造: オブジェクトの属性を動的に追加および削除できます。

④ 参照型: js のオブジェクトは参照型です。 a はオブジェクトであり、b=a であり、b を変更すると a も変更されます。

オブジェクトの作成方法

Js でカスタム オブジェクトを作成するには、オブジェクト リテラル、新しいコンストラクター、Object.create() メソッドの 3 つの主な方法があります。 各作成メソッドで継承されるプロトタイプオブジェクトは異なります:

① オブジェクト直接量: プロトタイプは Object.prototype です。

② 新しいコンストラクター: プロトタイプはコンストラクターのプロトタイプ属性です。

③ Object.create(): プロトタイプは、渡される最初のパラメーターです。最初のパラメーターが null の場合、Object.prototype がプロトタイプとして使用されます。

1. オブジェクトの直接数量

説明: 属性名/値を通じて直接作成されます。

構文: var o = { name:'tom', age:22 };

プロトタイプ: Object .prototype

適用可能なシナリオ: 特定のスコープに適用します。

#例:

var o = {
    name: 'tom'
}
console.log(o.constructor.prototype); // => Object() :对象直接量的原型为Object
console.log(o.constructor.prototype === Object.prototype); // true
ログイン後にコピー

2.新しいコンストラクター

説明:Constructor も関数の一種ですが、よく使われる関数を区別するため、コンストラクターの関数名をキャメルケース(先頭文字を大文字)で表記しています。

構文: var o = new ClassName();

プロトタイプ: コンストラクターのプロトタイプ属性。

例:

// 1.创建构造函数
function People(name) {
    this.name;
}

var p = new People('Tom');
console.log(p.constructor.prototype); // => People{} :原型为构造函数的prototype
console.log(p.constructor.prototype === People.prototype); // => true

// 2.自定义对象的多层继承 :constructor返回最先调用的构造函数 
function Student(age) {
    this.age = age;
}
Student.prototype = new People(); // 设置Student的原型为People对象

var s = new Student(22); // 对象初始化时,先调用People(),再调用Student()
console.log(s.constructor); // => function People :对象s返回的构造函数为People
console.log(s.constructor.prototype); // => People{} :原型对象为People
console.log(s.constructor.prototype === People.prototype); // => true
ログイン後にコピー

3、Object.create(prototype, propertyDescriptor): ECMAScript 5 仕様

説明: 指定されたプロトタイプと指定されたプロパティを持つオブジェクトを作成して返します。

構文: Object.create(prototype, propertyDescriptor)

パラメータ:

①prototype {prototype}: オブジェクトのプロトタイプを作成します。 、null にすることもできます。 null の場合、オブジェクトのプロトタイプは未定義です。

②propertyDescriptor {propertyDescriptor} オプション: プロパティ記述子。

プロトタイプ: サイレント プロトタイプ タイプはパラメーター①です。パラメーター①が null の場合、オブジェクトのプロトタイプは未定義です。

例:

// 1.建立一个原型为null的对象
var o = Object.create(null, {
    name: {
        value: 'tom'
    }
});
console.log(o.constructor); // => undefined 

// 2.创建一个原型为Array的对象
var array = Object.create(Array.prototype, {});
console.log(array.constructor); // => function Array 构造函数 
console.log(array.constructor.prototype); // => [] :原型对象为数组

// 3.创建一个原型为自定义类的对象
function People() { }
var p = Object.create(People.prototype, {});
console.log(p.constructor); // => function People 构造函数 
console.log(p.constructor.prototype); // => People{} :原型对象People
ログイン後にコピー

[関連する推奨事項:

JavaScript 学習チュートリアル]

以上がJavaScript でオブジェクトをカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート