原文

  简书原文:https://www.jianshu.com/p/6cb1e7b7e379

大纲

  前言
  1、简单方式创建对象的方法
  2、工厂模式创建对象
  3、构造函数模式创建对象
  4、原型模式创建对象
  5、组合使用构造函数模式和原型模式
  6、动态原型模式创建对象
  7、寄生构造函数模式
  8、稳妥构造函数模式
  9、代码资源

前言

  JavaScript是一门基于对象的语言。
  JavaScript本身包含许多对象,这些对象称之为JavaScript的内建对象。
  有些对象(如:person)在JavaScript语言里并不存在。我们可以利用JavaScript语言来创建自己的对象——术语称之为用户定义对象(user-defined object),也就是所谓的创建对象。
  通过创建自定义对象,可以用来弥补很多内建对象无法做到的事情。

1、简单方式创建对象的方法

  虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复代码。

//1.1、利用对象字面量的方式创建对象
var person = {
name: 'kk',
age: 12,
job: 'IT',
say: function () {
console.log('hello' + this.name);
}
}
console.log(person); //1.2、利用new Object的方式创建对象
var person = new Object();
person.name = 'kk';
person.age = 12,
person.job = 'IT',
person.say = function() {
console.log('hello' + this.name);
}
console.log(person);

2、工厂模式创建对象

  工厂模式创建对象的方法是基于基本创建对象的方法上的,是为了解决使用基本创建对象的方法产生大量重复代码的问题而产生的,工厂模式抽象了创建具体对象的过程,通过函数来封装以特定接口创建对象的细节。

function createPerson(name, age, job) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.job = job;
obj.say = function () {
console.log('hello' + this.name);
}
return obj;
} var person = createPerson('kk', 12, 'IT');
console.log(person);

3、构造函数模式创建对象

  构造函数在工厂模式创建对象的基础上弥补了工厂模式创建对象的没有识别对象类型的不足,通过构造函数来识别不同构造函数创建不同对象的类型。

function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.say = function () {
console.log('hello' + this.name);
}
}
var person = new Person('kk', 12, 'IT');
console.log(person);

4、原型模式创建对象

  构造函数创建对象,通过原型添加对象属性和方法。

function Person() {

}
Person.prototype.name = "kk";
Person.prototype.age = 12;
Person.prototype.job = "IT";
Person.prototype.sayName = function () {
console.log(this.name);
}; var person = new Person();
console.log(person);

5、组合使用构造函数模式和原型模式

  构造函数模式用于定义实例属性,而原型模式用于定义方法和共享属性。

function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
}
Person.prototype.sayName = function () {
console.log(this.name);
}
var person = new Person('kk', 12, 'IT');
console.log(person);

6、动态原型模式创建对象

  动态原型模式把所有信息都封装在了构造函数中,而通过在构造函数中初始化原型(仅在必要的情况下),又保持了同时使用构造函数和原型的优点。

function Person(name,age,job){
//属性
this.name = name;
this.age = age;
this.job = job;
//方法
if(typeof this.sayName != "function"){
Person.prototype.sayName = function(){
console.log(this.name);
}
}
}
var person = new Person("kk" , 12, "IT");
console.log(person);

7、寄生构造函数模式

  这种模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象;但从表面上看,这个函数又很像是典型的构造函数。

function Person(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
console.log(this.name);
};
return o;
}
var person = new Person('kk',12,'IT');
console.log(person);

8、稳妥构造函数模式

  所谓稳妥对象,指的是没有公共属性,而且其方法也不可引用this的对象。稳妥对象最适合在一些安全的环境中(这些环境中会禁止使用this和new),或者在防止数据被其他应用程序(如Mashup程序)改动时使用。
  稳妥构造函数遵循与寄生构造函数类似的模式,但有两点不同:一是新创新对象的实例方法不引用this;二是不使用new操作符调用构造函数。

function Person(name,age,job){
//创建要返回的对象
var o = new Object();
o.sayName = function(){
return name;
};
//返回对象
return o;
} var person = new Person('kk',12,'IT');
console.log(person);

9、代码资源

  js代码实例中的createObject.js的文件中包含了本篇博客的代码,创建对象的几种实现方式在其中都有包括,希望能对读者有所帮助。

