forked from Darylxyx/JavaScript-plugin
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcreateObject.html
More file actions
187 lines (134 loc) · 4.48 KB
/
createObject.html
File metadata and controls
187 lines (134 loc) · 4.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
<head>
<title>创建对象</title>
</head>
<body>
<script>
//创建对象
//【工厂模式】
// function Person(name, age) {
// var o = new Object();
// o.name = name;
// o.age = age;
// o.sayName = function() {
// console.log(this.name);
// };
// return o;
// }
// var person1 = Person('Nicholas', 29),
// person2 = Person('Greg', 27);
//工厂模式问题
//工厂模式虽然解决了创建多个相似对象的问题，但却没解决对象识别的问题
//【工厂模式】
//【构造函数模式】
// function Person(name, age) {
// this.name = name;
// this.age = age;
// this.sayName = function() {
// console.log(this.name);
// };
// }
// var person1 = new Person('Nicholas', 29),
// person2 = new Person('Greg', 27);
// console.log(person1.constructor === Person); //true
// console.log(person1 instanceof Object); //true
// console.log(person1 instanceof Person); //true
//构造函数模式问题
//对象的 constructor 属性最初是用来标识对象类型的。检测对象类型，还是 instanceof 更可靠。
//创建的对象既是 Object 的实例，也是 Person 的实例。
//创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型；而这正是构造函数模式胜过工厂模式的地方。
//最大问题在于每个方法都会在实例上重新创建一遍
//【构造函数模式】
//【原型模式】
// function Person() {}
// Person.prototype.name = 'Nicholas';
// Person.prototype.age = 29;
// Person.prototype.sayName = function() {
// console.log(this.name);
// };
// var person1 = new Person();
// person1.sayName();
// console.log(person1.__proto__ == Person.prototype); //true
// console.log(Person.prototype.isPrototypeOf(person1)); //true
// console.log(Object.getPrototypeOf(person1) == Person.prototype); //ES5方法 true
//原型模式问题
//每个实例共享属性和方法，若一个实例更改引用类型属性，所有实例该属性均会被改变。
//指针[[Prototype]]存在于实例与构造函数的原型对象之间，在 Firefox、Safari 和 Chrome 在可以通过 __proto__ 访问。
// console.log(person1.hasOwnProperty('name'));
//hasOwnProperty 可以检测属性是存在于实例上还是从原型继承来的
// console.log(Object.keys(Person.prototype));
// person1.name = 'Greg';
// console.log(Object.keys(person1));
//使用ES5的 Object.keys 方法也可以返回所有可枚举的属性。
// console.log(Object.getOwnPropertyNames(Person.prototype));
// getOwnPropertyNames 方法会返回所以属性，包括不可枚举的。上面两个方法都可以用来替代 for in循环。
function Person() {}
Person.prototype = {
constructor: Person,
name: 'Nicholas',
age: 29,
sayName: function() {
console.log(this.name);
}
};
//可以通过对象字面量的方式书写原型对象，不过由于对原型的重写会丢掉 constructor 属性，可以手动指定。
//不过这样会导致 constructor 属性的 [[Enumerable]] 为true
//【原型模式】
//【组合模式】
// function Person(name, age) {
// this.name = name;
// this.age = age;
// this.friends = ['Shelby', 'Court'];
// }
// Person.prototype = {
// constructor: Person,
// sayName: function() {
// console.log(this.name);
// }
// };
// var person1 = new Person('Nicholas', 29),
// person2 = new Person('Greg', 27);
// person1.friends.push('Van');
// console.log(person1.friends);
// console.log(person2.friends);
// console.log(person1.friends === person2.friends); //false
// console.log(person1.sayName === person2.sayName); //true
//【组合模式】
//【动态原型模式】
// function Person(name, age) {
// this.name = name;
// this.age = age;
// if (typeof this.sayName != 'function') {
// Person.prototype.sayName = function() {
// console.log(this.name);
// }
// }
// }
//【动态原型模式】
//【寄生构造函数模式】
// function SpecialArray() {
// var values = new Array();
// values.push.apply(values, arguments);
// values.toPipedString = function() {
// return this.join('|');
// };
// return values;
// }
// var colors = new SpecialArray('red', 'blue', 'green');
// console.log(colors.toPipedString());
//【寄生构造函数模式】
//【稳妥构造函数模式】
// function Person(name, age) {
// var o = new Object();
// o.sayName = function() {
// console.log(name);
// };
// return o;
// }
// var friend = Person('Nicholas', 29);
// friend.sayName();
//【稳妥构造函数模式】
</script>
</body>
</html>