轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(一)
这一次我们深入的学习一下JavaScript面向对象技术,在学习之前,必要的说明一下一些面向对象的一些术语。
这也是全部面对对象语言所拥有的共同点。有这样几个面向对象术语:
对象
ECMA-262把对象(object)定义为“属性的无序集合,每一个属性存放一个原始值、对象或函数”。
严格来说。这意味
着对象是无特定顺序的值的数组。虽然ECMAScript如此定义对象。但它更通用的定义是基于代码的名词(人、地点或
事物)的表示。
类
每一个对象都由类定义,能够把类看做对象的配方。类不仅要定义对象的接口(interface)(开发人员訪问的属性和方
法),还要定义对象的内部工作(使属性和方法发挥作用的代码)。编译器和解释程序都依据类的说明构建对象。
实例
程序使用类创建对象时,生成的对象叫作类的实例(instance)。对类生成的对象的个数的唯一限制来自于执行
代码的机器的物理内存。每一个实例的行为同样,但实例处理一组独立的数据。由类创建对象实例的过程叫做实例化
(instantiation)。
在前面的章节我们提到过,ECMAScript并没有正式的类。相反。ECMA-262把对象定义描写叙述为对象的配方。这
是 ECMAScript逻辑上的一种折中方案,由于对象定义实际上是对象自身。即使类并不真正存在。我们也把对象定义
叫做类,由于大多数开发人员对此术语更熟悉,并且从功能上说,两者是等价的。
使用提前定义对象仅仅是面向对象语言的能力的一部分,它真正强大之处在于可以创建自己专用的对象。
ECMAScript 拥有非常多创建对象的方法。
一原始方式
由于对象的属性能够在对象创建后动态定义。全部很多开发人员都在JavaScript 最初引入时编写类似以下的代码:
var Car = new Object();
Car.color = "blue";
Car.doors = 4;
Car.mpg = 25;
Car.showColor = function() {
return this.color;
};
document.write(Car.showColor());//输出:blue
在上面的代码中。创建对象Car。然后给它设置几个属性:它的颜色是蓝色,有四个门。每加仑油能够跑 25 英
里。
最后一个属性实际上是指向函数的指针,意味着该属性是个方法。运行这段代码后。就能够使用对象Car。只是
这里有一个问题,就是可能须要创建多个Car的实例。这样就造成了我们会反复很多类似的代码。这样会非常麻烦。
二工厂方式
要解上述的多个类似对象声明的问题,开发人员创造了能创建并返回特定类型的对象的工厂方式。这样的方式就是为
了解决实例化对象产生大量反复的问题。
(1)无參数的工厂方式
比如,函数createCar()可用于封装前面列出的创建Car对象的操作:
function createCar() {
var TempCar = new Object();
TempCar.color = "blue";
TempCar.doors = 4;
TempCar.mpg = 25;
TempCar.showColor = function() {
return this.color;
};
return TempCar;
};
var Car1 = createCar();
var Car2 = createCar();
document.write(Car1.showColor()+"<br/>");//输出:blue
document.write(Car2.showColor());//输出:blue
在这里,第一个样例中的全部代码都包括在createCar()函数中。
此外,另一行额外的代码。返回TempCar 对
象作为函数值。
调用此函数,将创建新对象,并赋予它全部必要的属性,复制出一个我们在前面说明过的Car对象。
因此,通过这样的方法。我们能够非常easy地创建Car对象的两个版本号(Car1和 Car2),它们的属性全然一样。
(2)有參数的工厂方式
我们还能够改动createCar()函数,给它传递各个属性的默认值,而不是简单地赋予属性默认值:
function createCar(Color,Doors,Mpg) {
var TempCar = new Object();
TempCar.color = Color;
TempCar.doors = Doors;
TempCar.mpg = Mpg;
TempCar.showColor = function() {
return this.color;
};
return TempCar;
};
var Car1 = createCar("red",4,23);
var Car2 = createCar("blue",3,25);
document.write(Car1.showColor()+"<br/>");//输出:red
document.write(Car2.showColor());//输出:blue
给createCar()函数加上參数。就可以为要创建的Car对象的color、doors 和mpg属性赋值。
这使两个对象具有同样
的属性,却有不同的属性值。
工厂方式攻克了反复实例化的问题,可是还是有一个问题,那就是前面的样例中,每次调用函数createCar()。都
要创建新函数showColor(),意味着每一个对象都有自己的 showColor() 版本号。而其实,每一个对象都共享同一个函数。
有些开发人员在工厂函数外定义对象的方法,然后通过属性指向该方法,从而避免这个问题:
function showColor() {
return this.color;
};
function createCar(Color,Doors,Mpg) {
var TempCar = new Object();
TempCar.color = Color;
TempCar.doors = Doors;
TempCar.mpg = Mpg;
TempCar.showColor = showColor;
return TempCar;
};
var Car1 = createCar("red",4,23);
var Car2 = createCar("blue",3,25);
document.write(Car1.showColor()+"<br/>");//输出:red
document.write(Car2.showColor());//输出:blue
在上面这段重写的代码中,在函数 createCar()之前定义了函数 showColor()。在createCar()内部,赋予对象一个
指向已经存在的 showColor() 函数的指针。从功能上讲,这样攻克了反复创建函数对象的问题;可是从语义上讲。该
函数不太像是对象的方法。全部这些问题都引发了开发人员定义的构造函数的出现。
三构造函数方式
创建构造函数就像创建工厂方式的函数一样easy。第一步选择构造函数的名字。依据惯例。这个名字的首字母大
写,以使它与首字母一般是小写的变量名分开。
除了这点不同,构造函数看起来非常像工厂方式的函数。请看以下的例
子:
function Car(Color,Doors,Mpg) {
this.color = Color;
this.doors = Doors;
this.mpg = Mpg;
this.showColor = function() {
return this.color;
};
};
var Car1 = new Car("red",4,23);
var Car2 = new Car("blue",3,25);
document.write(Car1.showColor()+"<br/>");//输出:red
document.write(Car2.showColor());//输出:blue
以下为您解释上面的代码与工厂方式的区别。
首先在构造函数内没有创建对象。而是使用thiskeyword。使用new运
算符构造函数时。在运行第一行代码前先创建一个对象,仅仅实用this才干訪问该对象。然后能够直接赋予this属性。默
认情况下是构造函数的返回值(不必明白使用 return 运算符)。如今。用new运算符和对象名Car创建对象,就更像
ECMAScript 中一般对象的创建方式了。
就像工厂方式的函数,构造函数会反复生成函数。为每一个对象都创建独立的函数版本号。只是,与工厂方式的函数
相似,也能够用外部函数重写构造函数,相同地。这么做语义上无不论什么意义。这正是以下要讲的原型方式的优势所
在。
在下篇博客会具体的分析面向对象的原型方式以及其它综合的方式。
轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(一)的更多相关文章
- JavaScript学习总结(十二)——JavaScript编写类
在工作中经常用到JavaScript,今天总结一下JavaScript编写类的几种写法以及这几种写法的优缺点,关于JavaScript编写类的方式,在网上看到很多,而且每个人的写法都不太一样,经常看到 ...
- 从头开始学JavaScript (十二)——Array类型
原文:从头开始学JavaScript (十二)--Array类型 一.数组的创建 注:ECMAscript数组的每一项都可以保存任何类型的数据 1.1Array构造函数 var colors = ne ...
- python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL
python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL实战例子:使用pyspider匹配输出带.html结尾的URL:@config(a ...
- Go语言学习笔记十二: 范围(Range)
Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...
- Tensorflow深度学习之十二:基础图像处理之二
Tensorflow深度学习之十二:基础图像处理之二 from:https://blog.csdn.net/davincil/article/details/76598474 首先放出原始图像: ...
- 轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(二)
四原型方式 我们创建的每一个函数都有一个通过prototype(原型)属性.这个属性是一个对象,它的用途是包括能够由特定类型 的全部实例共享的属性和方法. 逻辑上能够这么理解:prototypt通过条 ...
- JavaScript学习总结(十四)——JavaScript编写类的扩展方法
在JavaScript中可以使用类的prototype属性来扩展类的属性和方法,在实际开发当中,当JavaScript内置的那些类所提供的动态 ...
- Python学习(十二) —— 面向对象
一.初识面向对象 面向过程的核心是过程,流水线思维,过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理什么东西. 优点:极大地降低了写程序的复杂度,只需要顺着要执行的 ...
- java jvm学习笔记十二(访问控制器的栈校验机制)
欢迎装载请说明出处:http://blog.csdn.net/yfqnihao 本节源码:http://download.csdn.net/detail/yfqnihao/4863854 这一节,我们 ...
- 【mongodb系统学习之十二】mongodb修改数据(一)
十二.mongodb修改数据:update 1).修改数据库数据:update:语法 db.collectionName.update({},{},boolean,boolean): 2).updat ...
随机推荐
- luogu3366 【模板】 最小生成树 Prim
题目大意 给出一个无向图,求出最小生成树,如果该图不连通,则输出orz. 概念 对于一个无向图,要求选出一些边,使得图上的每一个节点互相连通,且边权和最小.选出的边与节点形成的子图必然是颗树,这棵树叫 ...
- android监听虚拟按键的显示与隐藏【转】
本文转载自:http://blog.csdn.net/u014583590/article/details/55263141 虚拟按键在华为手机中大量存在,而虚拟按键的存在无疑增加了屏幕适配的难度,往 ...
- 【Codeforces 258B】 Sort the Array
[题目链接] http://codeforces.com/contest/451/problem/B [算法] 模拟 在序列中找到一段单调递增的子序列,将这段序列反转,然后判断序列是否变得单调递增,即 ...
- Node.js:文件系统
ylbtech-Node.js:文件系统 1.返回顶部 1. Node.js 文件系统 Node.js 提供一组类似 UNIX(POSIX)标准的文件操作API. Node 导入文件系统模块(fs)语 ...
- canvas的自动画图
<!DOCTYPE HTML><html><body> <canvas id="myCanvas" width="200&quo ...
- VMware 安装LINUX系统(一)
我用的是WORKSTATION 15 PRO https://www.vmware.com/asean/products/workstation-pro/ 1.安装LINUX 打开Vmware,点击创 ...
- SwiftUI 官方教程(六)
6. 在列表和详情之间设置导航 虽然列表已经能显示了,但是我们还不能通过点击单个地标来查看地标详情页面.SwiftUI教程 把 list 嵌入一个 NavigationView 中,并把每个 row ...
- 一个 passive 引发的bug
不是什么很难的东西,权且做个记录. 首先说下背景,目前的项目中,需要同时绑定 wheel 和 scroll 事件. 绑定 wheel,目的是开发 ctrl + wheel 缩放页面功能,此功能与浏览器 ...
- A - George and Accommodation
Problem description George has recently entered the BSUCP (Berland State University for Cool Program ...
- weborm aspx开发基础
ASP.NET - .net开发网站应用程序的技术总称,来源于 ASP 两种方法技术—WebForm: MVC:java用 十二个表单元素: 文本框<input type="text& ...