javascript的构造函数和原型

转自: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,表明该对象也是动物
原文地址:https://www.cnblogs.com/hdchangchang/p/3965378.html