【译】3 ways to define a JavaScript class
本文真没啥难点,我就是为了检验我英语水平退化了没哈哈虽然我英语本来就渣翻译起来也像大白话。将原文看了一遍也码完翻译了一遍差不多一个小时,其中批注部分是自己的理解如有疏漏或误解还请指出感激不尽呐,比如JavaScript中对于单例的理解感觉定义有些模糊啊。
翻译自斯托扬·斯蒂凡诺夫的原文链接:http://www.phpied.com/3-ways-to-define-a-javascript-class/
引言
当涉及到语法时JavaScript是一个非常灵活的面向对象语言。这篇文章你可以找到三种方式定义和实例化一个对象。即使你已经用了某个你喜欢的方式,下面的介绍帮助你去了解一些别的方式有助于你阅读别人的代码。
需要注意的是在JavaScript中没有类的概念,但是通过 Function 可以模拟类,JavaScript中基本一切事物皆对象,在继承方面,对象继承对象而不是类继承类。
1.使用 function
这可能是最通用的一种方法了,定义一个JavaScript function然后通过 new 关键字创建一个实例对象,通过这个function, this 关键字来给这个实例对象添加属性和方法。下面是一个例子。
function Apple (type) {
this.type = type;
this.color = "red";
this.getInfo = getAppleInfo;
} // anti-pattern!(反模式) keep reading...
function getAppleInfo() {
return this.color + ' ' + this.type + ' apple';
}
这个对象实例的创建需要用Apple构造器函数,添加一些属性然后调用一些方法,请继续看:
var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());
1.1.方法定义在内部
在上面例子中我们看到Apple"类"的getInfo方法分隔出来被定义为 function getAppleInfo() 。这样看起来工作的很好,但有一个弊端——你可能会在最后定义许多类型这样的functions,它们都在"全局命名空间"。这意味着当你用相同的名字创建另一个function(或者使用了其他的库)会产生命名冲突。为了防止这种现象,你可以将方法定义在构造器函数内部,就像这样:
function Apple (type){
this.type = type;
this.color = "red";
this.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
}
}
这种语法创建实例和之前的并没什么区别。
1.2.方法被添加在原型属性上
1.1的方式中仍然存在弊端,在每一次创建新实例的时候 getInfo() 方法会被每次都添加到实例对象上。有时这可能不是你想要的,一个有效的方法添加 getInfo() 就是将其定义在构造函数的原型属性上。
function Apple (type) {
this.type = type;
this.color = "red";
} Apple.prototype.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
可以与1.和1.1相同的方式使用。
2.使用对象自面量
在JavaScript中对象字面量是一个快速精简的方式去定义一个对象实例或数组实例,为了创建一个空对象你可以:
var o = {};
来代替通用的方法:
var o = new Object();
创建数组实例你可以:
var a = [];
来代替:
var a = new Array();
这样的方式你可以跳过类从而立即创建实例(object)。下面仍用先前的例子描述,这次用对象字面量的语法:
var apple = {
type: "macintosh",
color: "red",
getInfo: function () {
return this.color + ' ' + this.type + ' apple';
}
}
这种方式你不必通过类创建一个实例,因为这个实例对象已经存在了,你只需要使用它就好:
apple.color = "reddish";
alert(apple.getInfo());
这种实例有时被叫做单例,在一些典型的语言比如Java,单例意味着对于某个类任何时候你只能有一个单一的实例,你不能从相同的类中创建更多实例对象。但在JavaScript中这个概念是没有意义的因为所有的对象都是从单例开始的(批注:JavaScript中最大的原生对象就是Object,它既是对象也是构造函数,它只有一个,其他原生对象Function,Array等也是,所以JavaScript实现的是单例继承了单例?? ,任何时候都可以创建一个自面量对象)。
3.在函数中使用单例
第三种方式是前两种方式的结合,你可以使用函数来定义一个单例对象,这是语法:
var apple = new function() {
this.type = "macintosh";
this.color = "red";
this.getInfo = function () {
return this.color + ' ' + this.type + ' apple';
}
}
这定义和1.1非常相似,在使用实例对象上和2相似。
apple.color = "reddish";
alert(apple.getInfo());
new function(){...} 做了两件事:定义了一个函数(匿名构造器)并使用 new 调用它。这可能看起来有点迷惑如果你之前没怎么用过的话,但是这是一个很好的选择,当你真的需要一个构造函数而又只使用一次并且又不用给它赋名时。(批注:这种方式好像看起来好简洁,因为给单例指定了类型,记得《高程》里给单例指定类型叫“增强的模块模式”,对于此例的话用法如下:
var apple = function (){
var obj = new Apple();
return obj;
}();
)
总结
通过上面三种方式创建实例对象,JavaScript是没有类的定义的,真是个神奇的语言...
【译】3 ways to define a JavaScript class的更多相关文章
- 【译】10个机器学习的JavaScript示例
原文地址:10 Machine Learning Examples in JavaScript 在过去的每一年,用于机器学习(Machine Learning)的库在变得越来越快和易用.一直以来Pyt ...
- 【译】你应该了解的JavaScript数组方法
让我们来做一个大胆的声明:for循环通常是无用的,而且还导致代码难以理解.当涉及迭代数组.查找元素.或对其排序或者你想到的任何东西,都可能有一个你可以使用的数组方法. 然而,尽管这些方法很有用,但是其 ...
- [Python Cookbook] Pandas: 3 Ways to define a DataFrame
Using Series (Row-Wise) import pandas as pd purchase_1 = pd.Series({'Name': 'Chris', 'Item Purchased ...
- correct ways to define variables in python
http://stackoverflow.com/questions/9056957/correct-way-to-define-class-variables-in-python later say ...
- 大型 JavaScript 应用架构中的模式
原文:Patterns For Large-Scale JavaScript Application Architecture by @Addy Osmani 今天我们要讨论大型 JavaScript ...
- [转]大型 JavaScript 应用架构中的模式
目录 1.我是谁,以及我为什么写这个主题 2.可以用140个字概述这篇文章吗? 3.究竟什么是“大型”JavaScript应用程序? 4.让我们回顾一下当前的架构 5.想得长远一些 6.头脑风暴 7. ...
- JavaScript Modules
One of the first challenges developers new to JavaScript who are building large applications will ha ...
- Top JavaScript Frameworks, Libraries & Tools and When to Use Them
It seems almost every other week there is a new JavaScript library taking the web community by storm ...
- 深入了解Javascript模块化编程
本文译自Ben Cherry的<JavaScript Module Pattern: In-Depth>.虽然个人不太认同js中私有变量存在的必要性,但是本文非常全面地介绍了Javascr ...
随机推荐
- 教您如何在Word的mathtype加载项中修改章节号
在MathType数学公式编辑器中,公式编号共有五部分内容:分别是章编号(Chapter Number).节编号(Section Number).公式编号(Equation Number).括号(En ...
- POJ 1426 Find The Multiple(背包方案统计)
Description Given a positive integer n, write a program to find out a nonzero multiple m of n whose ...
- chrome JS 总结
1. chrome 的 console 中不能添加本地文件 2. 下面的代码是在亚马逊的商品页面上添加一个 image, 点击之后触发 alert 函数. 其中 cBoxInner 是人工寻找到的标签 ...
- swift - UIImageView 的使用
1.创建 var imageView = UIImageView()//初始化 2.图片的显示及图片的改变 imageView = UIImageView(image: UIImage(named: ...
- 转:Android文件操作总结
http://www.cnblogs.com/devinzhang/archive/2012/01/19/2327597.html http://blog.sina.com.cn/s/blog_5a4 ...
- jQuery 选择器实例
语法 描述 $(this) 当前 HTML 元素 $("p") 所有 <p> 元素 $("p.intro") 所有 class="intr ...
- Python 中文乱码
1.首行添加 # -*- coding:gb2312 -*- # -*- coding:utf-8 -*- 2.PyCharm设置 在File->setting->File Encodin ...
- Unity3D自己常用代码
常需要,常查找! 自己记录下! 1. var ray = Camera.main.ScreenPointToRay(Input.mousePosition); //GameObject.CreateP ...
- php 升级后 htmlspecialchars 返回空 的解决方案
今天将php版本升级到5.3.0以上(我升级到php5.4.13)的版本后发现一个问题 htmlspecialchars 函数返回为空.查了资料后,发现新版本对htmlspecialchars这个函数 ...
- thinkphp5 Windows下用Composer引入官方GitHub扩展包
很多新手,比如说我,写代码就是在windows下,所以总会遇到很多不方便的地方,比如说GitHub上面的代码更新了,要是你在linux,只要几行命令就可以搞定更新了,在windows下面,你需要用到C ...