JavaScript对象的创建的更多相关文章

  1. JavaScript对象的创建之使用json格式定义

    json: javascript simple object notation. json就是js的对象,但是它省去了xml中的标签,而是通过{}来完成对象的说明. 定义对象 var person = ...

  2. JavaScript 对象的创建和操作

    <script>         // 对象是属性的无序集合,每个属性都是一个名/值对. 属性名称是一个字符串.         // 对象种类         // 内置对象(nativ ...

  3. JavaScript对象的创建之基于构造方法+原型方式

    为了解决原型所带来的问题,此处需要通过组合构造方法和原型来实现对象的创建,将属性在构造方法中定义,将方法在原型中定义.这种有效集合了两者的优点,是目前最为常用的一种方式. function Perso ...

  4. javascript 对象的创建与继承模式

    针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 6.1理解对象 创建对象的两个方法(暂时) //第一种,通过创建一个Object ...

  5. JavaScript 对象的创建

    Object类型是JavaScript中使用最多的一种类型.创建Object实例的方式有多种,接下来一一列举. 1. Object构造函数 person1的friends属性修改影响了person2的 ...

  6. JavaScript对象的创建之基于原型方式

    原型内存模型介绍 原型是javascript中非常特殊的一个对象,当一个函数创建之后,会随之就产生一个原型对象. 当通过这个函数的构造函数创建一个具体的对象之后,在这个具体的对象中就会有一个属性指向原 ...

  7. javascript 对象的创建,引用,释放,删除方法

    1.用函数构造 A.声明时同时设置属性和方法 function func(){  this.name = "myname";  this.say = function(){aler ...

  8. javascript对象的创建--相对java 怎样去创建了"类"i以及实例化对象

    由于javascript没有java那么多基本类型,同时也没有提供class这个东西,那么我们想实现javascript的对象创建应该怎么办呢,我简单地从w3c提供的课件中提取了一下几种方法: 一.工 ...

  9. JavaScript 对象的创建和对6种继承模式的理解和遐想

      JS中总共有六种继承模式,包括原型链.借用构造函数.组合继承.原型式继承寄生式继承和寄生组合式继承.为了便于理解记忆,我遐想了一个过程,对6中模式进行了简单的阐述. 很长的一个故事,姑且起个名字叫 ...

随机推荐

  1. 【2017 Multi-University Training Contest - Team 5】Rikka with Graph

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=6090 [Description] 给你n个点; 让你在这n个点上最多连m条无向边; 使得 ∑ni= ...

  2. 关于编译com工程的一些体会

    作者:朱金灿 来源:http://blog.csdn.net/clever101 今天发现com的编译的一个重要一步是微软提供的midl工具将其中的idl文件生成一个头文件.c文件(即IID文件)和代 ...

  3. int android.support.v7.widget.RecyclerView$ViewHolder.mItemViewType' on a null.....

    Android.support.v7.widget.RecyclerView$ViewHolder.mItemViewType' on a null..空指针问题,费劲心思才找到报空指针的原因: 代码 ...

  4. gdbserver 使用方法

    1.分别编译出在宿主机运行的交叉调试器arm-linux-gdb和在目标板上运行的gdbserver: 2.在目标板开启gdbserver#gdbserver  宿主机ip:任意指定端口号 ./待调试 ...

  5. Linux shell command学习笔记(二)

    <cut> 作用:从输入文件或者命令的输出中析取出各种域 用法:cut –c{字符串范围} –d{字段间分割符} –f{字段索引编号} 举例: (1)查看在线用户:who | cut –c ...

  6. 【hdu 1533】Going Home

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=1533 [题意] 一个N*M地图上有相同数量的字符H和字符m,m代表一个 人,H代表一个房子.人到房子的花 ...

  7. 移动mm 话费支付接入过程(ane)

    下面记录移动mm 话费支付接入的过程 1.强联网.弱联网差别.sdk是否有区分?用户体验部分由什么不同和差异? 差别在于强联网是网络通道(wifi/gprs/3g),弱联网是走短信通道,用户层面差异在 ...

  8. upf用到的工具

    emulator          : PXP zebu simulator :

  9. 本文介绍C# BitmapData

    本文介绍C# BitmapData,对于C# BitmapData,虽然BitmapData.Width还是等于Bitmap.Width,但大概是出于显示性能的考虑.   最近要转开发平台,正研究C# ...

  10. 【CS Round #43 C】Rectangle Partition

    [链接]点击打开链接 [题意] 有一辆火车,它的长度为L,然后假设这辆车现在随机可能地出现在0..D之间,然后假设它已经耗光了油. 问你它需要走的期望距离是多少. 这里要走的距离指的是车里最近的加油站 ...