zoukankan      html  css  js  c++  java
  • 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,表明该对象也是动物
  • 相关阅读:
    短连接生成
    google 定位 标记 地址解码 逆解码
    Laravel 文件上传
    Laravel
    对接航信开票-在线二维码开票
    win 下 composer 安装
    对接美团外卖开放平台
    IOS 弹框在微信中导致输入框等失焦 偏移问题解决
    微信公众号-高德地图实例
    对接百度地图API 实现地址转经纬度
  • 原文地址:https://www.cnblogs.com/hdchangchang/p/3965378.html
Copyright © 2011-2022 走看看