【原创整理，基于JavaScript的创建对象方式的集锦】

以下4种方式，是我在项目中最常见的JavaScript的面向对象的方式的开发。

测试一般在微软的工具：http://www.typescriptlang.org/Playground

进行测试，或者使用Firefox+FireBug 或者 WebStorm

。。。。。。。说了一大堆废话，我现在还是倾向使用typescript进行一般常规项目的开发了。。。。。。。。。。。。。。。。。。。

http://www.typescriptlang.org

1. （我在项目中最常用的）

基于 new 的方式创建

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
}());
var greeter = new Greeter("world");
var button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function () {
    alert(greeter.greet());
};
document.body.appendChild(button);

或者

function UserModel() {
    this.username = '';
    this.pwd = '';
    //return this;
}
var model = new UserModel();
model.username = 'AAAAAAAA';
var button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function () {
    alert(model.username);
};
document.body.appendChild(button);

2. 基于工厂的方式：

function CreateUserModel(user, pwd) {
    var obj = new Object(); //或者 var obj={}; 
    obj.user = user;
    obj.pwd = pwd;
    obj.getNewInstance = function () {
        return CreateUserModel('', '');
    };
    return obj;
}
var model = CreateUserModel('a', 'bb');
var button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function () {
    alert(model.pwd);
};
document.body.appendChild(button);

3.基于动态注册属性的方式

function UserModel() {
}
UserModel.prototype.username = 'aaaaaaaa';
UserModel.prototype.pwd = 'gggggggggggg';


var model = new UserModel();
model.username = 'AAAAAAAA';
var button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function () {
    alert(model.username);
};
document.body.appendChild(button);

4.基于Json的方式

var UserModel={
    username:'',
    pwd:'',
    chids:[],
    id:0,
    
    createNew:function(){
        var obj={};
        //foreach 遍历普通属性
        for(var p in UserModel){
            if ( typeof(UserModel[p])!= "function" ){ 
                var pname=p;
                obj[pname]=UserModel[p];
              }
              
              
        }
    }
};



var model= UserModel;
model.username='BBBBBBBB'
var button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function () {
   alert(model.id);
 };

document.body.appendChild(button);

javascript的强大两个关键词：this  new

简单的说，js里面 所有的数据类型 都是Object派生的。Function类型也不例外。当调用一个funtion的时候，this 指向当前的funtion对象。

new 按照javascript语言精粹中所说，如果在一个函数前面带上new来调用该函数，那么将创建一个隐藏连接到该函数的prototype成员的新对象，同时this将被绑定到那个新对象上。

参考：http://www.cnblogs.com/RitaRichard/archive/2011/10/12/2208902.html

JS 中 new 操作符

按照javascript语言精粹中所说，如果在一个函数前面带上new来调用该函数，那么将创建一个隐藏连接到该函数的prototype成员的新对象，同时this将被绑定到那个新对象上。这个话很抽象，我想用实例来让自己加深理解。

1.如果就一个函数，没有返回值，没有prototype成员，然后使用new,会是什么结果呢？如果一个函数没有返回值，那么如果不使用new来创建变量，那么该变量的值为undefined.如果用了new，那么就是Object.说明一个函数的默认的Prototype是Object.

function Test1(str) {     this.a = str; } var myTest = new Test1("test1"); alert(myTest); //[object Object] function Test1WithoutNew(str) {     this.a = str; } var myTestWithoutNew = Test1WithoutNew("test1"); alert(myTestWithoutNew); //undefined;

2.如果函数有返回值，但是返回值是基本类型。那么new出来的myTest还是object.因为基本类型的prototype还是Object. 而如果不使用new，那么返回值就是string的值。

function Test1(str) {     this.a = str;     return this.a; } var myTest = new Test1("test1"); alert(myTest); //Object  function Test1WithoutNew(str) {     this.a = str;     return this.a; } var myTestWithoutNew = Test1WithoutNew("test1"); alert(myTestWithoutNew); //"test1"

3。如果函数的返回值为new出来的对象，那么myTest的值根据new出来的对象的prototype而定。

function Test1(str) {     this.a = str;     return new String(this.a); } var myTest = new Test1("test1"); alert(myTest); //String "test1"

4。接下来我们开始讨论new中的this。如果我们给Test1的prototype中加入一个方法叫get_string(),那么get_string()中的this指的就是这个新对象。能够得到在new时候赋予该对象的属性值。

var Test2 = function(str) {     this.a = str; }
Test2.prototype.get_string = function () {     return this.a; };
var myTest2 = new Test2("test2"); alert(myTest2.get_string()); //“test2”  var Test2 = function(str) {     this.a = str; }
Test2.prototype.get_string = function () {     return this.a; };
var myTest2 = Test2("test2"); alert(myTest2）//undefined

5。如果我们修改了函数的prototype,又会发生什么样的情况呢？ 那么就会发生类似继承的功能，其实就是js的伪类实现。

function Test1(str) {     this.b = str; } Test1.prototype.Get_Test1String = function () {     return this.b; };
var Test2 = function(str) {     this.a = str; } Test2.prototype = new Test1("test1"); Test2.prototype.get_string = function () {     return this.a; };
var myTest2 = new Test2("test2"); alert(myTest2); //Object alert(myTest2.get_string()); //"test2" alert(myTest2.Get_Test1String()); //"test1"