1、标准创建对象模式

 var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function(){alert(this.name);};

2、字面量模式

 var person = {
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName: function(){alert(this.name);}
};

3、工厂模式

 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("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

4、构造函数模式

 function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){alert(this.name);};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

5、原型模式

 function Person(){}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){alert(this.name);};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true

6、组合构造函数和原型模式

 function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor : Person,
sayName : function(){alert(this.name);}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

7、动态原型模式(这里只在 sayName()方法不存在的情况下,才会将它添加到原型中。)

 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 friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

8、寄生构造函数模式(除了使用 new 操作符并把使用的包装函数叫做构造函数之外,这个模式跟工厂模式其实是一模一样的。)

 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 friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

9、稳妥构造函数模式(一是新创建对象的实例方法不引用 this;二是不使用 new 操作符调用构造函数)

function Person(name, age, job){
var o = new Object();
o.sayName = function(){alert(name);};
return o;
}
var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

JavaScript对象创建的九种方式的更多相关文章

  1. JavaScript对象创建的几种方式

    1 工厂模式 1.1 创建 function createFruit(name,colors) { var o = new Object(); o.name = name; o.colors = co ...

  2. JS对象创建的几种方式整理

    ​ 本文主要介绍了JS对象创建的几种方式 第一种:Object构造函数创建 var Person = new Object(); Person.name = 'Nike'; Person.age = ...

  3. 对JS关于对象创建的几种方式的整理

    最近一直在看JS高级程序设计这本书,有空来梳理一下几种创建对象的方式.话不多说,直接步入正题. 第一种:Object构造函数创建 var Person = new Object();Person.na ...

  4. 于Unity3D动态创建对象和创建Prefab三种方式的原型对象

    于Unity3D动态创建对象和创建Prefab三种方式的原型对象 u3d在动态创建的对象,需要使用prefab 和创建时 MonoBehaviour.Instantiate( GameObject o ...

  5. 并发编程 ~~~ 多进程~~~进程创建的两种方式, 进程pid, 验证进程之间的空间隔离, 进程对象join方法, 进程对象其他属性

    一 进程创建的两种方式 from multiprocessing import Process import time def task(name): print(f'{name} is runnin ...

  6. Javascript判断数据类型的五种方式及其特殊性

    Javascript判断数据类型的五种方式及区别 @ 目录 typeof instanceof Object.prototype.toString isArray iisNaN ----------- ...

  7. JavaScript声明全局变量的三种方式

    JavaScript声明全局变量的三种方式   JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为 ...

  8. javascript中创建对象的几种方式

    1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的值. var person = new Object(); person.name=&q ...

  9. JavaScript事件处理程序的3种方式

    最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...

随机推荐

  1. oracle 中的null与''

    1.先看看Null与''在oracle中的表现 C:\Users\zen>sqlplus hr/hr SQL Production :: Copyright (c) , , Oracle. Al ...

  2. HttpClient向后端的WebAPI工程发送HTTP的Post请求时,返回超过了最大请求长度的异常的解决方法

    文章中的内容以及解决思路参考(转载)的 http://www.jb51.net/article/88698.htm 在WPF项目中通过HttpClient向后端的WebAPI工程发送HTTP的Post ...

  3. sublime 常用快捷键(转)

    Sublime text 3是码农最喜欢的代码编辑器,每天和代码打交道,必先利其器,掌握基本的代码编辑器的快捷键,能让你打码更有效率.刚开始可能有些生疏,只要花一两个星期坚持使用并熟悉这些常用的快捷键 ...

  4. JVM(一):Java内存区域与内存溢出异常

    一.运行时数据区 共分为5块: 程序计数器      (线程私有,当前线程所执行的字节码的行号指示器) Java虚拟机栈  (线程私有,证明周期与线程相同,描述的是Java方法执行的内存模型,每个方法 ...

  5. spring mvc <mvc;resources>

    spring mvc 的<mvc;resources mapping="***" location="***">标签是在spring3.0.4出现的 ...

  6. Spring @Autowired使用介绍

    参考博客: https://blog.csdn.net/u013412772/article/details/73741710 引用文章地址: https://my.oschina.net/Helio ...

  7. LeetCode Add Binary 两个二进制数相加

    class Solution { public: string addBinary(string a, string b) { if(a==""&&b==" ...

  8. 为什么表单中post接受数据是获取name值而不是id值

    感谢解惑者:http://blog.csdn.net/u013451157/article/details/78503831 表单(form)的控件名,提交的数据都用控件的name而不是id来控制.  ...

  9. 站点安全预警,建议大家多重禁止load_file函数!

    比如在你的linux机器上运行 select load_file(0x2F6574632F706173737764); 看看结果是什么?这应该不是我们希望看到的. 所以我们禁用这个函数吧. 这个主要通 ...

  10. Hybrid App开发之css样式使用

    前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...