06月03, 2018

前端学习笔记(02) - 创建对象的几种方式

1. 工厂模式

function CreatePerson(name, age, job) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function () {
    alert(this.name);
  }
  return o;
}

var person1 = CreatePerson('john', 18, 'web');
var person2 = CreatePerson('magic', 16, 'UI');

工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别问题(即怎样知道一个对象的类型),不够完美。

2. 构造函数模式

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function () {
    alert(this.name);
  }
}

var person1 = new Person('john', 18, 'web');
var person2 = new Person('magic', 16, 'UI');

这两个创建的对象都有一个constructor(构造函数)属性,该属性指向Person, 这种模式也有缺点,比如创建的这两个对象里面的sayName方法重复创建,有点多余了

3. 原型模式

我们创建的每个函数都有一个 prototype(原型) 属性, 这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例 共享的属性和方法

function Person() {
}
Person.prototype.name = 'John';
Person.prototype.age = 18;
Person.prototype.job = 'web';
Person.portotype.arr = [1,2,3];
Person.prototype.sayName = function () {
  alert(this.name)
}
var person1 = new Person();
var person2 = new Person();

这种模式的缺点就是不管是方法还是属性都是共享的,就会造成创建的两个对象相互影响,比如一个实例对象修改arr, 另一个实例对象也会跟着修改

4. 构造函数与原型混合模式

将两者的优点整合,取长补短

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function () {
    alert(this.name);
  }
}
Person.prototype = {
  constructor: Person,
  sayName: function () {
    alert(this.name)
  }
}
var person1 = new Person('john', 18, 'web');
var person2 = new Person('magic', 16, 'UI');

5. 动态原型模式

把所有信息都封装在了构造函数中,而通过构造函数中初始化原型(仅在必要的情况下),又保持了同时使用构造函数和原型的优点。

function Person(name, age, job)
{
    this.name = name;
    this.age = age;
    this.job = job;
    if(typeof this.sayName != 'function')
    {
        Person.prototype.sayName = function ()
        {
            alert(this.name);
        }
    }
}

var person1 = new Person('john', 18, 'web');
var person2 = new Person('magic', 16, 'UI');

这里只在sayName()方法不存在的情况下,才会将它添加到原型中

6. 寄生构造函数模式

这种模式的基本思想是创建一个函数,该函数的作用是封装创建对象的代码,然后再返回新创建的对象。

function Person(name, age, job)
{
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function ()
    {
        alert(this.name);
    };
    return o;
}
var person = new Person('john', 18, 'web');

7. 稳妥构造函数模式

function Person(name)
{
    var o = new Object();
    o.sayName = function ()
    {
        alert(name);
    }
    return o;
}
var person = Person('john');
person.sayName();

所谓稳妥对象,指的是没有公共属性,而且其方法也不引用this的对象,稳妥对象适合在一些安全环境中(这些环境会禁止使用this和new),或者在防止数据被其他应用改动时使用。

本文链接:http://www.laijianlou.top/post/front-02.html

-- EOF --

Comments