您的位置：首页 > Web前端 > JavaScript

javascript继承&设计模式&面向对象

2013-11-13 16:00 211 查看

<html>
<head>
<meta charset="UTF-8">
<title>javascript继承示例</title>
<script type="text/javascript" id="script">
var $=function(id){
return document.getElementById(id);
}
var log=function(msg){
console.log(msg);
var con=$("con");
con.innerHTML=con.innerHTML+"<br />"+msg;
}
//动物
function Animal(name){
this.name = name;
this.jump = function(){
log(this.name + " 正在跳。。。");
};
this.eat = function(){
log(this.name + " 正在吃。。。");
};
}
//狗继承Animal
function Dog(){
this.shout=function(){
log(this.name+" 汪汪叫了。。。");
};
};
//关键点
Dog.prototype = new Animal("Henry");
window.onload=function(){
$("text").value=getScript();
var dog = new Dog('sss');
dog.name='阿黄';
dog.jump();
dog.eat();
dog.shout();
getScript();
};
//获取脚本内容
function getScript(){
var st=$("script");
var result=st.innerHTML;
//log(result);
return result;
}
</script>
<style type="text/css">
#con,textarea{
overflow: auto;
width: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<textarea name="text" id="text" cols="80" rows="15">

</textarea>
<br />输出如下：
<div id="con">
javascript继承示例:
</div>

</body>
</html>

javascript单例模式：

传统单例模式的特点就是利用私有构造函数来保证只有一个实例，使不同地方调用的都是同一个实例对象。然而这一点对于js来说就有点弱爆了，因为js是允许全局变量的，解决单例的办法很简单，定义一个全局对象就完事了（是不是觉得很原始，完全没什么模式可言）：

var jsSingleton = {
property:"something",
method:function(){
console.log('hello world');
}
}

模块模式(Module)

在js的懒汉式单例模式中，其实也用到了另一种设计模式，即模块模式。在传统软件工程中，模块模式被定义为给类提供私有和公共封装的一种方法，也就是我们常说的“模块化”。在Java里面Class就是一种模块，解决了属性、方法的封装问题，它的模块模式直接就融合到语言特性里面了，因此也没什么模块模式的说法；然而对于JavaScript这种过于灵活的语言，这种最基本的私有化封装却需要用一个设计模式来解决了。

在JavaScript中，“private”是作为保留字，而不是关键字的，也就是说，JavaScript没有私有化这一功能(纠结吧)。解决解决这问题有两种方法，一是定义变量的时候在前面加上下划线“_”，也就是告诉其他开发者，不要动这个变量哟；另一种则是利用闭包。第一种方法并不是真正的私有，只是一种规范，如果要做到真正的私有，还是要用第二种方法——闭包。

我们创建一个匿名函数，然后立即运行它，此匿名函数中的所有代码都存在于一个“闭包”之中，从而得到私有性，并在特定作用域中保持可被访问。方法如下：

(function () {
//此作用域的所有变量、函数依旧可在特定作用域中被访问
})();

先用括号把函数定义括起来，从而得到该函数对象，然后后面的括号是立即运行它。这种形式可以在很多js库中见到，例如jQuery：

(function( window, undefined ) {
......
//最后一行
window.jQuery = window.$ = jQuery;
})(window);

我们看到jQuery把window这个全局变量传进匿名函数中，然后把内部定义的jQuery赋值给了window，从而在全局作用域中都可以通过“$”符号来访问匿名函数中的内容（想了解更多关于闭包的内容，可以看看《jQuery自运行匿名函数》《闭包与作用域链》）。

弄清楚这些之后，我们就来看看js模块模式的基本样子吧：

var Module = (function () {
var my={},
privateVar = 8;//私有属性
function privateFun() {//私有方法
return ++privateVar;
};
my.publicVar = 1;//公共属性
my.moduleFun = function () {//公共方法
return privateFun();
};
return my;
}());
console.log(Module.publicVar);//1
console.log(Module.publicFun());//9

在匿名函数中我们返回了一个my变量给Module作为外部访问闭包内容的接口，除闭包内my之外的内容都得到了私有性保护，闭包的数据在Module变量的作用域中保持可以访问。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 继承 javascript

相关文章推荐

新的分享

章节导航