该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
JavaScript中的类
JavaScript实际上是一种弱类型语言,与C++和Java等语言不同。因此,在JavaScript中,没有强调类(class)这一概念,但实际运用中,类还是很重要的,比如写一款游戏,如果我们不停地调用函数来完成创建角色,移动角色的话,那会是什么样的呢?可能会出现非常多的重复代码,因此我们需要一个类来统一这些代码。所谓的类,就是把程序中的代码分类,比如说游戏中的关于角色的代码算作一类,游戏背景算作一类,游戏特效又是一类。这样一来,我们对类进行操作,就不会使代码显得很凌乱,冗杂。虽然Js是弱类型语言,但是也提供了类这一概率。
定义Js中的类,实际上用的是function,总所周知,这个语法其实是用来定义函数的。不用于定义函数的是,我们可以在function中通过this.xxx的方式来定义属性和方法。比如说:
function People () {
this.name = "Yorhom";
this.getName = function () {
return this.name
};
}
使用的时候使用new:
var yorhom = new People();
// "Yorhom"
alert(yorhom.getName());
可以看到,这样就可以使用到我们定义的类和类中的方法了。
也许你会问this.xxx只能定义公有属性和方法,那私有属性和方法怎么办呢?这个可以用到js闭包的知识来解决:
function People () {
this.name = "Yorhom";
var age = 16;
this.getName = function () {
return this.name
};
this.getAge = function () {
return age;
};
}
var yorhom = new People();
// undefined
alert(yorhom.age);
// 16
alert(yorhom.getAge());
可以看到,这里的age就是一个私有属性了。
JavaScript中的prototype
上面的代码美中不足的地方就是,如果一个类有很多方法,同时用到这个类的地方又有很多(也就是new出来的对象有很多),那么用上面的代码就会出现内存占用过剩的问题。问题的根本原因在于,每次实例化一个对象,这个类就会执行构造器里的代码(以People类为例就是function People () {…}执行的代码),因此每当这个类被实例化的时候,这些方法和属性就会被拷贝到实例化出来的对象中。这样一来,就会造成“吃”内存的现象。
于是js中的prototype就诞生了。prototype的作用通常是给一个类添加一系列常量或者方法。 每当一个类被实例化之后,实例化出来的对象会自动获取类的prototype中定义的方法和属性。只不过这里的获取类似于C++里面的引用,不会在内存里对这些方法和属性进行复制,而是指向这些方法和属性。示例:
function People () {
this.name = "Yorhom";
}
People.prototype.getName = function () {
return this.name;
};
var yorhom = new People();
// "Yorhom"
alert(yorhom.getName());
这种方法虽然可以节约内存,但是,美中不足的是,无法定义私有属性。
类的继承
Javascript没有提供继承的函数,所以只有自己写了。这里借用lufylegend.js中的继承方法向大家展示如何实现继承:
function base (d, b, a) {
var p = null, o = d.constructor.prototype, h = {};
for (p in o) {
h[p] = 1;
}
for (p in b.prototype) {
if (!h[p]) {
o[p] = b.prototype[p];
}
}
b.apply(d, a);
}
这里的base就是继承函数了。继承函数的原理莫过于复制类的方法和属性。因此,只要做到这点,就可以实现类的继承了。可以在上面的代码中看见,我们通过遍历prototype来获取原型链中定义的方法和属性。通过apply调用父类的构造器进行构造器中属性和方法的复制。使用示例:
function People () {
this.name = "Yorhom";
}
People.prototype.getName = function () {
return this.name;
};
function Student () {
base(this, People, []);
}
var yorhom = new Student();
// "Yorhom"
alert(yorhom.getName());
静态属性和方法的定义
静态属性和方法以及静态类在js中的定义非常简单,先来看静态类:
var StaticClass = {};
这么写不是在定义一个Object吗?是的,不错,不过js中的静态类也是可以这样定义的。如果要添加静态类中的方法和属性,就可以这么写:
var StaticClass = {
id : 5,
sayHello : function () {
alert("Hello");
}
};
如果是要向类中添加静态属性或者方法,可以采用这种写法:
function People () {
this.name = "Yorhom";
}
People.prototype.getName = function () {
return this.name;
};
People.TYPE = "people";
People.sayHello = function () {
alert("Hello");
};
实现一个功能丰富的类
我们在上文中提到了,节省内存和定义私有属性两者无法兼得,是啊,和“鱼和熊掌不可兼得”是一个道理,在通常的使用过程中,我们需要对这两项进行取舍。但是现在这个年代,哪有不可兼得的呢?鱼和熊掌不能同时吃?当然不行……因为吃熊掌是违法的(有待考证)?不过至少鸡和鱼是可以同时吃的吧。
由于js没有实现私有属性的定义,所以这其实是一个没有头绪的工作,因为在标准的做法中,我们除了闭包可以阻止外部访问,没有别的办法了。所以这里我们要用点歪门邪道的方法了。
JavaScript Set/Get访问器
什么是set/get访问器呢?如果你熟悉python,那么你可以理解为@property和@xxx.setter,但是简陋的js里也有?当然有,只不过是ES5的标准,可以采用这种写法:
Object.defineProperty(this, "name", {
get : funtion () {
return name;
},
set : function (v) {
name = v;
}
});
具体有什么用呢?大致就是this.name属性在被获取的时候调用get访问器,在被更改值的时候调用set。
你可以从上面的代码了解大致的写法,不过如果你想深究,可以参考这篇文章:http://blog.csdn.net/teajs/article/details/22738851