原文

  简书原文: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. spring boot 热启动

    spring boot热启动有两种方式 1. 以Maven插件的形式去加载,所以启动时使用通过Maven命令mvn spring-boot:run启动,而通过Application.run方式启动的会 ...

  2. HDU 4107 Gangster

    Gangster Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 4 ...

  3. VC多线程临界区

    在使用多线程时,一般非常少有多个线程全然独立的工作.往往是多个线程同一时候操作一个全局变量来获取程序的执行结果.多个线程同一时候訪问同一个全局变量,假设都是读取操作,则不会出现故障. 假设是写操作,则 ...

  4. 项目EasyUi和JS中遇到的问题总汇

    近期因为项目用到EasyUi,曾经仅仅是听过,可是没有详细用过.仅仅能一边学一边做.如今将做的过程中遇到的一些难点总结例如以下,以备后用: EsayUi使用: Json格式:key:value,key ...

  5. [翻译]魅族的M1 Note是十分廉价(dirt-cheap)的iphone5C增强版

    Meizu's M1 Note is a dirt-cheap iPhone 5c on steroids 魅族的M1 Note是十分廉价(dirt-cheap)的ihone5C增强版 While m ...

  6. 使WordPress改域名后网站正常运行的方法

    使WordPress改域名后网站正常运行的方法 wp-content/wp-config.php $path = '/blog'; $scheme = (isset($_SERVER['HTTPS'] ...

  7. 传输资料在100MB以上的 传输介质选择

    传输资料在100MB以上的 硬盘-->千兆局域网-->硬盘 硬盘-->USB3.0-->硬盘 硬盘-->数据线-->硬盘 传输速率 USB 的理论传输值 USB2. ...

  8. Appium定义接口测试

    1.Appium如何执行 Appium作为一个服务器,python的脚本代码交给Appium服务器,Appium再去与设备交互. desired_cap = {} desired_cap['platf ...

  9. 一种较为隐蔽ConcurrentModificationException情形

    ConcurrentModificationException是遍历过程中修改list而抛出的错误.就像前面分析的,单线程时这种错误主要是因为使用forEach造成:遍历一个拷贝,修改原始list,造 ...

  10. C#string转换为Datetime

    DateTime.ParseExact("0710090000", "MMddHHmmss", CultureInfo.CurrentCulture, Date ...