JavaScript オブジェクト指向を学び、JavaScript オブジェクト_JavaScript スキルを理解する-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:22:10

オリジナル

1156 人が閲覧しました

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面向对象的详细内容介绍，希望对大家的学习有所帮助。