JavaScript オブジェクト指向を学び、JavaScript オブジェクト_JavaScript スキルを理解する

1. プログラミングの考え方
プロセス指向: プロセスを中心に、上から下へ徐々に洗練され、プログラムは関数呼び出しの集合と見なされます
オブジェクト指向: オブジェクトはプログラムの基本単位として機能し、プログラムはデータと関連する操作に分解されます
2. クラスとオブジェクト
クラス: 同じ特性と特徴を持つ物事の抽象的な説明
オブジェクト: 特定のタイプに対応する特定のもの
3. オブジェクト指向の 3 つの大きな特徴
カプセル化: 実装の詳細を隠し、コードのモジュール化を実現
継承: 既存のコード モジュールを拡張してコードの再利用を実現します
ポリモーフィズム: インターフェースの再利用を実現するためのインターフェースのさまざまな実装方法
4. オブジェクト定義: 順序付けされていない属性のコレクション。その属性には基本的な値、オブジェクト、または関数を含めることができます

//简单的对象实例
var person = new Object();
  person.name = "Nicholas";
  person.age = 29;
  person.job = "Software Engineer";
  person.sayName = function(){
    alert(this.name);
  }

5. 内部属性タイプ: ECMAScript5 では、内部属性を 2 つの角括弧で囲み、データ属性とアクセサー属性に分割します。
[1] データ属性には、値の読み取りと書き込みが可能なデータ値の場所 が含まれています。データ属性には 4 つの特性があります: a. [[構成可能]]: 属性を削除して属性を再定義できるかどうか、属性の特性を変更できるかどうか、または属性をアクセサー属性として変更できるかどうかを示します。オブジェクトの場合、デフォルト値は true です。 b. [[Enumerable]]: 属性が for-in ループを通じて返されるかどうかを示します。デフォルト値は true
です。 c, [[Writable]]: オブジェクトに直接定義された属性の値を変更できるかどうかを示します。デフォルト値は true
です。 d. [[Value]]: この属性のデータ値が含まれます。属性値を読み取る場合は、この場所から読み取り、新しい値をこの場所に保存します。オブジェクトに直接定義されたプロパティ。デフォルト値は未定義です


[2] アクセサー プロパティにはデータ値 が含まれていませんが、ゲッター関数とセッター関数のペアが含まれています (ただし、これら 2 つの関数は必須ではありません)。アクセサー プロパティが読み取られるときは、ゲッター関数が呼び出され、有効な値を返す役割を果たします。アクセサー プロパティが書き込まれるときは、セッター関数が呼び出され、新しい値が渡されます。この関数は、その方法を決定する役割を果たします。関数を処理します。アクセサー プロパティには次の 4 つの特性があります: a. [[構成可能]]: 削除によって属性を削除して属性を再定義できるかどうか、属性の特性を変更できるかどうか、または属性をアクセサー属性に変更できるかどうかを示します。オブジェクトに直接定義されたプロパティ。デフォルト値は true b. [[Enumerable]]: 属性が for-in ループを通じて返されるかどうかを示します。デフォルト値は true
です。 c. [[Get]]: 属性を読み取るときに呼び出される関数。デフォルト値は未定義です
d.[[Set]]: 属性を書き込むときに呼び出される関数。デフォルト値は未定義です

6. 内部プロパティを変更します:
ECMAScript5 の object.defineProperty() メソッドを使用します。このメソッドは、プロパティが配置されているオブジェクト、プロパティの名前、および記述子オブジェクトの 3 つのパラメーターを受け取ります
[注 1]IE8 は、Object.defineProperty() メソッドを実装した最初のブラウザ バージョンです。ただし、このバージョンの実装には多くの制限があります。このメソッドは DOM オブジェクトでのみ使用でき、アクセサー プロパティのみを作成できます。実装が不完全であるため、IE8 で Object.defineProperty() メソッドを使用することはお勧めできません。
[注 2]Object.defineProperty() メソッドをサポートしていないブラウザでは、[[Configurable]] および [[Enumerable]] を変更できません。 [1] データ属性を変更する

