首页 存档 技术 查看内容

Java程序员从笨鸟到菜鸟之(二十九)javascript对象的创建和继承实现

2018-3-30 13:00 |来自: 互联网 495 0

摘要: 【新朋友】点击标题下面(↑)蓝色字“Java那些事”关注 【老朋友】点击右上角,转发或分享本页面内容 javascript对象的创建 JavaScript中定义对象的几种方式(JavaScript中没有类的概念,只有对象): 1) 基于已 ...

【新朋友】点击标题下面(↑)蓝色字“Java那些事”关注

【老朋友】点击右上角,转发或分享本页面内容

javascript对象的创建

JavaScript中定义对象的几种方式(JavaScript中没有类的概念,只有对象):

1) 基于已有对象扩充其属性和方法:

[html] view plaincopyprint?

  1. var object = new Object();

  2. object.name = "zhangsan";

  3. object.sayName = function(name)

  4. {

  5. this.name = name;

  6. alert(this.name);

  7. }

  8. object.sayName("lisi");



2)工厂方式

[html] view plaincopyprint?

  1. //工厂方式创建对象

  2. /*

  3. function createObject()

  4. {

  5. var object = new Object();

  6. object.username = "zhangsan";

  7. object.password = "123";

  8. object.get = function()

  9. {

  10. alert(this.username ", " this.password);

  11. }

  12. return object;

  13. }

  14. var object1 = createObject();

  15. var object2 = createObject();

  16. object1.get();



带参数的构造方法:

[html] view plaincopyprint?

  1. function createObject(username, password)

  2. {

  3. var object = new Object();

  4. object.username = username;

  5. object.password = password;

  6. object.get = function()

  7. {

  8. alert(this.username ", " this.password);

  9. }

  10. return object;

  11. }

  12. var object1 = createObject("zhangsan", "123");

  13. object1.get();


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

[html] view plaincopyprint?

  1. function get()

  2. {

  3. alert(this.username ", " this.password);

  4. }

  5. function createObject(username, password)

  6. {

  7. var object = new Object();

  8. object.username = username;

  9. object.password = password;

  10. object.get = get;

  11. return object;

  12. }

  13. var object = createObject("zhangsan", "123");

  14. var object2 = createObject("lisi", "456");

  15. object.get();

  16. object2.get();




3)构造函数方式

[html] view plaincopyprint?

  1. function Person()

  2. {

  3. //在执行第一行代码前,js引擎会为我们生成一个对象

  4. this.username = "zhangsan";

  5. this.password = "123";

  6. this.getInfo = function()

  7. {

  8. alert(this.username ", " this.password);

  9. }

  10. //此处有一个隐藏的return语句,用于将之前生成的对象返回

  11. }

  12. var person = new Person();

  13. person.getInfo();


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

[html] view plaincopyprint?

  1. function Person(username, password)

  2. {

  3. this.username = username;

  4. this.password = password;

  5. this.getInfo = function()

  6. {

  7. alert(this.username ", " this.password);

  8. }

  9. }

  10. var person = new Person("zhangsan", "123");

  11. person.getInfo();



4)原型(“prototype”)方式

[html] view plaincopyprint?

  1. //使用原型(prototype)方式创建对象

  2. /*

  3. function Person()

  4. {

  5. }

  6. Person.prototype.username = "zhangsan";

  7. Person.prototype.password = "123";

  8. Person.prototype.getInfo = function()

  9. {

  10. alert(this.username ", " this.password);

  11. }

  12. var person = new Person();

  13. var person2 = new Person();

  14. person.username = "lisi";

  15. person.getInfo();

  16. person2.getInfo();

  17. */


[html] view plaincopyprint?

  1. function Person()

  2. {

  3. }

  4. Person.prototype.username = new Array();

  5. Person.prototype.password = "123";

  6. Person.prototype.getInfo = function()

  7. {

  8. alert(this.username ", " this.password);

  9. }

  10. var person = new Person();

  11. var person2 = new Person();

  12. person.username.push("zhangsan");

  13. person.username.push("lisi");

  14. person.password = "456";

  15. person.getInfo();

  16. person2.getInfo();


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

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

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

[html] view plaincopyprint?

  1. //使用原型 构造函数方式来定义对象

  2. function Person()

  3. {

  4. this.username = new Array();

  5. this.password = "123";

  6. }

  7. Person.prototype.getInfo = function()

  8. {

  9. alert(this.username ", " this.password);

  10. }

  11. var p = new Person();

  12. var p2 = new Person();

  13. p.username.push("zhangsan");

  14. p2.username.push("lisi");

  15. p.getInfo();

  16. p2.getInfo();


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

[html] view plaincopyprint?

  1. function Person()

  2. {

  3. this.username = "zhangsan";

  4. this.password = "123";

  5. if(typeof Person.flag == "undefined")

  6. {

  7. alert("invoked");

  8. Person.prototype.getInfo = function()

  9. {

  10. alert(this.username ", " this.password);

  11. }

  12. Person.flag = true;

  13. }

  14. }

  15. var p = new Person();

  16. var p2 = new Person();

  17. p.getInfo();

  18. p2.getInfo();


JavaScript中的继承。

1) 对象冒充

[html] view plaincopyprint?

  1. //继承第一种方式:对象冒充

  2. function Parent(username)

  3. {

  4. this.username = username;

  5. this.sayHello = function()

  6. {

  7. alert(this.username);

  8. }

  9. }

  10. function Child(username, password)

  11. {

  12. //下面三行代码是最关键的代码

  13. this.method = Parent;

  14. this.method(username);

  15. delete this.method;

  16. this.password = password;

  17. this.sayWorld = function()

  18. {

  19. alert(this.password);

  20. }

  21. }

  22. var parent = new Parent("zhangsan");

  23. var child = new Child("lisi", "1234");

  24. parent.sayHello();

  25. child.sayHello();

  26. child.sayWorld();


2) call方法方式。

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

[html] view plaincopyprint?

声明:文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

相关分类

返回顶部