JavaScript 模拟类的四种方式

290 查看

  1. 普通继承方法

    源代码:
    
    var singger = function(name,sex){    //构造函数
        this.name = name;       //公有属性
        this.sex = sex;
        this.pop = function(a){         //公有方法
            console.log(this.name + "非常的" + a  + "的!");
        };
    } ;   
    var JayZhou = new singger ("周杰伦","male");  //实例化对象
    JayZhou.pop("popular"); 
  2. 使用原型方法实现继承

    源代码:
    
    var singger = function(name,sex){
        this.name = name;
        this.sex = sex;
    };
    singger.prototype = {
        pop : function(a){
            console.log(this.name + "是非常的" + a + "的!");
        }
    };
    var JayZhou = new singger ("周杰伦","male");
    JayZhou.pop("流行");  
  3. 使用工厂方法实现继承

    源代码:
    
    var proto = {    //原型
        pop : function(a){          //原型中定义的公有方法
            console.log( this.name + "是非常" + a + "的!")
        },
        age : 30        //原型中定义的公有属性
    };
    var singger = function(name ,sex){          //工厂函数
        var inside = Object.create( proto );       //在工厂函数内部建立一个函数使其原型指向定义的原型对象
        inside.name = name ;           //将工厂函数传入的参数和原型对象之间建立联系
        inside.sex = sex;
        return inside; //inside作为内部函数一定要返回,否者实例化的对象的值会变成undefined;之所以返回是因为使实例化的对象(如JayZhou)等于构造函数(如:singger)里的 inside
    };
    var JayZhou = singger ("周杰伦","male");
    JayZhou.pop("流行");
    console.log(JayZhou.age);
    /*
        Object.create 可以理解为是将一个对象作为原型给另一个函数
     */
  4. 使用ECMAScript2015标准提供的class新方法实现继承

    源代码:
    
    class singger {
        constructor(name,sex){
            this.name = name ;
            this.sex =sex ;
            this.prop = "PROP";
        }
    
        pop(mark){
            console.log(this.name + "是非常 " + mark + "的!");
        };
    }
    
    var zhoujielun = new singger("jay-zhou" , "male");
    zhoujielun.pop("popular");      //jay-zhou是非常 popular的!
    console.log(zhoujielun.prop);   //PROP
    console.log(zhoujielun.name);   //jay-zhou

参考链接:http://sunbeam.site/programme/09