查看: 590|回复: 0

[JavaScript/JQuery] ES5 - 面向对象编程

发表于 2017-10-5 09:50:04
尚学堂AD

1. 创建对象的几种方式

  1. /**
  2. * 普通方式
  3. */
  4. var obj = {};
  5. obj.name = 'XingyaZhao';
  6. obj.age = 23;
  7. obj.intro = function () {
  8. return "My name is " + this.name + ", and I'm " + this.age + ".";
  9. };
  10. alert(obj.intro());
复制代码
  1. /**
  2. * 工厂模式
  3. */
  4. function createObject(name,age) {
  5. var obj = {};
  6. obj.name = name;
  7. obj.age = age;
  8. obj.intro = function () {
  9. return "My name is " + this.name + ", and I'm " + this.age + ".";
  10. };
  11. return obj;
  12. }
  13. var obj1 = createObject('XingyaZhao',23);
  14. var obj2 = createObject('HailinWang',22);
  15. alert(obj1.intro());
  16. alert(obj2.intro());
复制代码
  1. /**
  2. * 构造函数方式
  3. */
  4. function Person(name, age) {
  5. this.name = name;
  6. this.age = age;
  7. this.intro = function() {
  8. return "My name is " + this.name + ", and I'm " + this.age + ".";
  9. };
  10. }
  11. var zhao = new Person('XingyaZhao',23);
  12. var wang = new Person('HailinWang',22);
  13. alert(zhao.intro());
  14. alert(wang.intro());
复制代码
  1. <br>构造函数方式与工厂模式的区别<br><br>1.构造函数没有new Object,但它后台会自动var obj = new Object<br>2.this就相当于obj<br>3.构造函数不需要返回对象引用,它是后台自动返回的<br><br><br>构造函数方式的规范<br><br>1.构造函数也是函数,但函数名第一个字母大写<br>2.必须通过 new 构造函数名() 来创建对象,new Person()<br><br><br>2. 原型<br><br>我们创建的每个函数都有一个 prototype(原型)属性, 这个属性是一个对象, 它的用途是包含 可以由特定类型的所有实例共享的属性和方法。逻辑上可以这么理解: prototype 通过调用构造函数而创建的那个对象的原型对象。使用原型的好处可以让所有对象实例共享它所包含的属性和方法。 也就是说, 不必在构造函数中定义对象信息, 而是可以直接将这些信息添加到原型中。<br><br>
复制代码
  1. /**
  2. * 原型
  3. *
  4. * 当实例化多个Person的时候,共享同一个species属性和intro方法,而name和age属性存在于每一个实例对象里。
  5. * 我们一般将实例特有的属性放在构造函数里,将共有的属性和方法放在原型里,这样的好处是可以节省内存。
  6. */
  7. function Person(name, age) {
  8. this.name = name; //实例属性
  9. this.age = age; //实例属性
  10. }
  11. Person.prototype = {
  12. //这里Person.prototype指向了一个新对象{},所以要将这个对象的constructor指向Person,否则会指向Object
  13. constructor: Person,
  14. species: 'animal',
  15. intro: function () {
  16. return "My name is " + this.name + ", and I'm " + this.age + ".";
  17. }
  18. };
  19. var xyz = new Person('XingyaZhao',23);
  20. alert(xyz.intro());
  21. alert(xyz.constructor);
  22. console.log(xyz);
复制代码
  1. <br><br>
复制代码

  1. [/code]
  2. <p> </p>
  3. [code]
复制代码

  1. <br><br>
复制代码


回复

使用道具 举报