1,最基本的两种创建对象的方式:构造函数|| 字面量

构造函数:

var person = new Object();
person.name = "chen1zee1";
person.age = 18;

字面量:

 var person = { name: "chen1zee1", age: 18, }

  • 缺点:使用,构造函数和字面量创建很多对象时,会产生大量重复的代码。为解决此问题,人们开始使用工厂模式

2,工厂模式

工厂模式抽象了创建具体对象的过程,并封装成函数,这样只要执行对应函数即能创建对象。但由于ECMAScript中无法创建类,开发者发明了一种函数,用来封装以特定接口创对象的细节。例:

function createPerson (name){var o = new Object();o.name = name;return o;
}
var person = createPerson("chen1zee1");

3,构造函数模式

ECMAScript 中,构造函数能用来创建特定类型的对象,也同样可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。例:

function Person(name){this.name = name;
}
var person = new Person("chen1zee1");

  • 构造函数与工厂模式的区别:1,没有显式创建对象,2直接将属性和方法赋给this对象,3无需return。
  • 此外,按照惯例:自定义构造函数应以一个大字字母开头,以区别其他函数。
  • 同时注意,通过构造函数创建一个对象,必须使用new 操作符。

构造函数存在的问题:使用构造函数时,每个方法都要在每个实例中创建一遍。例如:

function Person(name){this.name = name;this.sayName = function(){alert(this.name);}
}

每当条用此构造函数时,都会创建一个方法sayName,而事实上,我们并不需要特意给每个对象均设置一个sayName方法,因为不同实例其sayName功能是一样的。

4,原型模式

  • 为解决构造函数创建实例时,重复创建不必要的方法。我们利用到了函数的prototype(原型)属性。
  • 我们创建的每一个函数都有一个prototype(原型)属性,它是一个指针,指向函数的原型对象。而此原型对象包含着该构造函数的所有属性和方法,并供构造函数所创建的对象所共用。

举个例子:原型对象就像是一个菜谱,而构造函数就是做菜这个行为,而实例就是我们通过看菜谱,做出来的菜式。

菜谱(原型对象)里包含了所有做菜(构造函数)所需的材料(实例属性),方法,如(煎炒闷煮)等,而我们通过菜谱所做出来的菜式里面的一切材料,做得方法(煎炒闷煮),都能在菜谱中找出来。

这样说吧,原型对象是一个干细胞,而实例就是该干细胞分裂出来的子细胞,所含的东西是一样的。当然,子细胞会发生基因的突变(实例改变自身的属性和方法,则会表现自身的属性与方法,当无定义时再在原型中克隆。也可以理解为,实例有的就是实例的,实例没有的就找父辈那里找),表现出于干细胞(原型)不同的一面。

  • 使用原型的好处,是可以让所有对象实例共享它所包含的属性和方法。也就是说,我们不必在构造函数中定义对象实例的信息,(也就是一些同功能的函数,例如上边的sayName(),可以不定义,让后让实例从原型那里找到,并调用),而是可以将这些信息添加到原型,供所有的实例使用。从而优化了运行。

例:

function Person (name){Person.prototype.name = name;Person.prototype.sayName = function(){alert(this.name);};
}

5,理解原型对象

只要我们创建了函数,就会根据一组特定规则为该对象创建创建一个prototype属性。这个属性指向函数的原型对象 Fn Prototype。

而原型对象会自动获得一个constructor属性,指向构造函数本身。

创建了自定义的构造函数自后,其原型对象默认只会取得constructor属性,而其他方法是从Object继承而来的。

当调用构造函数创建一个新实例后,该实例的内部将包含一个指针__prototype__(有兼容性问题),指向构造函数的原型对象。

下图以 Person 为例,展示构造函数,原型对象,实例之间的关系:

当然,因为这几个相关的属性(prototype)本质都为指针,可修改其指向达到一定的目的。

  • 原型模式的缺点:原型中所有属性是被很多实例共享的。而当原型中有引用类型值的属性时,例如:数组[]
  • 则会使得所有实例拥有同一个引用对象,大多数情况下我们肯定是不希望如此的。例如:
function Person (name){Person.prototype.name = name;Person.prototype.friends = ["dorlin","lily"];
}
var person1 = new Person("chen1zee1");
person1.friends.push("jack");
var person2 = new Person("jack");
person2.friends.push("chen1zee1");

上式的结果为,person1和person2的friends 都为["dorlin","lily","jack","chen1zee1"]。

6,组合使用构造函数模式和原型模式

我们可以取两者的优点,构造函数定义实例的属性,让它具有自己的特性,而原型模式定义方法还有共享的特性。譬如sayName()函数,还有诸如person 都在class_1 时,, 可以定义Person.prototype.class = "class_1";例:

