ホームページ > 記事 > ウェブフロントエンド > js のオブジェクト指向とオブジェクト型の簡単な紹介 (コード付き)

js のオブジェクト指向とオブジェクト型の簡単な紹介 (コード付き)

不言オリジナル: 2018-08-15 13:42:481455ブラウズ

この記事では、js のオブジェクト指向とオブジェクト型について簡単に紹介します (コード付き)。必要な方は参考にしていただければ幸いです。

オブジェクト指向

オブジェクト指向プログラミングは、Object Oriented Programming (略して OOP) の略です。オブジェクト指向プログラミングは、抽象メソッドを使用して現実世界に基づいたモデルを作成するプログラミング手法です。
オブジェクト指向プログラミングは、一連のオブジェクトを使用して相互に連携するソフトウェア設計とみなすことができます。オブジェクト指向プログラミングの 3 つの主な特徴は、カプセル化、継承、ポリモーフィズムです。

カプセル化

いわゆるカプセル化とは、実際の実行原理を知らなくても、要件に従って使用し、対応する結果を取得することです。
カプセル化は主に、オブジェクトに含まれる (カプセル化された) コンテンツを記述するために使用され、通常は 2 つの部分で構成されます

関連データ (属性の保存に使用されます)
これらのデータに基づいて何ができるか

継承継承は通常、クラス間の関係を指します。 2 つのクラスが同じプロパティまたはメソッドを持つ場合、同じプロパティまたはメソッドを再度定義することなく、一方のクラスがもう一方のクラスを継承できます。
1 つ以上のクラスの特殊なバージョンを作成することを継承と呼びます (JavaScript は単一継承のみをサポートします)。作成されたクラスの特殊バージョンは通常サブクラスと呼ばれ、追加のクラスは通常親クラスと呼ばれます。

ポリモーフィズム

異なるオブジェクトが同じ名前のメソッドを定義でき、メソッドは、それらが配置されているオブジェクトに対して作用します。異なるオブジェクトが同じメソッド呼び出しを通じて独自の動作を実装できることをポリモーフィズムと呼びます。

Constructor

Constructor は、コンストラクターまたはオブジェクトテンプレートとも呼ばれ、オブジェクトのメソッドです。コンストラクターは、インスタンス化時に呼び出されます。関数は JavaScript のコンストラクターとして使用できます。

/*  创建构造函数->用于创建对象
*    function 构造函数名称()｛
*       this.属性名 = 属性值
*       this.方法名 = function()｛
*           方法体
*           ｝
*     ｝
      this关键字指代利用当前构造函数创建的对象*/
function Dog() {//这是构造函数，构造函数的属性和方法使用this关键字
    this.name=function () {
        console.log('哈士奇')
    }
}

/*   利用构造函数创建对象*/
var dog = new Dog();
console.log(dog);

オブジェクトタイプ

プロパティ記述子

JavaScriptは、オブジェクトの値を記述し、プロパティが書き込み可能か、構成可能か、削除可能か、削除可能な列挙型であるかなど、その動作を制御する内部データ構造を提供します。データ構造はプロパティ記述子と呼ばれます。
現在オブジェクトに存在する属性記述子には、データ記述子とアクセス記述子の 2 つの主な形式があります。

データ記述子

データ記述子は、書き込み可能または書き込み不可能な値を持つプロパティです。データ記述子には、次のオプションのキー値があります:

value: この属性に対応する値。任意の有効な JavaScript 値を指定できます。デフォルトは未定義です。
writable: 属性の writable が true の場合に限り、値は代入演算子によって変更できます。デフォルトは false です。
構成可能: 属性の構成可能が true の場合に限り、属性記述子を変更でき、対応するオブジェクトから属性を削除することもできます。デフォルトは false です。
enumerable: 属性の enumerable が true の場合に限り、その属性はオブジェクトの列挙属性に含めることができます。デフォルトは false です。

アクセス記述子

アクセス記述子は、getter-setter 関数のペアによって記述されるプロパティです。次のオプションのキー値があります。

get: プロパティのゲッターメソッドを提供します。ゲッターがない場合、未定義になります。このプロパティにアクセスすると、メソッドが実行されます。メソッドの実行時にパラメーターは渡されませんが、このオブジェクトは渡されます。
set: プロパティのセッターメソッドを提供します。セッターがない場合は未定義になります。このメソッドは、プロパティが変更されるとトリガーされます。このメソッドは、変更された属性の新しいパラメータ値である唯一のパラメータを受け入れます。
構成可能: 属性の構成可能が true の場合に限り、属性記述子を変更でき、対応するオブジェクトから属性を削除することもできます。デフォルトは false です。
enumerable: 属性の enumerable が true の場合に限り、その属性はオブジェクトの列挙属性に含めることができます。デフォルトは false です。

プロパティ記述子を取得します

Object.getOwnPropentyDescriptor()メソッドは、指定されたオブジェクトの独自のプロパティに対応するプロパティ記述子を返します

