理解JavaScript中的封装与继承特性
JavaScript中的封装
封装简单地说就是让外界只能访问对象的共有变量和函数,隐藏细节和数据。
js中有三种方法创建对象,分别为门户大开型、用命名规范区分私有变量、闭包创建真正的私有变量三种。
1.门户大开型,是实现对象的最基础的方法,所有方法与变量都是共有的外界可以访问。
var Book = function(name){ if(k(name)){ ("error"); throw new Error("name null"); } = name; } otype = { check:function(name){ if(!name){ return true; } }, getName:function(){ return ; } } var book = new Book("哈哈"); //output:哈哈 哈哈 (,ame());
这个例子是门户大开型的典型,外界能直接访问对象的属性和方法。可以注意到属性和变量都有"this"来创建。
2.用命名规范区分私有变量,该方法是门户大开型的优化版本,只不过是在私有变量或方法前面用"_"区分,如果有程序员有意使用_getName()的方法来调用方法,还是无法阻止的,不是真正地将变量隐藏。
3.闭包创建真正的私有变量,该方法利用js中只有函数具有作用域的特性,在构造函数的作用域中定义相关变量,这些变量可以被定义域该作用域中的所有函数访问。
var Book2 = function(name){ if(check(name)){ ("error"); throw new Error("name null"); } name = name; function check(name){ if(!name){ return true; } } ame = function(){ return name; } } otype = { display:function(){ //无法直接访问name return "display:"+ame(); } } var book2 = new Book2("哈哈"); //output:undefined "哈哈" "display:哈哈" (,ame(),lay());
可以看到,这个例子中的结果,直接访问name会返回undefined的结果。可以看到这个例子与门户大开型的'区别,门户大开型中的变量使用"this"来创建,而这个例子中使用var来创建,check函数也是如此,使得name与check函数只能在构造函数的作用域中访问,外界无法直接访问。
该方法解决了前两种方法的问题,但是也有一定的弊端。在门户大开型对象创建模式中,所有方法都创建在原型对象中,因此不管生成多少对象实例,这些方法在内存中只存在一份,而采用该方法,每生成一个新的对象都会为每个私有变量和方法创建一个新的副本,故会耗费更多的内存。
JavaScript中的继承
Book基类:
var Book = function(name){ if(k(name)){ ("error"); throw new Error("name null"); } = name; } otype = { check:function(name){ if(!name){ return true; } }, getName:function(){ return ; } }
继承方法:
function extend(subClz,superClz){ var F = function(){} otype = otype; otype = new F(); tructor = subClz; rClass = otype; if(tructor == tructor){ tructor = superClz; }
使用空函数F作为桥接,可以避免直接实例化父类时调用父类的构造函数带来额外开销,而且当父类的构造函数有参数时,想直接通过otype = new superClass();实现父类构造函数的调用和原型链的继承是不行的。
rClass = otype; if(tructor == tructor){ tructor = superClz; }
添加这三句可以避免子类继承父类写(this,name);而是简单地写(this,name)便能实现。
并且在子类重写父类方法的时候,可以调用到父类的方法:
ame = functiion(){ return (this) + "!!!"; }
ArtBook子类:
var ArtBook = function(name,price){ (this,name); e = price; } extend(ArtBook,Book); rice = function(){ return e; } ame = function(){ return (this)+"!!!"; }
-
Dreamweaver技巧详解
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。下面给大家介绍Dreamweaver技巧,一起来学习吧!Dreamweaver技巧详解1、灵活运用样式熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择CustonStyle来调用Style...
-
SQL的SUBSTR 函数的使用方法介绍
SUBSTR函数是用来截取数据库某一列字段中的一部分。在各个数据库的函数名称不一样(真是蛋疼,后发明的`数据库难道不能同先发明的一样吗?)复制代码代码如下:MySQL:SUBSTR(),SUBSTRING()Oracle:SUBSTR()SQLServer:SUBSTRING();常用的方式是:SBUSTR(str,pos);就是从pos...
-
浅析JavaScript基本类型与引用类型
两种类型:ECMAScript变量包含两种不同类型的值:基本类型值、引用类型值;基本类型值:指的是保存在栈内存中的简单数据段;引用类型值:指的是那些保存在堆内存中的`对象,意思是,变量中保存的实际上只是一个指针,这个指针指向内存中的另一个位置,由该位置保存对象;两种访问方...
-
万恶的function在javascript中的运用实例分析
javascript中最有特色而又让你困惑的function算一个了下面看一下常用操作复制代码代码如下:functiondoit(){.....}doit();javascript中的函数我们可以把它当作方法使用复制代码代码如下:varobj=newObject();=function(){.....}();而function实际上就是对象(即F...