转自:http://www.cnblogs.com/langtao/articles/2150650.html
要用JavaScript写出面向对象的代码,或者说组织代码的方式使用面向对象方式,首先需要理解js的“构造函数+原型”。
1、构造函数方式:
function Animal(name) {
this.name = name;
this.getName = function() {
return this.name;
}
}
//新建一个对象:老鼠
var mouse = new Animal("mouse");
//新建一个对象:鸭子
var duck = new Animal("duck");
//继承测试
console.log(mouse instanceof Animal); //true
console.log(duck instanceof Animal); //true
构造一个对象需要配置一些参数,参数赋值给函数里面的this。与Java和C#的区别是JS用function来代替class,参数也无需定义类型。
2. 原型方式:
/**
* 父类:动物
*/
function Animal(){};
Animal.prototype.name= 0;
Animal.prototype.setName = function(_name) {
this.name = _name;
}
/**
* 子类:老鼠
*/
function Mouse() {} ;
Mouse.prototype = new Animal(); //这是原型继承关键的一句
Mouse.prototype.getName = function(){}
//新建一个对象:老鼠
var mouse = new Mouse();
console.log(mouse.name);//继承的属性
console.log(mouse.setName);//继承的方法
console.log(mouse.getName);//自有方法
//继承测试
console.log(mouse instanceof Mouse); //true,表明该对象是老鼠
console.log(mouse instanceof Animal); //true,表明该对象也是动物
优点是所有对象实例都共享getName方法(相对于构造函数方式),缺点就是不能通过参数来构造对象实例。
3. 构造函数 + 原型:
取前两者的优点:
a、用构造函数来定义类属性。
b、用原型方式来定义类的方法
/**
* 定义一个类:动物
* 构造函数方式
*/
function Animal(name) {
this.name = name;
}
//原型方式
Animal.prototype.setName = function(name) {
this.name = name;
}
/**
* 子类:老鼠
*/
function Mouse(name) {
Animal.call(this, name); //复制父类属性
} ;
Mouse.prototype = new Animal(); //复制父类方法
Mouse.prototype.squeak = function(){}; //新建老鼠类自身的吱吱叫方法
//新建一个对象:老鼠
var mouse = new Mouse('老鼠');
console.log(mouse.name); //继承的属性
console.log(mouse.setName); //继承的方法
console.log(mouse.squeak); //自有方法
//继承测试
console.log(mouse instanceof Mouse); //true,表明该对象是老鼠
console.log(mouse instanceof Animal); //true,表明该对象也是动物