三个方法来定义Js类(翻译)

翻译
http://www.phpied.com/3-ways-to-define-a-javascript-class/

3 ways to define a JavaScript class

September 29th, 2006. Tagged: JavaScript
Introduction

JavaScript is a very flexible object-oriented language when it comes to syntax. In this article you can find three ways of defining and instantiating an object. Even if you have already picked your favorite way of doing it, it helps to know some alternatives in order to read other people’s code.
Javascript是一个可以扩展的面向对象的语言。这里介绍了三种方法来定义对象。你可以选择你喜欢的方式,这个帮助你知道一些可以选的方式。

It’s important to note that there are no classes in JavaScript. Functions can be used to somewhat simulate classes, but in general JavaScript is a class-less language. Everything is an object. And when it comes to inheritance, objects inherit from objects, not classes from classes as in the “class”-ical languages.
这个是重要的要知道Javascript是没有类(Class)的。函数能够被使用在某些地方模拟class,但是总体来说Javascript是一个没有class的语言。什么都是对象。并且这个可以继承,对象从对象继承。

  1. Using a function
    This is probably one of the most common ways. You define a normal JavaScript function and then create an object by using the new keyword. To define properties and methods for an object created using function(), you use the this keyword, as seen in the following example.
    使用一个函数
    这个是一个一般的方法,你能定义一个Javascript的函数,然后创建一个对象使用new关键字,来定义属性和方法从对象创建的时候使用function。你使用这个关键字,如下所例。

function Apple (type) {
this.type = type;
this.color = “red”;
this.getInfo = getAppleInfo;
}

// anti-pattern! keep reading…
//反模式
function getAppleInfo() {
return this.color + ’ ’ + this.type + ’ apple’;
}

To instantiate an object using the Apple constructor function, set some properties and call methods you can do the following:
使用了Apple的构造函数,设置一些属性和调用方法如下所示

var apple = new Apple(‘macintosh’);
apple.color = “reddish”;
alert(apple.getInfo());

1.1. Methods defined internally
In the example above you see that the method getInfo() of the Apple “class” was defined in a separate function getAppleInfo(). While this works fine, it has one drawback – you may end up defining a lot of these functions and they are all in the “global namespece”. This means you may have naming conflicts if you (or another library you are using) decide to create another function with the same name. The way to prevent pollution of the global namespace, you can define your methods within the constructor function, like this:
立刻定义方法。在下面的例子中,你看到Apple的类被定义了getInfo。这个运行的不错。你也许被定义了很多这些函数,在全局命名空间下, 这个意味着你可能会有名字冲突,如果你或者别的库是用,决定创建其他函数用相同的名字。这个是一个全局命名空间污染,你定义了一个方法在构造函数中,如下:

function Apple (type) {
this.type = type;
this.color = “red”;
this.getInfo = function() {
return this.color + ’ ’ + this.type + ’ apple’;
};
}

Using this syntax changes nothing in the way you instantiate the object and use its properties and methods.
使用这个表达式的改变你内置了对象使用这个属性和方法。

1.2. Methods added to the prototype
A drawback of 1.1. is that the method getInfo() is recreated every time you create a new object. Sometimes that may be what you want, but it’s rare. A more inexpensive way is to add getInfo() to the prototype of the constructor function.
方法添加到这个原型
1.1的缺点是这个getinfo被重复创建了,当你创建一个新的对象的时候有些时候这个不是你所希望的,但这个发生了。一个比较好的方式是添加getInfo()到构造函数的原型上。如下所示:

function Apple (type) {
this.type = type;
this.color = “red”;
}

Apple.prototype.getInfo = function() {
return this.color + ’ ’ + this.type + ’ apple’;
};
Again, you can use the new objects exactly the same way as in 1. and 1.1.
然后你可以类似于1和1.1一样使用对象

  1. Using object literals
    Literals are shorter way to define objects and arrays in JavaScript. To create an empty object using you can do:
    使用对象 literals
    literals是一个更加简洁的方法来顶一个对象和数组在javscript中。创建一个空对象

var o = {};

instead of the “normal” way:
代替一般的方法
var o = new Object();

For arrays you can do:
对于数组
var a = [];
instead of:
替代为
var a = new Array();

So you can skip the class-like stuff and create an instance (object) immediately. Here’s the same functionality as described in the previous examples, but using object literal syntax this time:
你能够忽略class类似的东西,然后立刻创建一个实例(对象)。这个有相同的函数被描述在先前的例子中,使用对象literal表达式

var apple = {
type: “macintosh”,
color: “red”,
getInfo: function () {
return this.color + ’ ’ + this.type + ’ apple’;
}
}

In this case you don’t need to (and cannot) create an instance of the class, it already exists. So you simply start using this instance.
这个例子中你需要创建一个class的实例,如果这个已经存在了,你就可以开始使用这个实例

apple.color = “reddish”;
alert(apple.getInfo());

Such an object is also sometimes called singleton. In “classical” languages such as Java, singleton means that you can have only one single instance of this class at any time, you cannot create more objects of the same class. In JavaScript (no classes, remember?) this concept makes no sense anymore since all objects are singletons to begin with.
对于一个对象也许有时候叫做单个个体。在传统的语言中比如Java ,singleton 意味着你在任何时候对于一个类有一个单一实例,你不能创建更多的对象在相同的类。在javascipt(没有类,还记得)

  1. Singleton using a function
    Again with the singleton, eh? ��
    Singleton使用函数

The third way presented in this article is a combination of the other two you already saw. You can use a function to define a singleton object. Here’s the syntax:

这个第三方方法在这个文章中是组合前面2种方法。你能使用函数来定义一个singleton对象。

var apple = new function() {
this.type = “macintosh”;
this.color = “red”;
this.getInfo = function () {
return this.color + ’ ’ + this.type + ’ apple’;
};
}

So you see that this is very similar to 1.1. discussed above, but the way to use the object is exactly like in 2.
你能看到的这个非常类似于1.1,讨论在下面,但是这个使用对象非常类似于2

apple.color = “reddish”;
alert(apple.getInfo());

new function(){…} does two things at the same time: define a function (an anonymous constructor function) and invoke it with new. It might look a bit confusing if you’re not used to it and it’s not too common, but hey, it’s an option, when you really want a constructor function that you’ll use only once and there’s no sense of giving it a name.

new function(){…}做了2个事情在这个时候:定义了一个函数(一个匿名构造函数)并且用new调用这个。这个也许有一个迷惑,你没有使用这个,这个太不长江,但是,这个是一个选项,你真的想要一个构造函数,但是你只是使用一次,这里没有给他别的名字

Summary
You saw three (plus one) ways of creating objects in JavaScript. Remember that (despite the article’s title) there’s no such thing as a class in JavaScript. Looking forward to start coding using the new knowledge? Happy JavaScript-ing!

评论:
我觉得你就用第一种方法把,或者为了降低消耗,直接给原型添加一个function,但这里的缺点是可能从工程上来看,比较混乱。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值