JavaScript中关于创建对象的笔记
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中使用最广泛,认同最高的一种创建自定义类型的方法。可以说这是用来定义引用类型的一种默认模式。
JavaScript中关于创建对象的笔记的更多相关文章
- 关于JavaScript中的创建对象的学习总结
一.最简单的对象创建方法 在JavaScript中,直接使用Object构造函数或对象字面量都可以很轻易地创建单个对象,缺点是:创建具有同一个接口(标准的OO中的接口概念)的多个对象时,会有大量重复代 ...
- JavaScript中的EcMAScript学习笔记
一.Javascript概述(知道) a.一种基于对象和事件驱动的脚本语言 b.作用: 给页面添加动态效果 c.历史: 原名叫做livescript.W3c组织开发的标准叫ECMAs ...
- JavaScript 中this 初步理解笔记
Javascript中函数中的this通常指向的是函数的拥有者,这个拥有者就是上下文执行对象:另外一点需要注意,this只能在javascript函数内部使用.
- JavaScript 对象 之创建对象 学习笔记
假设我们有这样的一个需求:记录一个人的 名字和年龄,然后有个方法可以显示这个人的名字和年龄. 按照普通的方法,我们的代码应该是这样的: var person1 = new Object() , per ...
- 详解JavaScript中的Object对象
Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是 ...
- Javascript中的Object对象
Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是 ...
- 深入理解JavaScript中创建对象模式的演变(原型)
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
- javascript中创建对象的方式总结
javascript中创建对象的方式总结 具体代码如下: //创建对象的方式: //创建方式一 var person=new Object(); person.name='jack'; person. ...
- 《JavaScript高级程序设计》读书笔记 ---创建对象
虽然Object 构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码.为解决这个问题,人们开始使用工厂模式的一种变体. 工厂模式工厂 ...
随机推荐
- thinkphp的目录结构
├─ThinkPHP.php 框架入口文件 ├─Common 框架公共文件 ├─Conf 框架配置文件 ├─Extend 框架扩展目录 ├─Lang 核心语言包目录 ├─Lib 核心类库目录 │ ├─ ...
- java反射快速入门(一)
本文会从以下几个方面讲起 ① 反射的简单解释 ② java反射的API接口 及 demo ③ 反射的优缺点.应用场景 一.什么是反射? java反射:在程序运行中动态获取类的信息,及动态调用对象的方法 ...
- cocos2d-x 纹理深入研究
转自:http://blog.csdn.net/qq51931373/article/details/9152227 1.纹理控制. 看此代码: CCSprite *pSprite = CCSprit ...
- Xcode repository host is unreachable
遇到这个错误,首先不要急.按照如下方法即可(如果你的svn地址没有问题的话): url要使用域名,所以映射下 1. 修改host:在应用程序里面打开终端(terminal),输入 sudo vi /e ...
- linux中文输入法
rpm方式.在安装盘上已经有各种语言包了.我们仅仅须要找到他们,并安装就能够了. 中文的是 fonts-chinese-3.02-9.6.el5.noarch.rpm fonts-ISO8859-2- ...
- cocos2d-x读取xml(适用于cocos2d-x 2.0以上版本号)
为了能在cocos2d-x的文本标签中显示中文,一个是转换文件编码格式,还有一种就是读取utf-8格式的xml文件.我选择了后者,其原因大家可以去搜索一下cocos2d-x显示中文,希望可以你给答案. ...
- 函数组:FACS(FI/CO接口的FI服务)
这个函数组可以执行与财务相关的各种检查,具体功能请自行发掘. 包含下列函数: ACC_ROUNDING_DIFF_DETERMINEACC_ROUNDING_DIFF_LINEITEMAC_KURSF ...
- Asp.Net 之 汉字转拼音
1.利用微软提供的拼音库,计算出汉字的拼音的方法,此方法支持多音字符 下载 Visual Studio International Pack类库,该类库扩展了.NET Framework对全球化软件开 ...
- Maven学习小结(二 项目构建过程)
1.创建Maven项目 1.1 创建Maven项目的约定目录结构 1.2 编辑pom.xml <project xmlns="http://maven.apache.org/POM/4 ...
- Java基础知识强化之网络编程笔记18:Android网络通信之 使用HttpClient的Post / Get 方式读取网络数据(基于HTTP通信技术)
使用HttpClient进行Get方式通信,通过HttpClient建立网络链接,使用HttpGet方法读取数据,并且通过Response获取Entity返回值. 使用HttpClient进行Post ...