のオブジェクト指向ES6の理解

その他 2020-02-10 20:36:03 訪問数: null

でJavaScript、オブジェクトが順序付けられていないプロパティとグループの方法のコレクションであり、すべてのものは、文字列、数値、配列、機能、等のようなオブジェクトがあります。
そのオブジェクトのプロパティとメソッドです。

  • プロパティ：物事はここ、とオブジェクト内の属性表記（普通名詞）
  • 方法：事の行動、で使用されるオブジェクトメソッド（共通動詞）を表現するために

3つの方法でオブジェクトを作成0

オブジェクトリテラルを使用してオブジェクトを作成するために、0.1：

就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示 

var star = {
    name : 'Jon',
    age : 18,
    sex : '男',
    sayHi : function(){
        alert('我好帅');
    }
};

新しいオブジェクトを使用してオブジェクトを作成する0.2

// 创建空对象
var andy = new Obect();

Constructorオブジェクトによって構築されたオブジェクトを作成し、アンディ変数は空のオブジェクトのうち保存されているこの時間が作成されます。

// 通过对象操作属性和方法的方式，来为对象增加属性和方法
andy.name = '张三';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    alert('我好帅~');
}

注：Object()：大文字に最初の文字

0.3コンストラクタを使用してオブジェクトを作成します

コンストラクタは：主オブジェクト、メンバ変数の初期値を割り当てられているオブジェクトを初期化するために使用される、特殊な関数であり、それは常に新しい演算子で使用されます。私たちは、その関数にカプセル化され、抽出されたいくつかのパブリックオブジェクトのプロパティとメソッドを置くことができます。

パッケージコンストラクタ形式：

function 构造函数名(形参1,形参2,形参3) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}

コール形式のコンストラクタ：

var obj = new 构造函数名(实参1，实参2，实参3)

上記コードは、受信したオブジェクトのコンストラクタから作成されているOBJ。

注意事項：

  1. コンストラクタは、合意された大文字の（そうすることを推奨します）。
  2. 上記の機能のプロパティとメソッドを追加する必要があり、これを現在のオブジェクトのプロパティとメソッドということ、。
  3. コンストラクタは戻り結果に戻る必要はありません。
  4. 我々はオブジェクトを作成すると、新しいコンストラクタで呼び出さなければなりません。

プロセスのコンストラクタを使用してオブジェクトを作成するには：

  1. コンストラクタのコードが実行を開始する前に、空のオブジェクトを作成します。

  2. この点を修正し、この点への空気のアウトオブジェクトを作成します。

  3. コードの実行機能

  4. 機能は完了し、戻った後、オブジェクトが作成されて

1.変数、プロパティ、関数、メソッド間の差

1.1属性と変数の違い：

属性は、オブジェクトの一部ではなく、オブジェクトの可変部であり、可変データを別の容器に格納されます。

変数：単独の代入文、一人で

プロパティ：と呼ばれる変数内のオブジェクトのプロパティは、オブジェクトの特性を記述するために、宣言する必要はありません

1.2方法と機能の間の差：

この方法は、一部ではなく、対象物の機能の一部であり、機能が個別に包装容器を動作させます

機能：独立した存在、「を通して函数名()あなたが呼び出すことができる」方法

方法：関数内のオブジェクトのメソッドが呼び出され、「使用して、ステートメントを必要としない对象.方法名()あなたがオブジェクトの動作や機能を記述するために使用されるメソッドを呼び出すことができますモード」。

2.静的およびインスタンスメンバー

私たちは、知っているJSすべては、すべてのオブジェクトに、そのオブジェクトが実際にコンストラクタである、しかしによってnew 构造函数、オブジェクトを作成し、我々は一般的にそのようなオブジェクトがインスタンスと呼びます。

function Cat(n, m){
    this.name = n;
    this.age = m;
    this.climb = function(){
        console.log('跑的真快'); 
    }
}
var c1 = new Cat('猫', 3);
// 使用instanceof可以检测一个对象是否是另一个对象的实例
console.log(c1 instanceof Cat);

上記のコードのような、を備えコンストラクタthis冒頭に設けられた部材は、インスタンスを取得する時に、自動的にインスタンスのメンバーになります。

