[js] 设计模式 The Constructor Pattern (构造器模式)
基本构造器
按照惯例，构造函数以大写字母开头
//构造函数本身可不需要return，
//按照惯例的话，构造函数第一个字母大写,
//可将实例标识为特定的类型
缺点：不便于继承。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function Car(model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;
//console.log(inner); //error
this.toString = function(inner) {
return this.model + " has done " + this.miles + " miles " + inner;
};
}
var civic = new Car("Honda Civic", 2009, 20000);
console.log(civic.constructor);//可以标识出它的对象类型
console.log(civic.model);
console.log(civic.year);
console.log(civic.miles);
console.log(civic.toString('inside1'));
var mondeo = new Car("Ford Mondeo", 2010, 5000);
console.log(mondeo.model);
console.log(mondeo.year);
console.log(mondeo.miles);
console.log(mondeo.toString('inside2'));
//设置属性
mondeo.model = 'abc'; //点 语法.
mondeo['year'] = 2016; //中括号 语法
Object.defineProperty(mondeo, "miles", {
value: 10086,
writable: true,
enumerable: true,
configurable: true
}); //Object.defineProperty
console.log(mondeo.model);
console.log(mondeo.year);
console.log(mondeo.miles);
Object.defineProperties(mondeo, {
"model": {
value: "Hello World",
writable: true
},
"year": {
value: 123,
writable: false
},
"miles": {
value: "321",
writable: false
}
});// Object.defineProperties
console.log(mondeo.model);
console.log(mondeo.year);
console.log(mondeo.miles);
console.log(mondeo.toString('inside2'));
</script>
</body>
</html>
实例化的多种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
console.log(this.name);
};
// this.sayName = sayName;
//
// function sayName() {
// console.log(this.name);
// }//本质是一样的
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); //"Nicholas"
person2.sayName(); //"Greg"
console.log(person1 instanceof Object); //true
console.log(person1 instanceof Person); //true
console.log(person2 instanceof Object); //true
console.log(person2 instanceof Person); //true
console.log(person1.constructor == Person); //true
console.log(person2.constructor == Person); //true
console.log(person1.sayName == person2.sayName); //false
//不同实例上的同名函数式不相等的，
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName(); //"Nicholas"
Person("Greg", 27, "Doctor"); //adds to window
window.sayName(); //"Greg"
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse"); //或apply() 继承？
o.sayName(); //"Kristen"
</script>
</body>
</html>
由多个实例化使用同一个方法，反复创建，引出的使用全局函数，然后又引出 使用原型的构造器
<!DOCTYPE html>
<html>
<head>
<title>Constructor Pattern Example 3</title>
<script type="text/javascript">
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
function sayName() {
console.log(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); //"Nicholas"
person2.sayName(); //"Greg"
console.log(person1 instanceof Object); //true
console.log(person1 instanceof Person); //true
console.log(person2 instanceof Object); //true
console.log(person2 instanceof Person); //true
console.log(person1.constructor == Person); //true
console.log(person2.constructor == Person); //true
console.log(person1.sayName == person2.sayName); //true
</script>
</head>
<body>
</body>
</html>
使用原型的构造器
缺点：？。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 </head> 8 9 <body> 10 <script> 11 function Car(model, year, miles) { 12 this.model = model; 13 this.year = year; 14 this.miles = miles; 15 //console.log(inner); //error 16 } 17 // Note here that we are using Object.prototype.newMethod rather than 18 // Object.prototype so as to avoid redefining the prototype object 19 Car.prototype.toString = function(inner) { 20 return this.model + " has done " + this.miles + " miles " + inner; 21 }; 22 // Usage: 23 var civic = new Car("Honda Civic", 2009, 20000); 24 console.log(civic.model); 25 console.log(civic.year); 26 console.log(civic.miles); 27 console.log(civic.toString('inside1')); 28 var mondeo = new Car("Ford Mondeo", 2010, 5000); 29 console.log(mondeo.model); 30 console.log(mondeo.year); 31 console.log(mondeo.miles); 32 console.log(mondeo.toString('inside2')); 33 //设置属性 34 mondeo.model = 'abc'; //点 语法. 35 mondeo['year'] = 2016; //中括号 语法 36 Object.defineProperty(mondeo, "miles", { 37 value: 10086, 38 writable: true, 39 enumerable: true, 40 configurable: true 41 }); //Object.defineProperty 42 console.log(mondeo.model); 43 console.log(mondeo.year); 44 console.log(mondeo.miles); 45 Object.defineProperties(mondeo, { 46 "model": { 47 value: "Hello World", 48 writable: true 49 }, 50 "year": { 51 value: 123, 52 writable: false 53 }, 54 "miles": { 55 value: "321", 56 writable: false 57 } 58 }); // Object.defineProperties 59 console.log(mondeo.model); 60 console.log(mondeo.year); 61 console.log(mondeo.miles); 62 console.log(mondeo.toString('inside2')); 63 </script> 64 </body> 65 66 </html>
动态原型模式
不反复重写原型
function Person(name, age, job){ //properties this.name = name; this.age = age; this.job = job; //methods if (typeof this.sayName != "function"){ Person.prototype.sayName = function(){ console.log(this.name); }; } } var friend = new Person("Nicholas", 29, "Software Engineer"); friend.sayName();
