JavaScript构造函数

pidtfork · 发表于 2020-10-28 18:02:59

JavaScript构造函数

什么是构造函数

在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。这个过程叫做实例化。

为什么要使用构造函数

假如一台中控上控制了4台时序电源，每台时序电源有通道开关方法，通道状态，全开、全关、设备ID等属性和方法，但是方法执行的结果给属性有关联。一般思路的话可能要写很多函数方法和定义很多状态属性。
这时候构造函数的优势就体现出来了，我们将设备的功能和状态封装到一个函数里面，通过实例化来创建包含这些方法和状态的对象。

例子说明

var name = "ubains"; //定义全局变量
//定义一个构造函数名字可以任意好习惯构造函数通常首字母大写普通函数首字母小写
function Power(port, len){
//this 在实例化时总是指向自身这个对象
this.port =port || "COM8"; //定于一个属性并赋传入的参数
//如果传入的port为空就赋值默认值 COM8
this.len =len; //this.xxxx xxxx可以是任何名字
// 如果同名后面的覆盖前面的，也就是重新赋值了，所以属性值可以赋值任意类型
this.open = function(chs) { //定义一个方法
console.log("open channel " +chs);
}
this.info = function() {
console.log("port " + this.port); //this指向自身，这里this.port就是上面定义的属性
console.log("max channel " + this.len);
}
console.log("new run one"); //每次实例化过程中都会执行
varlength = len; //可以定义局部变量实例化后清除除非闭包中使用到
console.log(name); //可以调用全局变量
if(name.length){ //可以在实例化过程中进行逻辑运行
console.log("this is ubains");
this.name =name; //例如根据值为对象添加额外属性
} else{
console.log("No parameters");
}
this.arr = new Array(this.len); //属性可以是其他构造函数实例化的对象
//Array构造函数里面执行完后再执行到这里
this.status ={
channel: 1,
name: "1",
get: function () {
//这里的 this 不指向构造函数，指向 this.status 这个对象
console.log(this.port); //undefined
console.log(this); //{ channel: 1, name: '1',get: [Function: get] }
}
}
}
vardev1 = new Power("COM1", 8); //实例化
vardev2 = new Power("COM2", 8); //实例化
vardev3 = new Power("", 8); //实例化传入空将默认赋值为 COM8
vardev4 = new Power("COM4", 12); //实例化
console.log(dev1); //打印如下
// Power {
// port: 'COM1',
// len: 8,
// open: [Function],
// info: [Function],
// name: 'ubains',
// arr: [ <8 empty items> ],
// status: { channel: 1, name: '1', get: [Function: get] }
// }
console.log(dev4); //打印如下
// Power {
// port: 'COM4',
// len: 12,
// open: [Function],
// info: [Function],
// name: 'ubains',
// arr: [ <12 empty items> ],
// status: { channel: 1, name: '1', get: [Function: get] }
// }
//因为传入参数不一样，里面的属性值不一样。
console.log(dev1.port); //获取属性值
dev1.port = "NET1"; //设置属性值
console.log(dev4.port); // COM4
//实例化后每个对象是独立空间，互不影响，
dev1.open(1); //调用方法传参并执行
dev1.open = function(chs) { //给方法重新赋值方法重写
console.log("port = " + this.port); //这里的this其实指向dev1
console.log("port = " +dev1.port); //所以你也可以写成这样推荐用this 便于复用
console.log("open all channel");
console.log("Adults want it " +chs);
}
dev1.open("all"); //重新调用就会执行上面的方法
dev1.status.get(); //this 指向问题构造函数中的this.status

复制代码

		自动登录	找回密码
密码			立即注册

[学习笔记] JavaScript构造函数