JavaScript オブジェクト指向_JavaScript スキルの予備的な理解

はしがき

クラスベースのオブジェクト: オブジェクト指向言語における明白な記号は、テンプレートに似たクラスを通じて、同じプロパティとメソッドを持つ多数のオブジェクトを作成できることを誰もが知っています。ただし、ECMAScriptにはクラスという概念がないので、当然クラスベース言語のオブジェクトとは異なります。

js のオブジェクト: 基本的な値、オブジェクト、関数を含めることができる、順序付けされていない属性のコレクション。つまり、js のオブジェクトは、特定の順序ではない値のセットであり、オブジェクトの各プロパティまたはメソッドには独自の名前があり、それぞれの名前が値に対応します。

オブジェクトを理解する

オブジェクトの作成方法

1 オブジェクトを作成する最も簡単な方法は、Object インスタンスを作成し、それにプロパティとメソッドを追加することです。

たとえば

  var person = new Object();
    person.name='谦龙';
    person.sex='男';
    person.sayNameAndSex=function(){
      console.log(this.name,this.sex)
    }
    person.sayNameAndSex(); // 谦龙 男

2 オブジェクト リテラル形式を使用します

たとえば

  var person={
    name:'谦龙',
    sex:'男',
    sayNameAndSex:function(){
      console.log(this.name,this.sex)
    }
  }
   person.sayNameAndSex(); // 谦龙 男

属性のタイプ

ECMAScript には、データ属性とアクセサー属性という 2 種類のデータ属性があります。

データ属性

データ属性には、データ値の場所が含まれます。この場所で値の読み取りと書き込みが可能です。その動作を説明する 4 つのプロパティがあります。

1.[[Configurable]]: 属性を削除によって削除して再定義できるかどうかを示します...デフォルト値は true

2.[[Enumerable]]: ループ内の for を通じて属性を返すことができるかどうかを示します...デフォルトは true

3.[[Writable]]: 属性の値を変更できるかどうかを示します...デフォルトは true

4.[[Value]]: この属性の値を示します。デフォルトは未定義です

。

プロパティのデフォルトのプロパティを変更するには、ES5 Object.defineProperty() メソッドを使用する必要があります。このメソッドは、プロパティが配置されているオブジェクト、プロパティの名前、プロパティのプロパティを説明するオブジェクトの 3 つのパラメータを受け取ります。 (configurable、enumerable、writable、value)、それらの 1 つ以上を設定すると、対応する特性を変更できます

デモ

var person={};
Object.defineProperty(person,'name',{
 configurable:false,//表示不允许通过delete删除属性
 writable:false,//表示不允许重写
 ennumerable:false,//表示不允许通过for in遍历
 value:'谦龙'//设置该对象中属性的值
})
person.name='谦龙2';//尝试重新设置 结果不生效
delete person.name;//尝试删除 结果不生效
for(var attr in person){
 console.log(person[attr]);// false
}
console.log(person.name);//谦龙

注: configurable を false に設定した後、再度 true に変更することはできません。また、Object.defineProperty() メソッドを呼び出すとき、configurable、ennumerable、および writable のデフォルト値は false です。

アクセサーのプロパティ

アクセサー プロパティにはデータ値が含まれません。これらには、ゲッター関数とセッター関数のペアが含まれています (ただし、これら 2 つの関数は必須ではありません)。アクセサー プロパティを読み取るときに、この関数が呼び出されます。 valid アクセサ プロパティを書き込むとき、setter 関数が呼び出され、新しい値が渡されます。この関数はデータの処理方法を担当します。

アクセサーのプロパティには次の特性があります

[[configurable]] は、削除によって属性を削除して新しい属性を定義できるかどうかを示します

[[enumerable]] は、返された属性を for in ループで走査できるかどうかを示します

[[get]] プロパティの読み取り時に呼び出される関数、デフォルトは未定義です

[[set]] 関数の作成時に呼び出される関数。デフォルト値は未定義です。

注: アクセサー プロパティは直接定義できないため、Object.defineProterty()

を通じて定義する必要があります。

デモ

 var book={
 _year:2015, //这里的下划线是常见的记号，表示只能通过对象的方法才能访问的属性
 edition:1
}
Object.defineProperty(book,'year',{
 get:function(){
  return this._year; //即默认通过 book.year获取值的时候 返回的是 boot._year的值
 },
 set: function (value) {//在对 boot.year设置值的时候 默认调用的方法 对数据进行处理
  var _year=this._year;
  if(value > _year){
   this._year=value;
   this.edition+=value-_year;
  }
 }
})
book.year = 2016;
console.log(book.year,book.edition); // 2016 2

複数の属性を定義する

ES5 では、Object.defineProperties() メソッドを使用してオブジェクトに複数のプロパティを追加できます。このメソッドは 2 つのオブジェクト パラメーターを受け入れます。最初のパラメーターは、プロパティを追加および変更するオブジェクトであり、2 番目のパラメーターは属性は、最初のオブジェクトに追加および変更される属性に対応します。

デモ

var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true //注意这里设置成true 才可以 "写" 默认是false 
 },
 edition:{
  value:1,
  writable:true //注意这里设置成true 才可以 "写" 默认是false
 },
 year:{
  get:function(){
   return this._year;
  },
  set: function (value) {
   var _year=this._year;
   if(value > _year){
    this._year=value;
    this.edition+=value-_year;
   }
  }
 }
})
book.year=2016;
console.log(book.year,book.edition); // 2016 2

オブジェクトプロパティのプロパティを読み取る

ES5 の Object.getOwnPropertyDescriptor() メソッドを使用すると、特定のプロパティの記述子を取得できます。

このメソッドは、属性が配置されているオブジェクトと、読み取られる記述子の属性名という 2 つのパラメーターを受け取ります。返されるのはオブジェクトです。データ属性の場合、返される属性は構成可能、列挙可能、書き込み可能、​​値です。アクセサー属性の場合、返される属性は構成可能、列挙可能、get、set

です。

デモ

var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true
 },
 edition:{
  value:1,
  writable:true
 },
 year:{
  get:function(){
   return this._year;
  },
  set: function (value) {
   var _year=this._year;
   if(value > _year){
    this._year=value;
    this.edition+=value-_year;
   }
  }
 }
})
//对象遍历函数
function showAllProperties(obj){
 for(var attr in obj){
  console.log(attr+':'+obj[attr]);
 }
}
var descriptor= Object.getOwnPropertyDescriptor(book,'_year');//数据属性
var descriptor2= Object.getOwnPropertyDescriptor(book,'year');//访问器属性
showAllProperties(descriptor);
console.log('============================');
showAllProperties(descriptor2);

オブジェクト指向 JavaScript の予備的な理解への上記の紹介はすべてです。注意してください。