Javascript设计模式读书笔记一 JAVASCRIPT面向对象的实现
Javascript设计模式读书笔记一
1、Javascript 类的使用。在使用几年的Javascript中,感觉还不是很深入,只是用得比较肤浅。基本上写的都是一些小函数,没怎么用过类。
比如说:
function startAnimation(){
…
}
function staopAnimation(){
…
}
上面的做法很简单就是一个开始和结束动画的函数,但是无法创建可以保存状态并且可以对内部状态进行操作的动画对象。下面是定义的类的实现:
var Anim=function(){
…
};
Anim.prototype.start=function(){
…
}
Anim.prototype.stop=function(){
…
}
类的使用:
var myAnim=new Anim();
myAnim.start();
…
myAnim.stop();
上面定义一个类Anim并且把两个方法赋给类的prototype属性。
如果更喜欢把类的定义封装在一条声明中,可以使用下面的代码:
var Anim=function(){
…
};
Anim.prototype={
Start:function(){
…
}.
Stop:function(){
…
}
};
以上代码还可以以另外一种风格代码如下:
Function.prototype.method=function(name,fn){
this.prototype[name]=fn;
};
var Anim=function(){
…
};
Anim.method(‘start’,function(){
…
});
Anim.method(‘stop’,function(){
…
});
Function.prototype.method用于为类添加新方法。第一个表示方法名称,第二个表示用作新方法的函数。
可以进一步修改Function.prototype.method,使其可以链式调用。这只需要让他返回this值即可。代码如下:
Function.prototype.method=function(name,fn){
this.prototype[name]=fn;
return this;
};
var Anim=function(){
…
};
Anim.method(‘start’,function(){
…
}).method(‘stop’,function(){
…
});
以上就采用五种方式完成同一项工作。
2、匿名函数
(function(){
…
})()
Eg:
(function(foo,bar){
alert(foo*bar);
})(10,2)
匿名函数最有趣的用途是用来创建闭包。闭包是一个受到保护的变量空间。另外javascript具有函数级的作用域。这意味着定义在函数内部的变量在函数外部不能访问。这就意味着函数运行在它定义的的作用域中,而不是调用在它的作用域中。通过这两个因素就可以把变量包裹在匿名函数中而对其加以保护。你可以如下创建类的私有变量:
var baz;
(function(){
var foo=10;
var bar=2;
baz =function(){
return foo*bar;
};
})();
baz(); //baz可以访问foo,bar,尽管这个方法在匿名函数的外部执行。
baz定义在闭包中,所以它能访问foo,bar 这两个匿名函数中的变量。
运行结果:运弹出网页消息20;
3、对象的易变性
在js中,一切对象都是都是易变的。这意味着你能使用在大多数的语言中不允许的技术,例如为函数添加属性。
function displayError(message)
{
displayError.numTimesExecuted++;
alert(message);
alert(displayError.numTimesExecuted);
};
displayError.numTimesExecuted=0;
这也意味着你可以对先前定义的类和实例化的对象进行修改。
如下所示演示修改类以及实例化后修改对象:
function Person(name,age){
this.name=name;
this.age=age;
};
Person.prototype={
getName:function(){
return this.name;
},
getAge:function(){
return this.age;
}
}
//实例化对象
var alice=new Person(‘Alice’,20);
var bill=new Person(‘Bill’,30);
//修改类
Person.prototype.getGreeting=function(){
return ‘Hi’+this.getName()+’!’;
};
//修改一个特定的实例
alice.displayGreeting=function(){
alert(this.getGreeting());
}
getGreeting在实例化对象创建后创建的,但他们两个实例仍可获得这个方法。另外displayGreeting只有alice实例得到这个方法,其它实例就没有。
4、继承。继承在js中不像另的面向对象语言中那样简单。JS使用的是基于对象的(原形式(prototypal))继承,它可以用来模仿基于类的(类式(classical))继承。这两种方式以后会讲。