[Object] 개체 중심 프로그래밍(교묘한 교실 버전)

zccst 노트
1. 대상을 향한 초보
공장 방법

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

2. 착란하기 쉬운this
this 키워드
두 가지 상황에서 다시 착란을 일으킨다. 타이머와 이벤트 중.
[북풍판] 해석: 내부 함수 중의this는 전역 윈도우입니다.외부 함수의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();
}
인스턴스

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

4. 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