参考地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html
javascript创建类:
在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法。
Javascript语言不支持"类",但是可以用一些变通的方法,模拟出"类"。
方法一:
构造函数法:
1.它用构造函数模拟"类",在其内部用this关键字指代实例对象;
2.生成实例的时候,使用new关键字;
3.类的属性和方法,还可以定义在构造函数的prototype对象之上
例子1:
//使用构造函数模拟类,可以再构造函数中添加属性和方法 function cat(){ this.name = "Tom"; this.makeSound = function(){alert("kaka");}; } //生成实例,使用new var cat1 = new cat(); //调用方法和属性 document.write(cat1.name); document.onmouseover = cat1.makeSound;
例子2:
//可以给构造函数传递参数 function cat(name){ this.name = name; this.makeSound = function(){alert(name);}; } var cat1 = new cat("Tom");
例子3:
//可以给“类”cat使用prototype加入属性和方法 cat.prototype.sex = "man"; cat.prototype.getSex = function(){alert(cat1.sex);};
方法二:
Object.create()法
这里的"类"被视为一个对象,不是函数;
直接用Object.create()生成实例,不需要用到new。
特点:
这种方法比"构造函数法"简单,但是不能实现私有属性和私有方法,
实例对象之间也不能共享数据,对"类"的模拟不够全面。
例子1:
//注意:这里是声明的一个对象 var cat = { name : "Tom", makeSound : function(){alert("Tom");} }; var cat1 = Object.create(cat); document.write(cat1.name);
例子2:浏览器兼容问题,对于不支持Object.create()方法的浏览器,用以下方式
var cat = { name : "Tom", makeSound : function(){alert("Tom");} }; //如果浏览器没有Object.create方法,创建该方法 if(!Object.create){ Object.create = function(o){ function F(){}; F.prototype = o; return new F();//返回的应该是一个函数 } } var cat1 = Object.create(cat); document.write(cat1.name); document.body.onmousedown = cat1.makeSound;
方法3:
极简主义法:
1.封装
首先,它也是用一个对象模拟"类"。
在这个类里面,定义一个构造函数createNew(),用来生成实例。
var Cat = {
createNew: function(){
// some code here
}
};
然后,在createNew()里面,定义一个实例对象,把这个实例对象作为返回值。
var Cat = {
createNew: function(){
var cat = {};
cat.name = "大毛";
cat.makeSound = function(){ alert("喵喵喵"); };
return cat;
}
};
使用的时候,调用createNew()方法,就可以得到实例对象。
var cat1 = Cat.createNew();
cat1.makeSound();
实例:
var cat = { createNew:function(){ //够着一个对象实例 var cat = {}; cat.name = "Tom"; cat.makeSound = function(){alert("kaka")}; return cat; //返回一个实例 } } //直接调用cat对象里的createNew构造函数 var cat1 = cat.createNew(); document.write(cat1.name); div1.onmousedown = cat1.makeSound;
2.继承:
让一个类继承另一个类,实现起来很方便。
只要在前者的createNew()方法中,调用后者的createNew()方法即可。
实例:
//定义被继承的类animal var animal = { createNew:function(){ var ani = {}; //有一个方法:sleep ani.sleep = function(){alert("sleep!")}; return ani; } } //继承,只需要调用animal类的creatNew方法 var cat = { createNew:function(name,sound){ //继承 var cat = animal.createNew(); cat.name = name; cat.makeSound = function(){alert(sound)}; return cat; } } var cat1 = cat.createNew("Tm","ka"); document.write(cat1.name); //调用方法 div1.onmousedown = cat1.sleep;
3.私有属性和私有方法
在createNew中创建实例时,只要不是定义在cat对象上的属性和方法都是私有的;
私有属性和方法只能在createNew中访问,不能再外部访问。
实例:
var Cat = { createNew: function(){ var cat = {}; //没有定义在cat对象上的属性 var sound = "喵喵喵"; cat.makeSound = function(){ alert(sound); }; return cat; } }; var cat1 = Cat.createNew(); //在外部访问时,返回结果为undefined alert(cat1.sound); // undefined
4.数据共享
有时候,我们需要所有实例对象,能够读写同一项内部数据。
这个时候,只要把这个内部数据,封装在类对象的里面、createNew()方法的外面可。
实例:
var Cat = { //要被共享的数据,访问时通过Cat对象访问 sound : "喵喵喵", createNew: function(){ var cat = {}; //操纵共享数据 cat.makeSound = function(){ alert(Cat.sound); }; cat.changeSound = function(x){ Cat.sound = x; }; return cat; } }; //生成两个实例 var cat1 = Cat.createNew(); var cat2 = Cat.createNew(); //第一次调用makeSound cat1.makeSound(); // 喵喵喵 //通过第二个实例调用changeSound cat2.changeSound("啦啦啦"); //再一次通过第一个实例调用makeSound,发现数据已经修改 cat1.makeSound(); // 啦啦啦