一,三者的定義和使用

function A(){
//1,定義例項屬性和方法	
	this.name1 = 'name1';
	this.show1 = function () {
		console.log('show1');
	};
	
}

//2,定義原型屬性和方法
A.prototype.name2 = 'name2';
A.prototype.show2=function(s){
	console.log('show2');
};

//3,定義靜態屬性和方法
A.name3 = 'name3';
A.show3 = function () {
	console.log('show3');
}

//1,使用例項屬性和方法	
var a=new A();
console.log(a.name1);
a.show1();

//2,使用原型屬性和方法
console.log(A.prototype.name2);
A.prototype.show2();

//3,使用靜態屬性和方法
console.log(A.name3);
A.show3();

結果:
name1
show1
name2
show2
name3
show3
 

二,例項屬性和例項方法

1. 例項屬性地址不同,例項方法寫在內部地址不同,寫在外部地址相同(優化)
2. 建構函式內部的物件的屬性和方法:

   1. function CreateObject(name,age){
      	this.name=name;  //例項屬性
      	this.age=age;
      	this.run=function(){   //例項方法
      		return this.name + this.age;
      	}
      }
      
      
      var box1 = new CreateObject('ZHS',100);
      var box2 = new CreateObject('ZHS',100);
      
      
      console.log(box1.run() == box2.run());//true 比較方法的返回值
      console.log(box1.run == box2.run); //false 比較方法的引用地址
      
      結果:
      true
      false
       
      

3. 例項方法寫在外部

   1. var fns = {
      	run:function(name,age){
      		return this.name + this.age;
      	}
      }
      
      function CreateObject(name,age){
      	this.name=name;  //例項屬性
      	this.age=age;
      	this.run=fns.run;	
      	//可以設定全域性方法來實現引用地址一致性 .會出現問題
      	//this.run = run;
      }
      
      
      var box1 = new CreateObject('ZHS',100);
      var box2 = new CreateObject('ZHS',100);
      
      console.log(box1.run == box2.run); //true 比較的是引用地址
      
      結果:
      true
       
      

       

4.  

三,原型屬性和原型方法

1. 不在建構函式中定義的屬性和方法;
2. 原型屬性地址不同,原型方法地址相同

   1. function CreateObject(height){
      	this.height = height;
      }
      CreateObject.prototype.name='ZHS';//原型屬性
      CreateObject.prototype.age='100';
      CreateObject.prototype.run=function(){
      	return this.name + this.age;
      }//原型方法
      
      
      var CreateObject1 = new CreateObject();
      var CreateObject2 = new CreateObject();
      console.log(CreateObject1.run() == CreateObject2.run()); //true
      console.log(CreateObject1.run == CreateObject2.run); //true
      
      結果:
      true
      true

       

四,靜態屬性和靜態方法

1. 通過建構函式直接呼叫的屬性和方法
2. 靜態屬性和靜態方法都是繫結在建構函式上,是類的屬性,而非例項物件this的屬性
3. 靜態屬性

   1. 
       Foo {
      
      }
      Foo.prop = 1;
      
      
      
      console.log(Foo.prop) // 1
      
      結果:
      1

       

4. 靜態方法

   1. function Foo() {
      
      	}
      //定義在Foo類上
      Foo.static = function () {
      	console.log('static fun')
      }
      
      Foo.static() //類可以呼叫
      
      
      結果:
      static fun

       

五,三者的區別 

1. 靜態的屬於類，例項的屬於物件(this)，而原型就是值為自身物件的靜態屬性(this.prototype)
2. js靜態屬性和方法必須在類外面定義，而例項屬性和方法、原型屬性和方法則沒有這個限制，類的裡面和外面都可以定義

   1. //寫法報錯TypeError: A.show1 is not a function
      function A(){
          A.show1=function(s){
              console.log("method 1 hello "+s+"!")
          }
      }
      A.show1("tang");
      
      //寫法正常
      function A(){
      }
      A.show1=function(s){
          console.log("method 1 hello "+s+"!")
      }
      A.show1("tang");

       

3. 例項方法內呼叫例項方法和例項屬性,必須用this

   1. function A(){
      	this.show2=function(s){
      		console.log("method 2 hello "+s+"!");
      	};
      	this.show3=function(s){
      		this.show2(s);
      		//不能寫成show2(s);
      	};
      }
      var a=new A();
      a.show3("tang");
      
      結果:
      method 2 hello tang!

       

4. 呼叫原型屬性和方法時可以將前面的”類名.prototype.”改成”物件.”。 
   改成”物件.”的呼叫原理：首先在例項物件中查詢，如果找到則立即返回，否則在prototype中查詢，找到則返回相應的值，否則返回undefined

   1. function A(){
      	A.prototype.show1=function(s){
      		console.log("method 1 hello "+s+"!");
      	};
      }
      var a=new A();
      a.show1("tang");
      A.prototype.show1("zhi");
      
      結果:
      method 1 hello tang!
      method 1 hello zhi!

       

5. 總之:
   1. 靜態屬性是全域性的，
   2. 原型屬性是例項公有的，
   3. 例項屬性是各個例項所獨有的

 

五,獲取例項物件的例項屬性和方法

console.log(a);//例項物件
console.log(a.constructor);//只是原型物件的構造器
console.log(a.name1);
a.show1();

結果:
A { name1: 'name1', show1: [Function] }
{ [Function: A] name3: 'name3', show3: [Function] }
name1
show1

六,獲取原型物件的原型屬性和方法

console.log(a.__proto__);//原型物件
console.log(a.__proto__.constructor);
console.log(a.__proto__.name2);
a.__proto__.show2();

結果:
A { name2: 'name2', show2: [Function] }
{ [Function: A] name3: 'name3', show3: [Function] }
name2
show2

七,獲取類物件的靜態屬性和方法

console.log(A);//類物件
console.log(A.constructor);
console.log(A.name3);
A.show3();

結果:
{ [Function: A] name3: 'name3', show3: [Function] }
[Function: Function]
name3
show3