【译】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是没有类的定义的,真是个神奇的语言...

时间: 2024-08-27 06:16:40

【译】3 ways to define a JavaScript class的相关文章

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.

译-2018年该学哪一个JavaScript框架?

首先我要定义一下我心中的代码框架,因为这个词存在争议.我认为框架是一个库(注:个人不太同意这个说法),它定义了每一个方面或层的结构,使创建应用程序的任务变得更容易.从层上说,我指的是数据库.模型.控制器.视图.表现层.网络,等等...... 框架尝试去解决在应用中经常遇到的绝大多数大且已知的问题.它们内置了许多你不需要关心的设计决策,它们同样也有精心制定的指导方针. 好的框架有巧妙的默认值以及遵循约定而不是配置的概念,在这方面做得好的是 Ruby On Rails 框架,同时也是我最喜欢的框架之

[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': 'Dog Food', 'Cost': 22.50}) purchase_2 = pd.Series({'Name': 'Kevyn', 'Item Purchased': 'Kitty Litter', 'Cost': 2.50}) purchase_3 = pd.Series({'Name

[转]大型 JavaScript 应用架构中的模式

目录 1.我是谁,以及我为什么写这个主题 2.可以用140个字概述这篇文章吗? 3.究竟什么是“大型”JavaScript应用程序? 4.让我们回顾一下当前的架构 5.想得长远一些 6.头脑风暴 7.架构提议 7.1 模块化理论 7.2 CommonJS模块 7.3 外观模式 7.4 中介者模式 7.5 应用外观 7.6 核心的抽象 7.7 整合 7.8 超越发布/订阅:自动注册事件 7.9 常见问题 13 August 2013 原文:Patterns For Large-Scale Java

JavaScript Modules

One of the first challenges developers new to JavaScript who are building large applications will have to face is how to go about organizing their code. Most start by embedding hundreds of lines of code between a <script> tag which works but quickly

Top 10 JavaScript traps for a C# developer

Top 10 JavaScript traps for a C# developer 27 May 2014   | .NET · Code · Javascript Tags: .net · C# · javascript If you are an experienced C# developer, coming into JavaScript world for application development, you will end up making few common mista

Native JavaScript Development after Internet Explorer

This article has nothing to do with the decision whether or not to abandon support for oldIE. You and you alone must take that decision based on the specific details of your website or application. With all this being said, let us proceed! 1. JavaScr

Learning JavaScript Design Patterns -- A book by Addy Osmani

Learning JavaScript Design Patterns A book by Addy Osmani Volume 1.6.2 Tweet Copyright © Addy Osmani 2015. Learning JavaScript Design Patterns is released under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 unported license. It

为什么原生 JavaScript 开发越来越多受欢迎?是否应该跟风用原生JavaScript代替 jQuery等库?

本文标签:  jQuery的作用 原生JavaScript优势 jQuery官网 jQuery处理DOM和跨浏览器 JavaScript新特性 互联网杂谈 随着 JavaScript 本身的完善,越来越多的人开始喜欢使用原生 JavaScript 开发代替各种库,其中不少人发出了用原生 JavaScript 代替 jQuery 的声音.这并不是什么坏事,但也不见得就是好事.如果你真的想把 jQuery从前端依赖库中移除掉,我建议你慎重考虑. 首先 jQuery 是一个第三方库.库存在的价值之一在