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/archive/2013/01/08/3965378.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值