JavaScriptの創世神話——すべては対象から来ています.

聖書の第一章創世記の中に、神がどのように人間を創造したかという経典があります.神は言います.「私たちは私たちの姿を照らして、私たちの形で人を作ります.」偶然にも一致したのは、JavaScriptの中にも神の意図に従ってプログラム世界を創造しているようです.すべての対象の認知の中には、世の中の万物は一つの原型に由来しています.一つの統一された形式、一つのプラトンの口の中の理念があります.
JavaScriptのプログラミングアートもここから演じられます.
カタログ:1.対象に向かってプログラミングした初歩的思考2.類と対象3.構造関数constructor 3.1 newコマンド3.2 thisキーワード3.3.原型オブジェクト4.いくつかの関連方法
1.対象向けプログラミングの初歩的な思考
「対象向けプログラミング」(Object Oriented Programeming、略してOOPという)自体はプログラミングされた思惟モードであり、世界のすべてを対象の集合と見なし、世界の動きは一つの対象によって分業し、協力した結果である.
このようなマクロ次元のプログラミング認識があったら、コードの袋小路に閉じ込められなくなります.
私たちはホームページの開発において、常にイベントバインディングを行います.

var btn = document.getElementById('button');
btn.addEventListener('click',function(){console.log('click me')})

初めて学ぶ時、筆者も無意識にaddEvent Listener()方法を見て、特定の元素をクリックしたら、需要が実現できます.もっと深く考えすぎないでください.
学習が進むにつれて、OOPの章に入ると、「すべての対象」という言葉の深さを発見します.
上記のコードの中では、btn自体は一つのオブジェクトですが、クリックするとそのオブジェクトは自分のメソッドaddEventListenerを呼び出します.
誰が何をしましたか?btnをクリックした時に出力をしました.
もちろんこれは一つのケースにすぎません.JSのプログラミングにおいて、このようなプログラミングモードは一貫して貫通しています.

//1、      
var sheep = {
  color: white,
  echo: function(){
      console.log('mae~~~')
  }
} 
sheep.echo()
//     mae   

//2.       
$('.passage').css({
      width: '100px',
      color: 'pink'
  }
)
//    passge jquery        
......

つまり、JavaScriptのプログラミングは対象から逸脱することができません.
2.クラスとオブジェクト
長い間話しましたが、対象が何なのかさえはっきりした定義がないなら、プログラミングの過程においてはまだはっきりしないところがあります.

オブジェクトとは、オブジェクトが現実的なものに対する抽象的なものであり、オブジェクトが属性と方法をパッケージ化したものであり、属性値はオブジェクトの状態を指し、方法は対象の行為を指す.

たとえば、私たちはNBAのスーパースターのkobeをjavascriptの中の対象として抽象化しています.

var kobe = {
    team: 'Los Angeles Lakers',
    position: 'shooting guard',
    ability :  function(){
        console.log('impress those who like basketball')
  }
}

現実の世界のコービーは抽象的で、ロサンゼルスのレイカーズと位置に効力を発揮します.得点バックは彼の属性で、能力はバスケットボールが好きな人に影響を与えます.

は'クラス'とは何ですか?

聖書の記述によれば、第一章の創世記には、「神は自らの姿に従って人をつくる」とある.
現実世界の万物(対象)の進化は、根拠なく生まれたのではなく、テンプレートによって様々な実例を作成する必要がある.
したがって、クラス(コンストラクタ)とは、このようなテンプレートを提供する「オブジェクト」(関数自体がjsでオブジェクト)であり、オブジェクトの抽象的なものである.
しかし、jsにはクラスの概念がなく、構造関数を通してクラスの機能を代替し、ある種類のオブジェクトに共通の属性と方法を提供しています.
コンストラクタにより、特定のクラスの属性と方法を有する様々な例示的なオブジェクトを作成することができる.
例えばバスケットボール選手のクラスを定義します.

//     ，                    
var BasketballPlayer = function(){
   this.height = '180+',
   this.muscle = true,
   this.ability = function(){
        console.log('shooting and passing ')
    }
}

