javascript对象的创建和继承实现

JavaScript对象的创建

JavaScript中定义对象的几种方式（JavaScript中没有类的概念，只有对象）：

1） 基于已有对象扩充其属性和方法：

[html] view plain copy print?

1. var object = new Object;
3. object.name = "zhangsan";
4. object.sayName = function(name)
5. {
6. this.name = name;
7. alert(this.name);
8. }
10. object.sayName("lisi");

2）工厂方式

[html] view plain copy print?

1. //工厂方式创建对象
3. /*
4. function createObject
5. {
6. var object = new Object;
8. object.username = "zhangsan";
9. object.password = "123";
11. object.get = function
12. {
13. alert(this.username + ", " + this.password);
14. }
16. return object;
17. }
19. var object1 = createObject;
20. var object2 = createObject;
22. object1.get;

带参数的构造方法：

[html] view plain copy print?

1. function createObject(username, password)
2. {
3. var object = new Object;
5. object.username = username;
6. object.password = password;
8. object.get = function
9. {
10. alert(this.username + ", " + this.password);
11. }
13. return object;
14. }
16. var object1 = createObject("zhangsan", "123");
17. object1.get;

让一个函数对象被多个对象所共享，而不是每一个对象拥有一个函数对象。

[html] view plain copy print?

1. function get
2. {
3. alert(this.username + ", " + this.password);
4. }
6. function createObject(username, password)
7. {
8. var object = new Object;
10. object.username = username;
11. object.password = password;
13. object.get = get;
15. return object;
16. }
18. var object = createObject("zhangsan", "123");
19. var object2 = createObject("lisi", "456");
21. object.get;
22. object2.get;

3）构造函数方式

[html] view plain copy print?

1. function Person
2. {
3. //在执行第一行代码前，js引擎会为我们生成一个对象
4. this.username = "zhangsan";
5. this.password = "123";
7. this.getInfo = function
8. {
9. alert(this.username + ", " + this.password);
10. }
12. //此处有一个隐藏的return语句，用于将之前生成的对象返回
13. }
15. var person = new Person;
16. person.getInfo;

可以在构造对象时传递参数

[html] view plain copy print?

1. function Person(username, password)
2. {
3. this.username = username;
4. this.password = password;
6. this.getInfo = function
7. {
8. alert(this.username + ", " + this.password);
9. }
10. }
12. var person = new Person("zhangsan", "123");
13. person.getInfo;

4）原型（“prototype”）方式

[html] view plain copy print?

1. //使用原型（prototype）方式创建对象
3. /*
4. function Person
5. {
7. }
9. Person.prototype.username = "zhangsan";
10. Person.prototype.password = "123";
12. Person.prototype.getInfo = function
13. {
14. alert(this.username + ", " + this.password);
15. }
17. var person = new Person;
18. var person2 = new Person;
20. person.username = "lisi";
22. person.getInfo;
23. person2.getInfo;
24. */

[html] view plain copy print?

1. function Person
2. {
4. }
6. Person.prototype.username = new Array;
7. Person.prototype.password = "123";
9. Person.prototype.getInfo = function
10. {
11. alert(this.username + ", " + this.password);
12. }
14. var person = new Person;
15. var person2 = new Person;
17. person.username.push("zhangsan");
18. person.username.push("lisi");
19. person.password = "456";
21. person.getInfo;
22. person2.getInfo;

如果使用原型方式对象，那么生成的所有对象会共享原型中的属性，这样一个对象改变了该属性也会反应到其他对象当中。

单纯使用原型方式定义对象无法在构造函数中为属性赋初值，只能在对象生成后再去改变属性值。

使用原型+构造函数方式来定义对象，对象之间的属性互不干扰，各 个对象间共享同一个方法

[html] view plain copy print?

1. //使用原型+构造函数方式来定义对象
3. function Person
4. {
5. this.username = new Array;
6. this.password = "123";
7. }
9. Person.prototype.getInfo = function
10. {
11. alert(this.username + ", " + this.password);
12. }
14. var p = new Person;
15. var p2 = new Person;
17. p.username.push("zhangsan");
18. p2.username.push("lisi");
20. p.getInfo;
21. p2.getInfo;

