原文

  简书原文: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. C#之用户自定义控件

    一.新建用户自定义控件 如下图所示,想通过LED的点击来实现亮和灭使用去控制下位机. LED亮: LED灭: 首先新建一个用户控件类,如下图所示步骤: 在资源中,添加现有文件中加入图片 加入的图片可以 ...

  2. 【Educational Codeforces Round 36 A】 Garden

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举用哪一个桶就好 [代码] #include <bits/stdc++.h> using namespace std; ...

  3. using the easy connect naming method 简单连接測试

    一直都不明确sqlnet.ora中的NAMES.DIRECTORY_PATH= (TNSNAMES, EZCONNECT)是什么意思.今天看到一篇文档,就是登陆选用的方式.做一个測试: tnsname ...

  4. 在web开发中你不得不注意的安全验证问题#2-XSS

    前言 XSS又叫CSS (Cross Site Script) ,跨站脚本攻击. 恶意攻击者往Web页面里插入恶意html代码.当用户浏览该页之时,嵌入当中Web里面的html代码会被运行,从而达到恶 ...

  5. 如果笔记本的 WIN7 运行很卡,请尝试运行这些批处理

    如果笔记本的 WIN7 运行很卡,请尝试运行这些批处理 WIN7是不是很卡?关掉下列服务吧 @echo off rem AppXSvc 为部署应用商店应用程序提供基础结构支持 rem BITS 微软的 ...

  6. FragMent-通过Arguments方法 跟activity通信

    今天主要学习下通过Arguments,实现activity 给fragment传递数据.这个方法也是通过参数bundle来进行数据传输的 直接看如下代码 一,定义一个fragment,在oncreat ...

  7. [NOI.AC#35]string 缩点+拓扑排序

    链接 因为有交换相邻字母,因此给你字符串就相当于给你了这个字符串的所有排列 把等价的串映射到整数范围,再根据 \(m\) 种魔法连边,缩点后在 DAG 上DP即可 无耻地用了int128 #inclu ...

  8. 4.使用 WSDL 指定的标准 SOAP 消息格式

    转自:https://technet.microsoft.com/zh-cn/sysinternals/x2ccke44(v=vs.94) 为 XML 文档(定义 Web 服务)定义架构的行业标准 W ...

  9. React 和 Vue 对比

    React 和 Vue 有许多相似之处,它们都有:   * 使用 Virtual DOM * 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件. * 将注意力集中保持 ...

  10. 【Codeforces Round #451 (Div. 2) D】Alarm Clock

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 尺取法+二分. 类似滑动窗口. 即左端点为l,右端点为r. 维护a[r]-a[l]+1总是小于等于m的就好. (大于m就右移左端点) ...