//直接在对象上定义的属性，Configurable、Enumerable、Writable为true
var person = {
  name:'cook'
};
Object.defineProperty(person,'name',{
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Greg'  

//不是在对象上定义的属性，Configurable、Enumerable、Writable为false
var person = {};
Object.defineProperty(person,'name',{
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Nicholas'

//该例子中设置writable为false,则属性值无法被修改
var person = {};
Object.defineProperty(person,'name',{
  writable: false,
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Nicholas'  

//该例子中设置configurable为false,则属性不可配置
var person = {};
Object.defineProperty(person,'name',{
  configurable: false,
  value: 'Nicholas'
});
alert(person.name);//'Nichols'
delete person.name;
alert(person.name);//'Nicholas'

[注意] プロパティを構成不可として定義すると、構成可能に戻すことはできません。つまり、 Object.defineProperty() を複数回呼び出して同じプロパティを変更できますが、構成可能を false に設定した後は、制限があります

var person = {};
Object.defineProperty(person,'name',{
  configurable: false,
  value: 'Nicholas'
});
//会报错
Object.defineProperty(person,'name',{
  configurable: true,
  value: 'Nicholas'
});

[2] アクセサーのプロパティを変更する

//简单的修改访问器属性的例子
var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book,'year',{
  get: function(){
    return this._year;
},
  set: function(newValue){
    if(newValue > 2004){
      this._year = newValue;
      this.edition += newValue - 2004;
    }
  }
});
book.year = 2005;
alert(book.year)//2005
alert(book.edition);//2

【注1】getterを指定しただけでは属性を書き込むことはできません

var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book,'year',{
  get: function(){
    return this._year;
  },
});
book.year = 2005;
alert(book.year)//2004  

【注2】setterを指定しただけではプロパティを読み込むことはできません

var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book,'year',{
  set: function(newValue){
    if(newValue > 2004){
      this._year = newValue;
      this.edition += newValue - 2004;
    }
  }
});
book.year = 2005;
alert(book.year);//undefined

[補足] アクセサープロパティを作成するには、__defineGetter__() と __defineSetter__() という 2 つの非標準メソッドを使用します

var book = {
  _year: 2004,
  edition: 1
};
//定义访问器的旧有方法
book.__defineGetter__('year',function(){
  return this._year;
});
book.__defineSetter__('year',function(newValue){
  if(newValue > 2004){
    this._year = newValue;
    this.edition += newValue - 2004;
  }
});
book.year = 2005;
alert(book.year);//2005
alert(book.edition);//2

7. 複数のプロパティを定義します:

ECMAScript5 は Object.defineProperties() メソッドを定義します。このメソッドは、記述子を通じて複数のプロパティを一度に定義するために使用できます。 最初のオブジェクトは次のとおりです。プロパティが追加および変更されるオブジェクト。2 番目のオブジェクトのプロパティは、追加または変更される最初のオブジェクトのプロパティと 1 対 1 に対応します。

八、读取属性特性：使用ECMAScript5的Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述符。该方法接收两个参数：属性所在对象和要读取其描述符的属性名称，返回值是一个对象。
[注意]可以针对任何对象——包括DOM和BOM对象，使用Object.getOwnPropertyDescriptor()方法

var book = {};
Object.defineProperties(book,{
  _year: {
    value: 2004
  },
  edition: {
    value: 1
  },
  year: {
    get: function(){
      return this._year;
    },
    set: function(newValue){
      if(newValue > 2004){
        this._year = newValue;
        this.edition += newValue - 2004;
      }
    }
  } 
});
var descriptor = Object.getOwnPropertyDescriptor(book,'_year');
alert(descriptor.value);//2004
alert(descriptor.configurable);//false
alert(typeof descriptor.get);//'undefined'

var descriptor = Object.getOwnPropertyDescriptor(book,'year');
alert(descriptor.value);//'undefined'
alert(descriptor.configurable);//false
alert(typeof descriptor.get);//'function'

以上就是关于javascript面向对象的详细内容介绍，希望对大家的学习有所帮助。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。