js创建类的几种方法

时间:2021-07-30 09:09:04 类型:web前端
字号:    

Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class。(不过,ES6引入了Class这个概念,作为对象的模板。通过class关键字,可以定义类。ES6入门:http://es6.ruanyifeng.com/)。


  但是在项目开发中,经常用到JS面向对象开发,这就需要我们去用JS创建类,从而去实例化一些对象。接下来我们介绍一下在JS中创建类的几种方式:


 


  1.工厂方式:


//通过工厂方式创建对象,先定义一个工厂方法

function createObj(){

    var obj  =  new Object();

    obj.name="xxx";

    obj.say=function(){

        alert("我是xxx");

    }

    return obj;

}

//调用工厂方法创建对象:

var obj1  =  createObj();

 

 

//也可以用这种形式

function createObj(){

    var obj  =  {};  //这样生成对象

    obj.name="xxx";

    obj.say=function(){

        alert("我是xxx");

    }

    return obj;

}

var obj1  =  createObj();


  这种方式的问题是每一次通过工厂方法去创建一个对象,这个对象的属性name和方法say都必须重新创建一次,浪费内存。


 


  2.构造器方式:


//创建一个构造器,构造函数首字母大写

function Obj(){

    this.name="xxx";

    this.say=function(){

        alert("我是xxx");

    };

}

//利用构造器,通过new关键字生成对象

var obj1=new Obj();


  这是最基本的方式,但是也存在和工厂方式一样的毛病。


 


  3.原型方式:


//用空函数创建一个类

function Obj(){

}

//在类的原型链上添加属性和方法

Obj.prototype.name="xxx";

Obj.prototype.say=function(){

    alert("我是xxx");

}

//生成对象

var obj1=new Obj();


  这个方式的缺点是,当有引用属性时,改变一个对象的这个属性也会改变其他对象的这个属性。因为一个引用属性,都是指向的同一个地方。


 


  4.原型/构造联合方式


//用构造函数定义对象的非函数属性

function Obj(name){

    this.name=name;

    this.arr=new Array('a','b');

}

//用原型方式定义对象的方法

Obj.prototype.say=function(){

    alert("我是xxx");

}

//生成对象

var obj1 = new Obj('xxx');


  这种是目前用的最多的创建类和对象的方式,将方法和属性用不同的方式封装。


 


  5.动态原型方式


//动态原型方式和原型/构造混合方式的原理相似,唯一的区别就是赋予对象方法的位置

function Person(name, sex) {

    this.name = name;

    this.sex = sex;

    if (typeof this.say != "function") {

        Person.prototype.say = function () {

            alert(this.name);

        }

    }

}

var man =new Person ("凯撒", "男");

man.say();//凯撒


  动态原型模式是将所有的信息都封装到构造函数中,构造函数中,只用say不存在的情况下,才会将它添加到原型中。这段代码只有在初次调用时才会执行。


 


  实例化obj对象有三步:


  1. 创建obj对象:obj=new Object();


  2. 将obj的内部__proto__指向构造他的函数Obj的prototype,同时,obj.constructor===Obj.prototype.constructor,从而使得obj.constructor.prototype指向Obj.prototype(obj.constructor.prototype===A.prototype)。obj.constructor.prototype与的内部_proto_是两码事,实例化对象时用的是_proto_,obj是没有prototype属性的,但是有内部的__proto__,通过__proto__来取得原型链上的原型属性和原型方法。


  3. 将obj作为this去调用构造函数Obj,从而设置成员(即对象属性和对象方法)并初始化。


  当这3步完成,这个obj对象就与构造函数Obj再无联系,这个时候即使构造函数Obj再加任何成员,都不再影响已经实例化的obj对象了。


<