var obj = {
    name : '哈士奇'
}
/*
    使用Object.getOwnPropertyDescriptor()方法获取指定属性的描述符
    Object.getOwnPropertyDescriptor(obj,prop)
    * obj - 表示指定属性对应的目标对象
    * prop - 表示获取描述符的目标属性名称
    * 返回值 - 其属性描述符对象
    * 如果
  */
var v =Object.getOwnPropertyDescriptor(obj,'name');
console.log(v)

プロパティ記述子のオプションのキー値値を設定します

Object.deginepropety()メソッドオブジェクトの新しいプロパティを定義するか、既存のプロパティを変更して、オブジェクトを返します。

var obj ={//定义对象时定义的属性是可以修改、删除、枚举的
    name : '阿拉斯加'
}
/*
    Object.defineProperty(obj, prop, descriptor)方法
    * 作用
      * 用于定义目标对象的新属性
      * 用于修改目标对象的已存在属性
    * 参数
      * obj - 表示目标对象
      * prop - 表示目标对象的目标属性名称
      * descriptor - 表示属性描述符，必须是对象格式
        {
            value : 值
        }
    * 返回值 - 返回传递的对象
 */
//修改name属性
Object.defineProperty(obj, 'name',{
    value:'哈士奇'
} );
console.log(obj.name);//哈士奇

/*
    同样都是为对象新增属性
    1.如果直接使用 "对象名.属性名 = 值" -> 可修改、可删除以及可枚举的
    2.如果使用Object.defineProperty()方法新增属性
      * 该新属性是不可修改、不可删除以及不可枚举的
 */
//新增age属性//用该方法新增的属性默认是不可以修改、删除、枚举的
Object.defineProperty(obj,'age',{
    value : 2
});

Object.degineproperties() メソッドは、オブジェクトの 1 つ以上の新しいプロパティを定義するか、既存のプロパティを変更して値を返します。

プロパティ記述子のオプションのキー値を設定する weitable

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
// 修改现有属性
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    writable : false // 不可修改
});
console.log(obj.name);// 周芷若
// 修改name属性值
obj.name = '赵敏';
console.log(obj.name);// 周芷若

Object.defineProperty(obj, 'age', {
   value : 18,
   writable : true
});
console.log(obj.age);// 18
// 修改age属性值
obj.age = 80;
console.log(obj.age);// 80

プロパティ記述子のオプションのキー値を設定する configuarble

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
// 修改现有属性
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    writable : true, // 控制当前属性是否可被修改
    configurable : true // 控制当前属性是否可被删除
});
console.log(obj.name);// 周芷若
// 修改name属性值
obj.name = '赵敏';
console.log(obj.name);// 赵敏
// 删除name属性值
delete obj.name;undefined
console.log(obj.name);// undefined

プロパティ記述子を列挙可能に設定する

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    enumerable : false
});
console.log(obj.name);// 周芷若
/*
    属性描述符enumerable - 控制当前属性是否可被枚举(遍历)
    * 仅能循环遍历对象中可被枚举的属性
      * for...in语句
      * keys()方法
    * 可以循环遍历对象中可被枚举和不可被枚举的属性
      * getOwnPropertyNames()方法
 */
for (var i in obj) {
    console.log(i);
}
var result1 = Object.keys(obj);
console.log(result1);
var result2 = Object.getOwnPropertyNames(obj);
console.log(result2);

プロパティ記述子のアクセサを設定する

オブジェクト内のプロパティは、直接定義されるだけでなく、アクセサーを使用して定義することもできます。セッターは属性記述子の set を使用する値関数であり、ゲッターは属性記述子の get を使用する値関数です。

var value;
var obj = {
    // 存取描述符中的get
    get attr() {// 表示当前目标属性名称
        return value;
    },
    // 存取描述符中的set
    set attr(newValue) {// 表示当前目标属性名称
        console.log('setter: ' + newValue);
        value = newValue;
    }
}
console.log(obj.attr);// undefined
obj.attr = 100;// "setter: 100"

改ざん防止オブジェクト

デフォルトでは定義されたオブジェクトがいつでもどこでも変更できるため、改ざんを防ぐ仕組みが追加され、3つのレベルに分かれています

拡張禁止: 新しいプロパティの拡張は禁止されていますとオブジェクトのメソッド
Sealed オブジェクト: 属性の値の読み取りと書き込みのみが許可されます
Frozen オブジェクト: 操作は許可されません

拡張機能は禁止されます

Object.preventExtensions() は、指定されたオブジェクトを次のように設定しますnon-extensible
Object.isExtensible () オブジェクトが拡張可能かどうかを判断します

オブジェクトをシールします

Objet.seal() メソッドは、新しい属性が追加されないようにオブジェクトをシールするために使用され、既存の属性を設定不可としてマークします。現在の属性の値を書き込むことができます。
Object.Sealead()は、オブジェクトがシールされているかどうかを決定します

オブジェクトの凍結

Object.freeze()は、このオブジェクトに対して実行できる操作のみです。読み取り可能
Object.isFrozen() はオブジェクトが凍結されているかどうかを判断します

js のオブジェクト指向とオブジェクト型の簡単な紹介 (コード付き)

関連記事