`
robinqu
  • 浏览: 88872 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

JavaScript Class模拟基础

阅读更多
Simulating Classes in JavaScript

目前,用js来模拟class是一件非常麻烦的事情,多少有点不优雅。
但是未来的JS肯定会支持class,那么这个语言就是基于class和Prototype的混合继承?到时候会不会越来越混乱呢?笑……


Instance Properties
实例属性
引用
By default, any object property in JavaScript is an instance property.

对象的属性默认状态就是“实例属性”

Instance Methods
实例方法
引用
In JavaScript, an instance method for a class is defined by setting a property in the constructor's prototype object to a function value.

In Java and C++, the scope of instance methods includes the this object.

return width * height;
In JavaScript, however, you've seen that you must explicitly specify the this keyword for these properties:

return this.width * this.height;

If you find it awkward to have to prefix each instance field with this, you can use the with statement (covered in Section 6.18.) in each of your methods.

Rectangle.prototype.area = function( ) {
    with(this) {
        return width*height;
    }
}


在对象的Prototype对象中顶一个包含方法的属性就可以实现“对象的实例方法”

再诸如Java、C++之类的语言中,实例方法的作用域中包含当前对象,而JavaScript不包括。
所以你要在实例方法中引用实例属性的话就要时刻加上this:

return this.width * this.height;


Class Properties
类属性,也就是在JAVA中由static修饰的变量,是通过定义构造函数对象的内置属性来实现的。
Rectangle.UNIT = new Rectangle(1,1);


Class Methods
类方法,与类属性的实现方式一致

Private Members
私有成员
引用
JavaScript can simulate this using closures (an advanced topic, covered in Section 8.8.), but to do so, the accessor methods must be stored on each object instance; they cannot be inherited from the prototype object.


实现私有变量就是重头戏了,要用到闭包,而且必须和JAVA中一样,通过getter和setter访问他们。在JS中getter和setter必须保存到每个对象的实例中,是不能继承的(否则属性值不就乱了么)。

function ImmutableRectangle(w, h) {
    // This constructor does not store the width and height properties
    // in the object it initializes.  Instead, it simply defines
    // accessor methods in the object.  These methods are closures and
    // the width and height values are captured in their scope chains.
    this.getWidth = function( ) { return w; }
    this.getHeight = function( ) { return h; }
}

// Note that the class can have regular methods in the prototype object.
ImmutableRectangle.prototype.area = function( ) {
    return this.getWidth( ) * this.getHeight( );
};



上例中,getter是在构造函数中定义的,所以确保了它的唯一性。闭包使外界无法通过任何手段来访问原来的定义的“私有变量”。例子中,构造函数的引用已经消失,垃圾回收会回收它,而定义的嵌套函数getWidth和getHeight却保留对原构造函数的引用(意味着这些返回的函数的作用链域中包含原构造函数的活动对象,自然可以访问到其参数值,w和h)

而且如果你只定义了getter,和java中一样,那么这个私有变量是只读的了,所以是ImmutableRectangle。
分享到:
评论

相关推荐

    在JavaScript中模拟类(class)及类的继承关系_.docx

    在JavaScript中模拟类(class)及类的继承关系_.docx

    JavaScript Class/Object

    JavaScript所谓的类/对象,是模拟的,因为javascript本身不是面向对象的。本文件(含有注释)精简的介绍了javascript类的属性、方法(包挂静态属性和方法)的应用,还有构造函数的实现,以及类的继承。代码很精简,...

    JavaScript三种方法模拟双色球抽奖

    JavaScript三种方法模拟双色球抽奖——使用标记、使用Interval、使用Timeout。 详情请参考博文: JavaScript三种方法模拟双色球抽奖——使用标记、使用Interval、使用Timeout ...

    在JavaScript中模拟类(class)及类的继承关系

    众所周知,JavaScript中没有类,然而我们却可以动手实现一个拥有继承特性的类,所以接下来我们要讨论的便是在JavaScript中模拟类(class)及类的继承关系:

    JavaScript ES6中CLASS的使用详解

    class是es6引入的最重要特性之一。在没有class之前,我们只能通过原型链来模拟类。这篇文章我们将详细的介绍关于ES6中CLASS的使用,有需要的朋友们可以参考借鉴,下面来一起看看吧。

    JavaScript基础和实例代码

    1.8 JavaScript的实现基础 1.8.1 ECMAScript 1.8.2 DOM 1.8.3 BOM 1.9 客户端与服务器端脚本 1.10 JavaScript与JScript、 VBScript 1.11 JavaScript与Java、Java applet 1.12 JavaScript的未来如何 1.13 本章小结 第...

    Class:Class.js - 一种使用 Javascript 创建类的简单方法

    Javascript是一种 面向函数 基于对象的编程语言,尽管他不像C++,Java等这些语言明确声明面向对象的概念,但是由于Javascript的灵活性,他能够模拟实现面向对象编程的思想。Class.js就是为了解决Javascript面向对象...

    JavaScript完全自学宝典 源代码

    roundcorner.css JavaScript使用CSS模拟图片的圆角效果时使用的CSS样式文件。 第13章(\c13) 示例描述:介绍JavaScript与XML。 13.1.xml 表示书籍信息的XML信息。 13.2.js 跨浏览器兼容的XPath实现。 ...

    javascript代码常用大全

    一、验证类 1、数字验证内 1.1 整数 1.2 大于0的整数 (用于传来的ID的验证) ...object classid=>相关类,如播放器,flash与脚本互动等 16, 刷新/模拟无刷新 异步调用类(XMLHttp或iframe,frame)

    源文件程序天下JAVASCRIPT实例自学手册

    1.8 JavaScript的实现基础 1.8.1 ECMAScript 1.8.2 DOM 1.8.3 BOM 1.9 客户端与服务器端脚本 1.10 JavaScript与JScript、 VBScript 1.11 JavaScript与Java、Java applet 1.12 JavaScript的未来如何 1.13 本章小结 第...

    JavaScript中利用构造器函数模拟类的方法

    你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统的构造器函数来模拟类,因为这样可以给人一种你是个 JavaScript 老手的错觉,哈哈! 什么是构造器函数?构造器函数是编写对象的方法之一。一般情况下...

    JavaScript碎片—函数闭包(模拟面向对象)

    由于JavaScript中的每一个function都会形成一个作用域,而如果变量声明在这个域中,那么外部是无法直接去访问,要想访问必须new出一个实例来,相当于Java中class。首先让我们来了解一下prototype方法: 1、不使用...

    TeddyMocks:一个简单的 Javascript 模拟框架,为 TypeScript 开发编写和优化

    TeddyMocks 一个简单的 Javascript 模拟框架,为 TypeScript 开发编写和优化。概述Teddy Mocks 是一个用 TypeScript 编写的 JavaScript 模拟框架。 它针对 TypeScript 开发人员进行了优化,并使用流畅的 lambda 语法...

    【JavaScript源代码】JavaScript继承的三种方法实例.docx

     继承 继承: 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承。  继承也是为了数据共享,js中的继承也是为了实现数据共享  我们可以联想到原型...

    javascript 常用代码大全

    一、验证类 1、数字验证内 1.1 整数 1.2 大于0的整数 (用于传来的id的验证) ...14,各种<object classid=>相关类,如播放器,flash与脚本互动等 16, 刷新/模拟无刷新 异步调用类(xmlhttp或iframe,frame)

    JavaScript 模拟类机制及私有变量的方法及思路

    在使用一些 Javascript 框架时,或许会看到类似的代码 代码如下: var MyClass = new Class({ initialize: function(param, …) { this.param = param; … }, func1: function(…) { … } }); var myObj = ...

    模拟套接字:用于WebSockets和Socket.IO的Javascript模拟库

    用于和Javascript模拟库 内容 安装 npm install mock-socket import { WebSocket , Server } from 'mock-socket' ; 用法 import test from 'ava' ; import { Server } from 'mock-socket' ; class ChatApp { ...

    Google-Glass-demo-app:使用 Javascript(D3 库)的 Google Class 演示应用程序

    Google-Glass-demo-app 使用 Javascript(D3 库)的 Google Class 演示应用程序该演示有 2 个应用程序 - 比萨配料应用程序和海况应用程序。 此演示分别使用向左和向右箭头键模拟在 Victoria Viewers 一侧向前和向后...

    javascript 类和命名空间的模拟代码

    先上一段最简单的: 代码如下: // 以下几行代码展示了命名空间、类、以及函数的模拟定义和使用: ...类的模拟 代码如下: // 类定义 function Class(info){ // 私有成员 var privateData = “private data”; var privat

Global site tag (gtag.js) - Google Analytics