今天做项目的时候,遇到了一个问题,就是我需要在项目中使用构造函数。我们知道普通的构造函数中的this是指向该函数,如果在vue项目中使用this,表示的是vue事例。
一般构造函数:
如下面的例子,是我们的一般构造函数的书写方式,this指向的是该函数,用this.
定义的是该函数的属性和方法。
function SocketTimers() {
this.timerGroupId = '';
this.allTimerIsPower = false;
this.timerNum = '';
this.socketTimer = [];
}
vue中定义构造函数:
因为继续使用一般的书写方法在vue项目中是会报错的,this并不指向构造函数,而是指向vue事例。所以我们要使用函数原型链的方法,给函数定义属性和方法,而不能直接使用this
关键字了。
本次以在单独js文件定义构造函数为例,在vue组件中使用。
//js文件中的书写方法
export const SocketTimers = function () {
SocketTimers.prototype.timerGroupId="";
SocketTimers.prototype.allTimerIsPower=false;
SocketTimers.prototype.timerNum="";
SocketTimers.prototype.socketTimer=[];
};
//组件中使用
var socketTimers = new SocketTimers();