// Cat 的构造函数
function Cat(n, m){
    this.name = n;
    this.age = m;
    this.climb = function(){
        console.log('跑的真快'); 
    }
}
// 为构造函数对象动态添加成员(静态成员)
Cat.jump = function(){
    console.log('我会跳');
}
var c1 = new Cat('猫', 3);
// 此时调用c1.jump()会报错
// c1.jump();
// 实例成员不能被构造函数对象调用
// Cat.climb();

// 为实例动态添加成员
c1.jump = function(){
    console.log('跳的真高');
}
c1.jump();
Cat.jump();
// 对于一个实例动态添加的成员并不会被其它实例共有
var c2 = new Cat('黑猫', 2)
// c2.jump();
// Tiger 的构造函数
function Tiger(){
    this.say = function(){
        console.log('我是森林之王');
    }
}
// 使用Cat的实例作为原型
Tiger.prototype = c2;

var t1 = new Tiger();
// 原型中有的成员也是实例成员
t1.climb();

上記のコードによって、我々は見ることができます：

  1. メンバーの例：この上に追加されたメンバーとポストコンストラクタは動的にメンバーを追加
  2. 静的メンバー：メンバーまたは後期コンストラクタ自体が追加を動的にメンバーを追加します
  3. 例えば部材と動的他のケースの一般的に追加されません
  4. コンストラクタインスタンスメンバーがAのプロトタイプ場合、プロトタイプAのコンストラクタは、この構成例Aで得られたメンバ関数であります

人気の条件：

例メンバー：動的に自身のインスタンスを追加し、属性とメソッドとポストプロトタイプメンバーのすべてのメンバー：含むダイレクトアクセスのうち、コンストラクタの例で作成されたプロパティとメソッド、

静的メンバー：直接アクセスコンストラクタによってプロパティとメソッド。

3 __proto__（原型）、constructor（构造器）およびprototype（原型类型）

でJS、__proto__、constructorおよびprototype3人の関係を知ってもらうことがより困難である、それらを知ってもらうために、私たちは心の中で3つの基本的なポイントを負担する必要があります。

  1. prototypeプロパティは、機能のユニークな、ない他のオブジェクト。
  2. __proto__そして、constructorプロパティがあるオブジェクトのユニークな、だけでなく、オブジェクトの機能なので、機能はまた、これらの2つのプロパティがあります。
  3. __proto__ないJS標準で指定されたプロパティは、名前を達成インタプリタ異なるブラウザは異なる場合があり、それはESの標準と呼ばれています[[Prototype]]。
function Cat(){

}
var c1 = new Cat();
var o1 = {};

console.dir(Cat);
console.dir(c1);
console.dir(o1);

3.1 __proto__プロパティ

__proto__属性は、オブジェクトからオブジェクトへのそれらのプロトタイプオブジェクトを指す、（親オブジェクトことが理解されるであろう）。その役割は、オブジェクトのプロパティにアクセスするとき、オブジェクトがこのプロパティ内にある場合、それはに行きます、存在しないで__proto__、親オブジェクトがこの属性に存在しない場合は、どこを見つけるためにそのオブジェクト属性ポイント（親）親オブジェクトに進み__proto__、そのオブジェクト（オブジェクトの祖父）どこにあるの属性ポイント、そしてそれが見つからない場合ように、ほとんどのトップレベルのオブジェクトまで、それはエラーになります。この現在のオブジェクトのトップオブジェクト、まで__proto__財産とさえ私たちはプロトタイプチェーンを呼んチェーン、アップ。

3.2 prototypeプロパティ

prototypeプロパティ機能固有の特性であり、それは点から目的関数にすることにより、関数のプロトタイプオブジェクトを表すnewオブジェクトのインスタンスに機能を得る__proto__このオブジェクトにポイントを属性。

function Cat(){
    this.describe = '猫';
}
var c1 = new Cat();

function Tiger(){
    
}
// 指定原型
Tiger.prototype = c1;
var t1 = new Tiger();
// 他们两个完全一样，就是同一个对象
console.log(t1.__proto__ === Tiger.prototype);
var t2 = new Tiger();
// 他们两个完全一样，就是同一个对象
console.log(t2.__proto__ === Tiger.prototype);

我々は、実際には、上記のコードから確認することができprototype、それは共有機能のインスタンスによって得られる（リユース）のメンバー（属性およびメソッド）、主にあるプロパティを、メンバーに（再利用）を共有することができます。毎回の継承場合を想像し、メモリはああを消費する方法であるメモリ内のメンバメソッドを作成します。

3.3 constructorプロパティ

