[Object]オブジェクト向けプログラミング(妙味教室版)

zccstノート
一、対象に向かう初歩
プラントメソッド

function createPerson(name,sex){
  //1
  var p = new Object;
  //2
  p.name = name;
  p.sex  = sex;
  p.showName = function(){alert(this.name);}
  p.showSex = function(){alert(this.sex);}
  //3
  return p;
}
p1 = createPerson('blue','male');
p2 = createPerson('leo','female');

欠点:
1,newはありません.
2,各オブジェクトには独自の関数があります.リソースの浪費解決:プロトタイプの使用
alert(p1.showName == p2.showName);//false
本当の顔の相手

// 
function createPerson(name,sex){
  this.name = name;
  this.sex  = sex;
}
createPerson.prototype.showName = function(){alert(this.name);}
createPerson.prototype.showSex = function(){alert(this.sex);}
alert(p1.showName == p2.showName);//true

// :
var arr1 = new Array(1,2,3,4);
var arr2 = new Array(1,2,3,4,5);
Array.prototype.sum = function(){
  var ret = 0;
  for(var i = 0; i < this.length; i++){
    ret += this[i];
  }
  return ret;
}
alert(arr1.sum());
alert(arr2.sum());

String.prototype.trim = function(){
  return this.replace(/^/s+|/s+$/g,'');
}

注意すべき点:
1,コンストラクション関数はクラス,クラスはコンストラクション関数である.

echo typeof Date; //function

function() show{
 alert('abc');
}
var show = function(){ //alert(typeof show);//function
 alert('abc');
}
// 
var show = new Function("alert('abc')");//alert(typeof show);//function

typeof Array,Date// function
typeof Array(), Date()// object



alert(typeof Array);//function
console.log(Array); //[undefined]

alert(typeof Date); //function
console.log(Date);  //Date()

alert(typeof Array());//object
console.log(Array()); //[]

alert(typeof Date()); //string
console.log(Date());  //Mon Nov 26 2012 18:45:27 GMT+0800

alert(typeof (new Array()));//object
console.log(new Array());   //[]

alert(typeof (new Date())); //object
console.log(new Date());    //Date {Mon Nov 26 2012 18:45:28 GMT+0800}


alert(typeof Math);//function
console.log(Math); //Math {}

2,プロトタイプ優先度(CSSの行間スタイルとclassに類比可能)

Array.prototype.a = 12;
var arr = [1,2,3];
alert(arr.a); //12
arr.a = 5;
alert(arr.a); //5
delete arr.a;
alert(arr.a); //12

二、錯乱しやすいthis
このキーワード
どちらの場合も、タイマとイベントでエラーが発生します.
【北風版】解釈:内部関数のthisはグローバルwindowです.外部関数のthisは現在の関数ドメインです.

var box = {  
    user : "the box",  
    getUser : function(){  
        return this.user;  
    }
};
//alert(box.getUser());



var box = {  
    user : "the box",  
    getUser : function(){
        return function(){
			alert(this);     //[object Window]
			return this.user;//undefined
		}
    }
};
//alert(box.getUser()());
// this window。 this 。 


// ： _this。
var box = {  
    user : "the box",  
    getUser : function(){
		var _this = this;
        return function(){
			alert(_this);     //[object Object]
			return _this.user;//the box
		}
    }
};
alert(box.getUser()());

// ： call
alert(box.getUser().call(box));

1、タイマー
理由:タイマはグローバル変数

function Aaa(){
  this.a = 12;

  // this window
  //setInterval(this.show, 1000);

  // 
  var _this = this;
  setInterval(function(){
    _this.show();
  },1000);
}
Aaa.prototype.show = function(){
  alert(this.a);
}
var obj = new Aaa();
obj.show();

2、イベント中
理由:オブジェクトとdomオブジェクトが混在する
解決策:
var _this = this;
this.xx = function(){
  _this.show();
}
≪インスタンス｜Instance｜emdw≫

function Bbb(){
  this.b = 5;

  // show this dom 
  //document.getElementById('btn1').onclick=this.show;

  // 
  var _this = this;
  document.getElementById('btn1').onclick= = function(){
    _this.show();
  }
}
BB.prototype.show = function(){
  alert(this.b);
}
window.onload = function(){
  new Bbb();
}

三、継承
js継承はcallを介して

function Person(name,sex){
	this.name = name;
	this.sex  = sex;
}
Person.prototype.showName = function(){
	alert(this.name);
}
Person.prototype.showSex = function(){
	alert(this.sex);
}

function Worker(name,sex,job){
	// ,this Person Worker 。 ： 
	Person.call(this,name,sex);
	this.job = job;
}

// 。 
Worker.prototype = Person.prototype;
// 。 Worker Person 。 
for(var i in Person.prototype){
	Worker.prototype[i] = Person.prototype[i];
}


Worker.prototype.showJob = function(){
	alert(this.job);
}
var oM1 = new Worker('blue',' ', ' ');
oM1.showJob();

まとめ:
コンストラクション関数の偽装:親のプロパティを継承する
プロトタイプチェーンから:親メソッドを継承する
注意すべき点:
1、参照
本質は同じ領域を指す.jsはすべてのオブジェクトが参照されます.

var arr1 = [1,2,3];
var arr2 = arr1;
arr2.push(4);
alert(arr1);
alert(arr2);

// ： for 

2,instanceof

var arr1 = new Array();
alert(arr1 instanceof Object);   //true
alert(arr1 instanceof Array);    //true
alert(arr1 instanceof Function); //false
alert(arr1 instanceof Date);     //false

alert(typeof arr1);              //object

四、jsシステムオブジェクト
1、ホストオブジェクト(ブラウザで提供)
主にdocumentとwidowです.
2,ローカルオブジェクト(非静的オブジェクト)
var arr = new Array();//通常
一般的:Object,Function,Array,String,Boolean,Number,Date,RegExp,Error
3,組み込みオブジェクト(静的オブジェクト)
var oMath = new Math();//誤報
インスタンス化する必要はなく、直接使用できます.たとえば、関数を熟知しています.
よくある:Math,Global