javascript设计模式-Constructor(构造器模式)

186 阅读1分钟

javascript设计模式

Constructor(构造器模式)

function Car (model, year, miles) {
	this.model = model
	this.year = year
	this.miles = miles
	this.toString = function () {
		return this.model + "has done" + this.miles + "miles"
	}
}

// 实例
var civic = new Car("Honda Civic", 2009, 20000)
var mondeo = new Car("Ford Mondeo", 2010, 5000)

// 打印两个实例的方法
console.log(civic.toString())
console.log(mondeo.toString())

console.log(civic)
输出:
Car {model: "Honda Civic", year: 2009, miles: 20000, toString: ƒ}
miles: 20000
model: "Honda Civic"
toString: ƒ ()
year: 2009
proto:
constructor: ƒ Car(model, year, miles)
arguments: null
caller: null
length: 3
name: "Car"
prototype: {constructor: ƒ}
proto: ƒ ()
[[FunctionLocation]]: VM952:1
[[Scopes]]: Scopes[1]
proto: Object

console.log(civic.constructor === mondeo.constructor) // true
//说明两个实例化的构造器指向Car的地址

// 比较car两个实例化对象的方法是否复用
console.log(civic.toString === mondeo.toString) // false

//说明每个实例都重新创建了一个toString方法

为了实现属性的独有,方法的共享,我们利用带原型的Constructor(构造器)

带原型的Constructor(构造器模式)

function Car (model, year, miles) {
	this.model = model
	this.year = year
	this.miles = miles
}
Car.prototype.toString = function () {
	return this.model + "has done" + this.miles + "miles"
}

// 实例
var civic = new Car("Honda Civic", 2009, 20000)
var mondeo = new Car("Ford Mondeo", 2010, 5000)
// 打印两个实例的方法
console.log(civic.toString())
console.log(mondeo.toString())

//判断两个实例方法是否共享
console.log(civic.toString === mondeo.toString) // true

console.log(civic)
输出:
Car {model: "Honda Civic", year: 2009, miles: 20000}
miles: 20000
model: "Honda Civic"
year: 2009
proto:
toString: ƒ ()
constructor: ƒ Car(model, year, miles)
arguments: null
caller: null
length: 3
name: "Car"
prototype: {toString: ƒ, constructor: ƒ} // 方法在原型链上
proto: ƒ ()
[[FunctionLocation]]: VM915:1
[[Scopes]]: Scopes[1]
proto: Object