原文

  简书原文: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. 洛谷 P1217 [USACO1.5]回文质数 Prime Palindromes

    P1217 [USACO1.5]回文质数 Prime Palindromes 题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找 ...

  2. wordpress 加速主题的静态资源

    wordpress 加速主题的静态资源(固定的CSS.JS和图片等) wordpress 中用函数 get_stylesheet_directory_uri() 生成当前主题的 URL , 格式如 h ...

  3. js12--块作用域函数作用域

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. C#打印日志的小技巧(转)

    https://www.cnblogs.com/jqg-aliang/p/5234206.html 打印日志的函数 开发中输出日志必不可少,在C#中输出多个不同类型参数的时候,需要连接符累加输出,很是 ...

  5. ASP.NET MVC使用Ninject

    Ninject是一个快如闪电的,轻量级的.....依赖注入框架,呃呃呃,貌似很少用到,Ninject就是一个DI容器,作用是对ASP.NET MVC程序中的组件进行解耦 ,说到解耦其实也有其他的方式可 ...

  6. spring-data-redis 使用

    以前使用过Jedis,后面因项目需要使用spring-data-redis,设置一个键值及其过期时间后怎么都不对. 源代码: redisTemplate.opsForValue().set(key, ...

  7. ES6 数组、对象的扩展

    8. 数组的扩展 扩展运算符(...),将一个数组转为用逗号分隔的参数序列. 复制数组 const a2=[...a1] 合并数组 [...arr1, ...arr2, ...arr3]; arr1. ...

  8. JAVA 水题

    纯粹是让我来掌握熟练度的. 1.金蝉素数 某古寺的一块石碑上依稀刻有一些神秘的自然数. 专家研究发现:这些数是由1,3,5,7,9 这5 个奇数字排列组成的5 位素数,且同时去掉它的最高位与最低位数字 ...

  9. M1卡操作

    M1卡操作时,读取的时候,是将卡里面的1块(占16个字节)数据以十六进制字符的形式读取出来的啊!一个字节占两位16进制,因为读出来是字符.如果放在byte[]数组里,因为一个字符占一个字节,所以要用长 ...

  10. Java基础学习总结(52)——Liunx系统Centos上搭建Java开发环境

    一.安装jdk 1.查看Linux自带的JDK是否已安装 [plain] view plain copy print? java –version 如果出现openjdk,最好还是先卸载掉openjd ...