JavaScript工厂方法

Posted 2020-08-21 称代先生

 

构造函数，用于构造对象。也叫工厂方式【原料、加工、出厂】

空对象，相当于“原料”

给对象加上属性和方法，相当于“加工”

把对象返回出去，相当于“出厂”

//工厂方式【原料、加工、出厂】
function createPerson(name,gender){ //构造函数，用于构造对象
    var obj=new Object();//空对象，相当于“原料”
    //给对象加上属性和方法，相当于“加工”
    obj.name=name;
    obj.gender=gender;
    obj.showName= function () {
        alert("我叫："+obj.name)
    };
    obj.showGender= function () {
        alert("我是"+obj.gender+"的")
    };
    return obj;//把对象返回出去，相当于“出厂”
}
var person1=createPerson("syr","女");
var person2=createPerson("xixi","男");
person1.showName();
person1.showGender();
person2.showName();
person2.showGender();

这样看起来蛮清晰，但是此时工厂方法有两个缺点

第一，没有new（解决方法：在函数前面加上new）

第二，每个对象都有一套自己的函数，这样浪费了资源（解决方法：用原型）♥

 

 

 

 

 

 

 

---

下面是另一种写法，不用new对象和return对象【解决了第一个问题】

 1 function createPerson(name,gender){ //构造函数，用于构造对象
 2 //    var this=new Object(); 系统默认new了一个
 3     this.name=name;         //都换成this
 4     this.gender=gender;
 5     this.showName= function () {
 6         alert("我叫："+this.name)
 7     };
 8     this.showGender= function () {
 9         alert("我是"+this.gender+"的")
10     };
11 //    return this; 系统默认return了
12 }
13 var person1=new createPerson("syr","女");
14 var person2=new createPerson("xixi","男");
15 person1.showName();
16 person1.showGender();
17 person2.showName();
18 person2.showGender();

 

---

 最后这种方法，也称作混合法创建对象（构造函数+原型）【解决了第二个问题】

//混合法创建对象
function CreatePerson(name,gender){
    //在构造函数中添加了属性：每个对象都各不相同;构造函数首字母大写;
    this.name=name;
    this.gender=gender;
}
    //在原型中添加了方法：每个对象都一样
    CreatePerson.prototype.showName=function(){//createPerson就是类，也是构造函数
            alert("我叫："+this.name)
    };
    CreatePerson.prototype.showGender=function(){
        alert("我叫："+this.gender)
    };

var person1=new CreatePerson("syr","女");
var person2=new CreatePerson("xixi","男");
person1.showName();
person1.showGender();
person2.showName();
person2.showGender();

至此，之前傻兮兮的工厂方式变身成简洁明快的混合式，可喜可贺。