constructorプロパティがあるだけ持っている対象（実際には、__proto__オブジェクトへのポイントまたはprototype所有するオブジェクトを指している）、それは物点から関数にその意味を、オブジェクトのコンストラクタにポイントを、

いくつかの特別な属性がありますことは、自身のコンストラクタそのものです。

// Cat
function Cat(){
    this.describe = '猫';
}
var c1 = new Cat();
console.log(c1);
console.log(c1.constructor === Cat)

// Tiger
function Tiger(){
    this.name = '老虎';
}
// 指定原型
Tiger.prototype = c1;
var t1 = new Tiger();
console.log(t1);
// 原型对象发生了覆盖
console.log(t1.constructor === Cat)

// NortheastTiger
function NortheastTiger(){
    this.xxx = '东北虎';
}
// 指定原型
NortheastTiger.prototype = t1;
var n1 = new NortheastTiger();
console.log(n1)
// 原型对象发生了覆盖
console.log(n1.constructor === Cat)

各オブジェクトは、対応する中で見つけることができるconstructor前提がオブジェクトを作成する必要があるので、constructor、これはconstructorオブジェクト自体または明示的な定義によるものとすることができる__proto__プロトタイプチェーンで見つかった、それは彼らがなかった場合でも、関数によって作成されたオブジェクトであるconstructor属性、それはまた、できる__proto__対応を見つけますconstructor。

constructor 修正

上記のコードは、多くの人々が背中に発生します混乱させる可能性、当社は以下のコードを見て：

// Cat
function Cat() {
    this.describe = '猫';
}
var c1 = new Cat();
// Tiger
function Tiger() {
    this.name = '老虎';
}
// Tiger.prototype 指向的对象的 constructor 指向构造函数本身，也就是Tiger
console.log(Tiger.prototype);

我々が変更した場合はTiger.prototypeポイントを、の元の原因constructor損失：

// Cat
function Cat() {
    this.describe = '猫';
}
var c1 = new Cat();
// Tiger
function Tiger() {
    this.name = '老虎';
}
// Tiger.prototype 指向的对象的 constructor 指向构造函数本身，也就是Tiger构造函数
console.log(Tiger.prototype);
Tiger.prototype = c1;
// 此时 Tiger.prototype 指向的对象 是 c1 , c1的constructor执行的是自己的构造函数，也就是Cat构造函数
// 因此通过new Tiger() 获取到的对象的 constructor指向也为Cat构造函数
console.log(Tiger.prototype);
// t1的constructor指向Cat构造函数
var t1 = new Tiger();
console.log(t1.constructor);

明らかに、これはバイアスされて、私たちは手動で修正することができます：

function Cat() {
    this.describe = '猫';
}
var c1 = new Cat();
// Tiger
function Tiger() {
    this.name = '老虎';
}
// 从这里开始出现偏差
Tiger.prototype = c1;
// 修正一下
Tiger.prototype.constructor = Tiger
// 再获取的对象的constructor指向就正确了
var t2 = new Tiger();
console.log(t2.constructor);
bigpatten
公開された22元の記事 ・ ウォンの賞賛0 ・ ビュー1146
プライベートの手紙の 懸念

おすすめ

転載: blog.csdn.net/bigpatten/article/details/103962065
おすすめ
国内クラウド入力方式 - クラウドデータアップロードのセキュリティ問題がないのはファーウェイだけ
Open Source Daily | 産業用オープンソース プロジェクト OGG 1.0; お姉さん、私と一緒に Firefox を設定しませんか?フェドーラ 40
ランキング
自動運転のための知覚融合 - カルマンおよび拡張カルマン フィルター (Lidar&Radar)
[08001]は、データベース・サーバーへの接続を作成できませんでした。再接続を3回試みました。あきらめます。
Windows 10ドライバー開発入門(1)：環境構築
HTTPヘッダピカチュウ噴射に基づくテストプラットフォーム
Android implementa upload de arquivo FTP
最大平均サブアレイ
opencv+Qtの表示イメージ
【C#プログラミング】クラス、コンストラクター、静的メンバー
Flutter 의사의 경고 제거: 경로의 `dart`는 xxx/bin/dart로 해석됩니다.
Unity の 4 つのスクリーンショット方法 (カメラ ビュー、UI なし、UI あり、ゲーム ウィンドウ)
アーカイブ
もっと
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(31)
2024-04-16(23)
2024-04-15(5)

コードワールド

© 2018 codetd.com