function Person(name){this.name = name;
}
Person.prototype.sayName = function(){alert(this.name)};
Person.prototype.class = "class_1";

  • 这种构造函数与原型混用的方式,是目前ECMAScript中使用最广泛,认同最高的一种创建自定义类型的方法。可以说这是用来定义引用类型的一种默认模式。

转载于:https://www.cnblogs.com/chen1zee1/p/javascript_prototype_constructor_object.html

JavaScript中关于创建对象的笔记相关推荐

  1. Javascript第六章JavaScript中构造器创建对象第二课

    Javascript第六章JavaScript用new创建对象第一课 https://blog.csdn.net/qq_30225725/article/details/89304586 Javasc ...

  2. JavaScript中的对象学习笔记(属性操作)

    本文是笔者学习JavaScript时做的笔记,大部分内容来自<JavaScript权威指南>,记录学习中的重点,并引入一些其他博文和与其他程序员讨论的内容,供本人日常翻阅.如有疑问,请留言 ...

  3. 详解Javascript中的Object对象

    本文地址:http://luopq.com/2016/02/28/Object-in-Javascript/,转载请注明 Object是在javascript中一个被我们经常使用的类型,而且JS中的所 ...

  4. Javascript第六章JavaScript用new创建对象第一课

    Javascript第六章JavaScript用new创建对象第一课 https://blog.csdn.net/qq_30225725/article/details/89304586 Javasc ...

  5. JavaScript之面向对象与原型笔记整理--------创建对象之原型(2)

    4.原型 每个函数都有一个prototype属性,这个属性是一个对象,用途是包含可以由特定类型的所有实例共享的属性和方法. 逻辑上可以这么理解:prototype通过调用构造函数而创建的那个对象的原型 ...

  6. JavaScript学习笔记06【高级——JavaScript中的事件】

    w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...

  7. javascript中对象、JSON格式数据、创建对象的方式、数据类型分类及特点

    对象 对象指:具体的一个实物,javascript中对象是指一组没有顺序的属性和方法的集合,所有的事物都是对象,例如:函数,数组,字符串等.属性指事物的特征,一般为名词表示:方法指对象的行为,一般用动 ...

  8. javascript中原型模式创建对象特点分析

    在javascript中,我们创建的每个函数都有一个prototype(原型)属性.这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.使用原型对象的好处 ...

  9. html5学习笔记---05.JavaScript 中的面向对象,继承和封装

    05.JavaScript 中的面向对象 a.创梦技术qq交流群:CreDream:251572072 a.JavaScript 是一种基于对象的语言   类:JavaScript 对象很抽象,所以下 ...

最新文章

  1. ASP。NET 中SQL防注入攻击
  2. 计算机学院大学生程序设计竞赛(2015’11)1007 油菜花王国
  3. 解一元二次方程的C++实现
  4. scanf 接收 空格 输入_【C语言】- printf 和scanf 函数详解!
  5. python 给word添加背景图片_Python如何使用word文档插入图片和表格
  6. Java json序列化库gson(2)
  7. 谷歌已推送 Android Q Beta 1
  8. 【Elasticsearch】数据预加载
  9. am最新版安装包_am软件下载-am剪辑软件(alight motion)中文版下载v2.3.1-11玩家网
  10. [转]5个有趣的Python小知识,返回结果让人出乎意料~
  11. nodejs操作mysql查询返回的数据_nodejs连接mysql进行数据库查询返回前台数据的坑...
  12. 又一种页面之间传值方式
  13. C语言小知识——uthash使用
  14. 【203】SSL证书常见格式转换
  15. 史玉柱自述营销心得:降价就是自杀
  16. RGB三通道图像和灰度值简单理解
  17. android 转码工具下载,m3u8视频转码工具
  18. 易飞8无销售报价的BOM成本参考
  19. 文件系统 fsck和e2fsck使用-小白实操记录
  20. R语言使用多个数据类型不同的向量数据创建一个dataframe数据对象

热门文章

  1. java中对时间的操作
  2. eigrp hello报文格式
  3. flash位图技术研究篇(8):扫描像素点
  4. 发财指南-----------------86400/天
  5. SQL Server中以独占的方式操作表
  6. Vue中的三种Watcher
  7. mysql 表名通配符导出,mysqldump只有某些前缀/ Mysqldump通配符的表?
  8. JavaWeb中集成UEditor
  9. homebrew mac_借助Homebrew使从Mac到Linux的转换更加容易
  10. 软件交互性友好性_您应该知道的8个环境友好的开放软件项目