//  （    ）   3     
var kobe = new BasketballPlayer();
var james =new BasketballPlayer();
var curry =new BasketballPlayer();

ここに小さな問題がありますが、構造関数BasktballPlayerは誰が作ったのですか?下のコードを見たら分かります.

BasketballPlayer instanceof Object//true
          js         Object   

したがって、すべてのインスタンスオブジェクトはクラス(構造関数)で作成されていますが、すべての構造関数は最も一般的なクラス、すなわちObjectで構成されていますので、すべてのオブジェクトが対象です.
【注】類はjsにおいて構造関数として表現されていますが、正確のために、以下の統一は構造関数と呼ばれます.
3.コンストラクタ
前に知ったように、世の中の万物は特定のテンプレート(クラスまたは構造関数)によって構成されていますが、すべての構造関数は最も一般的な構造関数Objectによって構成されています.
しかし、私たちは次のコードを見て、このような疑問が生じるかもしれません.1.構造関数のBookのthisは何ですか?何の道がありますか?2.構造関数Bookを使って、javascriptを構成する時newはどのような役割を果たしていますか?3.なぜ私がインスタンスオブジェクトを作った後、この構造関数はオブジェクトに戻ります.つまり、全体の建造物の過程で、構造関数の運営メカニズムはどうなっていますか?

var Book = function(){
    this.material = 'paper';
    this.color = 'white';
    this.utility = function(){
       console.log('IQ+');
  }
    this.whoAmI = function(){
      console.log(this)
  }
}

var javascript = new Book()

thisは構造関数の役割のキーワードであるthisはjsにおいて非常に重要であり、それは異なる運行環境(属性と方法の調整者)が指す環境(対象)とは違って、つまりthisの指向はダイナミックであるが、thisの指向は誰であれ、属性と方法の調整者が誰であるかを明確にするだけであれば、誰を指すかを指す.

//         ， window   
var print = function(){
      console.log(this)
 }
print()//this  Window，    Window     print  

//         
var o = {
    print: function(){
      console.log(this)
  }
}
o.print()//this  o，    o    print  

したがって、構造関数のthisに戻って、var javascript=new Book()を実行すると、このときはjavascriptという例示的なオブジェクトが構造関数Bookを呼び出し、関数内部のthisがjavascriptという実例的なオブジェクトを指す.

javascript.whoAmI()//this    javascript  

【注】もっと多くのthisの知識はwhat's thisを見ますか?

new命令の原理は、次にnew命令の原理を説明します.

newコマンドの役割は、構造関数を実行して、インスタンスのオブジェクトを返します.
通常の正常呼び出し関数とは異なり、関数実行前にnewコマンドを付加し、関数は以下のステップを実行します.
1.戻りたいオブジェクトの例として、空のオブジェクトを作成します.

2.         ``__proto__``       prototype         
3.              this   
4.             

プロトタイプオブジェクト上では、構造関数がインスタンスオブジェクトを作成する際の部分的な動作機構を基本的に理解し、thisキーワードとnewコマンドがインスタンスを構成する際に果たす役割を理解した.

今最も重要な疑問があるのは、具体的なオブジェクトは一体どのように構造関数の中で設定されたこのクラスに属する共通の属性と方法を継承しますか?
prototype object
JavaScriptの各インスタンスオブジェクトは別のオブジェクトから継承され、後者はプロトタイプオブジェクトと呼ばれ、プロトタイプオブジェクト上の属性と方法は派生オブジェクトに共有されます.これはJavaScriptの有名な継承メカニズムの基本設計です.
先にコードを書いて説明します.

function Dog(name,color){
  this.name = name;
  this.color = color;
}

Dog.prototype.spark = function(){
    console.log('Wow~~~')
}
var tony = new Dog('tony','white')