5）动态原型方式：在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。

[html] view plain copy print?

1. function Person
2. {
3. this.username = "zhangsan";
4. this.password = "123";
6. if(typeof Person.flag == "undefined")
7. {
8. alert("invoked");
10. Person.prototype.getInfo = function
11. {
12. alert(this.username + ", " + this.password);
13. }
15. Person.flag = true;
16. }
17. }
19. var p = new Person;
20. var p2 = new Person;
22. p.getInfo;
23. p2.getInfo;

JavaScript中的继承。

1） 对象冒充

[html] view plain copy print?

1. //继承第一种方式：对象冒充
3. function Parent(username)
4. {
5. this.username = username;
7. this.sayHello = function
8. {
9. alert(this.username);
10. }
11. }
13. function Child(username, password)
14. {
15. //下面三行代码是最关键的代码
16. this.method = Parent;
17. this.method(username);
18. delete this.method;
20. this.password = password;
22. this.sayWorld = function
23. {
24. alert(this.password);
25. }
26. }
28. var parent = new Parent("zhangsan");
29. var child = new Child("lisi", "1234");
31. parent.sayHello;
33. child.sayHello;
34. child.sayWorld;

2） call方法方式。

call方法是Function对象中的方法，因此我们定义的每个函数都拥有该方法。可以通过函数名来调用call方法，call方法的第一个参数会被传递给函数中的this，从第2个参数开始，逐一赋值给函数中的参数。

[html] view plain copy print?

1. <p//使用call方式实现对象的继承</p<pfunction Parent(username)
2. {
3. this.username = username;</p<p this.sayHello = function
4. {
5. alert(this.username);
6. }
7. }</p<pfunction Child(username, password)
8. {
9. Parent.call(this, username);</p<p this.password = password;</p<pthis.sayWorld = function
10. {
11. alert(this.password);
12. }
13. }</p<pvar parent = new Parent("zhangsan");</p<pvar child = newChild("lisi", "123");</p<pparent.sayHello;</p<pchild.sayHello;
14. child.sayWorld;</p<p
15. </p<span style="font-size:18px;"<span style="color:#000000;"</span</span

3） apply方法方式

[html] view plain copy print?

1. //使用apply方法实现对象继承
3. function Parent(username)
4. {
5. this.username = username;
7. this.sayHello = function
8. {
9. alert(this.username);
10. }
11. }
13. function Child(username, password)
14. {
15. Parent.apply(this, new Array(username));
17. this.password = password;
19. this.sayWorld = function
20. {
21. alert(this.password);
22. }
23. }
26. var parent = new Parent("zhangsan");
27. var child = new Child("lisi", "123");
29. parent.sayHello;
31. child.sayHello;
32. child.sayWorld;

4）原型链方式（无法给构造函数传参数）

[html] view plain copy print?

1. //使用原型链（prototype chain）方式实现对象继承
3. function Parent
4. {
6. }
8. Parent.prototype.hello = "hello";
9. Parent.prototype.sayHello = function
10. {
11. alert(this.hello);
12. }
14. function Child
15. {
17. }
19. Child.prototype = new Parent;
21. Child.prototype.world = "world";
22. Child.prototype.sayWorld = function
23. {
24. alert(this.world);
25. }
27. var child = new Child;
29. child.sayHello;
30. child.sayWorld;

5）混合方式（推荐）

[html] view plain copy print?

1. //使用混合方式实现对象继承(推荐)
3. function Parent(hello)
4. {
5. this.hello = hello;
6. }
8. Parent.prototype.sayHello = function
9. {
10. alert(this.hello);
11. }
13. function Child(hello, world)
14. {
15. Parent.call(this, hello);
17. this.world = world;
18. }
20. Child.prototype = new Parent;
22. Child.prototype.sayWorld = function
23. {
24. alert(this.world);
25. }
27. var child = new Child("hello", "world");
29. child.sayHello;
30. child.sayWorld;