[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关键字
在两种情况下回引起错乱：定时器和事件中。
【北风版】解释：内部函数中的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();
}
实例

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