viviier

Javascript 对象模式

工厂模式

1
2
3
4
5
6
7
8
9
10
11
12
13
function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function() {
console.log(this.name);
}
return o;
}
var person1 = newCreatePerson('nico');
person1.sayName(); // 'nico'

构造函数模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job= job;
this.sayName = function() {
console.log(this.name);
}
}
var person1 = new Person('nico');
person1.sayName(); // 'nico'
/*
* 没有显示地创建对象
* 直接将属性和方法复制给了this对象
* 将构造函数的作用域赋值给了新对象(因此this就指向了这个新对象)
* 没有return语句
*/

原型模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Person() {
}
Person.prototype = {
constructor = Person;
name: 'nico',
age: 14,
job: 'dog',
skills: ['javascript', 'php', 'vue'],
sayName: function() {
console.log(this.name);
}
}
var person1 = new Person();
person1.sayName(); // 'nico'
/*
* 实例会共享对象
*/

组合使用构造函数模式和原型模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this,skills = ['javascript', 'php', 'vue']
}
Person.prototype = {
constructor: Person,
sayName: function() {
console.log(this.name);
}
}
var person1 = new Person('nico');
person1.sayName(); // 'nico'
/*
* 使用构造函数模式定义实例属性
* 使用原型模式定义方法和共享的属性
* 这样每个实例都会有一份自己的实例属性副本同时共享着方法的引用
*/
------本文结束感谢阅读------