JS面向对象的三种模式

四种模式

工厂模式

1. 声明一个对象

2. 向对象添加属性和方法
3. 返回这个对象
4. 创建新对象，通过函数创建

function person(name,age){
    var z = new Object(); // 1.声明一个对象
        z.name = 'xin'; // 2.向对象添加属性和方法
        z.age = 22;
        z.sayName = function(){
            return this.name;
        };
    
    return z; // 3.返回这个对象
};

var per1 = person('xinxin',23); // 4.创建新对象，通过函数创建
alert(per1);
alert(per1.sayName());
alert( per1.name instanceOf);

1. 在一个函数内创建一个对象，给对象添加属性和方法，再将对象返回

2. 无法识别对象的类型，全部为Object

构造函数模式

1. 首字母大写

2. 没有显式创建对象
3. 直接赋值属性方法给this
4. 没有return语句
5. 使用new操作符创建对象
6. instanceOf()能够识别对象

function Person(name,age){ // 1. 首字母大写 2. 没有显式创建对象
    this.name = name; // 3. 直接赋值属性方法给this
    this.age = age;
    this.sayName = function(){
        return this.name+' is '+this.age+' years old.';
    }; // 4. 没有return语句
}
var per1 = new Person('xin',22); // 5. 使用new操作符创建对象
alert(per1.name); 
alert(per1.sayName()); 
alert(instanceOf per1.name);  // 6. instanceOf()能够识别对象

原型模式

1. 省略了参数，所有实例均取得了相同的属性

2. 一个实例修改了引用，另一个实例也随之更改了引用

    function Person(){} // 1. 省略了参数，所有实例均取得了相同的属性
    Person.prototype.name = 'xinchou';
    Person.prototype.age = 22;
    Person.prototype.sayName = function(){
        return this.name+' is '+this.age+' years old.';
    }
    var per1 = new Person();
    var per2 = new Person();
    alert(per1.sayName());
    alert(per2.sayName());

   // per1.name.pop();
    per2.name = 'hua';
    per2.age = 24;

    alert(per1.sayName());
    alert(per2.sayName()); // 2. 一个实例修改了引用，另一个实例也随之更改了引用

原型模式+构造函数模式

1. 构造函数定义实例属性

2. 原型模式用于定义方法和共享属性
3. 每个实例都有自己的一份实例属性，并共享着方法

function Person(name,age){ // 1. 构造函数定义实例属性
    this.name = name; 
    this.age = age;
}
Person.prototype.sayName = function(){ //2. 原型模式用于定义方法和共享属性
        return this.name+' is '+this.age+' years old.';
    }; 
var per1 = new Person('xin',23); 
var per2 = new Person('hua',25);
alert(per1.name); // 3. 每个实例都有自己的一份实例属性，并共享着方法
alert(per1.sayName()); 

四种模式对比