【原创整理，基于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"