原文

  简书原文: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. 【习题 8-8 UVA - 1612】Guess

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] double千万不要用==判断相等... 而且两个保留2位有效数字的数字x,y 判断它们相等应该这样. int temp1 = ro ...

  2. 洛谷——P1525 关押罪犯

    https://www.luogu.org/problem/show?pid=1525 题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间 ...

  3. 【基础练习】【线性DP】codevs2622 数字序列(最大连续子序列和)题解

    版权信息 转载请注明出处 [ametake版权全部]http://blog.csdn.net/ametake欢迎来看 这道题目本质就是朴素的最大连续子序列和 直接上题目和代码 题目描写叙述 Descr ...

  4. layoutParams-动态更改某个控件的margin

    其实它的方法也非常的简单,如下 LinearLayout.LayoutParams layoutParams = (LayoutParams) bt1.getLayoutParams(); int a ...

  5. css 兼容性前缀

    一.不同浏览器内核下的书写规则 二:transform  具体变性中心基点  transform-origin  默认情况下  rotate旋转.scale缩放.translate位移.矩阵matri ...

  6. Codeforces Round #194 (Div. 2) 部分题解

    http://codeforces.com/contest/334 A题意:1-n^2 平均分成 n 份,每份n个数,且和相同 解法 : 构造矩阵1-n^2的矩阵即可 ][]; int main() ...

  7. HDU4825 Xor Sum(贪心+Trie树)

    Problem Description Zeus 和 Prometheus 做了一个游戏,Prometheus 给 Zeus 一个集合,集合中包含了N个正整数,随后 Prometheus 将向 Zeu ...

  8. android设置Activity背景色为透明的3种方

    方法一:这种方法比较简单,只有一个步骤,只需要在配置文件中把需要设置为透明的activity的样式设置为 Android:theme="@android:style/Theme.Transl ...

  9. IIS7性能优化

    http://www.03389.com/BLOG/user1/qq66565841/archives/2014/2014112143553.html IIS7性能优化 IIS7 优化-网站请求并发数 ...

  10. TTL和RS232之间的详细对比

    [背景] 之前就听过TTL,一直没搞懂其和RS232的区别. 最近,打算去买个USB转RS232的芯片,结果找到此产品: 六合一多功能USB转UART串口模块CP2102 usb TTL485 232 ...