1.構造関数Dugによって生成された例示的なオブジェクトtonyは、自動的にインスタンスオブジェクトtonyにプロトタイプオブジェクトを割り当てます.
2.各コンストラクタにはプロトタイプの属性があります.この属性はインスタンスオブジェクトのプロトタイプです.
3.インスタンスオブジェクトの内部には、構造関数によって作成されると、構造関数のprotype属性を指す__proto__属性がある.
このようにして,構造関数Dugにおけるプロトタイプオブジェクトの例となるtony対Dugの共有属性と方法の継承を実現した.
したがって、モデルオブジェクトはすべてのインスタンスオブジェクトの共通の属性と方法を定義し、すべてのインスタンスオブジェクトはプロトタイプオブジェクトから派生されたサブオブジェクトに過ぎず、後に特有の属性と方法を加えただけであると考えられます.
prototype chain
例示的なオブジェクトtonyの__proto__は、構造関数Dugのプロトタイプオブジェクトを指すので、Docg中のプロトタイプの属性と方法を継承する.
構造関数自体も、より一般的な関数(本質的にはオブジェクト)を指すプロトタイプオブジェクトが存在する.
さらに、この関数は、最も一般的な構造関数Objectを指すプロトタイプオブジェクトも存在する.
このような幾重にもネストされた関係はプロトタイプチェーンを形成する.
トニーという名前の犬は、まずコンストラクションDgのプロトタイプオブジェクトを継承し、Dugのプロトタイプオブジェクトの__proto__には関数を継承したプロトタイプオブジェクトがあり、関数オブジェクトの__proto__にはOjectのプロトタイプオブジェクトが引き継がれています.
ここでもう一度構造関数Objectの威力を体現しています.すべての対象はObjectの派生にすぎません.Object.prototypeの属性と方法を継承しています.「すべての対象」の思想をより深く表現しています.
4.いくつかの関連方法

instance of演算子instance of演算子は、指定されたオブジェクトが何らかの構造関数であるかどうかを示すブール値を返します.

tony instanceof Dog//true
or
Dog.prototype.isPrototypeOf(tony)//true

Object.get ProttypeOf()

Object.get ProttypeOf()は、元のオブジェクトを取得するための標準的な方法です.

Object.set ProttotypeOf()Object.set ProttotypeOf

この方法は既存のオブジェクトのプロトタイプを設定し、新しいオブジェクトを返します.この方法は2つのパラメータを受け入れます.最初は既存のオブジェクト、2番目はプロトタイプのオブジェクトです.

var foo = { x:1 };
var bar = Object.setPrototypeOf({},foo)
bar.x === 1//true

私たちは以前にnew命令で実例的なオブジェクトを構築していましたが、本質的には一つの空のオブジェクトのプロトをコンストラクタのプロトタイプに向けて、そして実例的なオブジェクトにコンストラクターを実行します.

var  Person = function(){
    this.race = 'monkey'
};
var Asian = new Person();
//   
var Asian = Object.setPrototypeOf({},Person.prototype);
Person.call(Asian)

Object.creat()Object.create方法は、プロトタイプオブジェクトから新しいインスタンスオブジェクトを生成するために使用され、newコマンド

の代わりにすることができる.

var  Person = {
    race: 'monkey'
}
var Asian = Object.create(Person)
//   
var Person = function(){
    this.race='monkey'
}
var Asian = new Person()

Object.isProttypeOf()オブジェクトのインスタンスのisProttypeOf方法は、オブジェクトが別のオブジェクトの原型であるかどうかを判断するために使用される.

var obj1 = {};
var obj2 = Object.create(obj1);
obj1.isPrototypeOf(obj2)//true

Object.prototype.hasOwnProperty()オブジェクトのインスタンスのハスOwnProperty方法は、ある属性がオブジェクト自身に定義されているか、それともプロトタイプチェーンに定義されているかを判断するためのブール値を返します.

var o = {
  name:'teren'
}
o.hasOwnProperty('name')//true
o.hasOwnProperty('toString')//false
Object.getPrototypeOf(o).hasOwnProperty('toString')//true

参考文献:
阮一峰-JavaScript標準教程空腹人谷学習ノート