【javascript】javascript面向对象(妙味版)

zccst笔记

一、面向对象初步

工厂方法

Js代码



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

真正的面相对象

Js代码



//例如

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，构造函数就是类，类就是构造函数

Js代码



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）

Js代码



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是当前函数域。

Js代码



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，定时器

原因：定时器是全局变量

Js代码



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();

}

实例

Js代码



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

Js代码



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所有对象全是引用。

Js代码



var arr1 = [1,2,3];

var arr2 = arr1;

arr2.push(4);

alert(arr1);

alert(arr2);

//解决办法之一：通过for循环

2，instanceof

Js代码



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