内容要点:

一.JS类

在JS中,类的所有实例对象都从同一个原型对象上继承属性。因此,原型对象是类的核心。在例6.1 原型中定义了inherit()函数(通过原型继承创建一个新对象),这个函数返回一个新创建的对象,后者继承自某个原型对象。

如果定义一个原型对象,然后通过inherit()函数创建一个继承自它的对象,这样就定义了一个JS类。

通常,类的实例还需要进一步的初始化,通常,是通过定义一个函数来创建并初始化这个新对象,参照下例9-1.例9-1给一个表示"值的范围"的类定义了原型对象,还定义了一个"工厂函数"用以创建并初始化类的实例。

二.例9-1 一个简单的JS类

//rang.js:实现了一个能表示值得范围的类

//这个工厂方法返回一个新的 "范围对象"

function range(from,to){

//使用Inherit()函数来创建对象,这个对象继承自在下面定义的原型对象。

//原型对象作为函数的一个属性存储,并定义所有"范围对象"所共享的方法(行为)

var r = inherit(range.methods);

//存储新的"范围对象"的起始位置和结束位置(状态)

//这两个属性是不可继承的,每个对象都拥有唯一的属性

r.from = from;

r.to = to;

//返回这个新创建的对象

return r;

}

//原型对象定义方法,这些方法为每个范围对象所继承

range.methods = {

//如果x在这个范围内,则返回true,否则返回false

//这个方法可以比较数字范围,也可以比较字符串和日期范围

includes : function(x){ return this.from <=x && x<=this.to; },

//对于范围内的每个整数都调用一个f,这个方法只可用做数字范围

foreach : function(f){ for(var x = Math.ceil(this.from); x <=this.to;x++) f(x);},

//返回表示这个范围的字符串

toString : function(){ return "(" + this.from + "..." +this.to + ")"; }

};

//这里是使用"范围对象"的一些例子

var r = range(1,3); //创建一个范围对象

r.includes(2);        //=>true:2 在这个范围内

r.foreach(console.log); //输出1 2 3

console.log(r);  //输出(1...3)

代码分析:

在例9-1中有一些代码是没有用的。 这段代码定义了一个工厂方法range(),用来创建新的范围对象。

我们注意到,这里给range()函数定义了一个属性range.methods,用以快捷地存放定义类的原型对象。把原型对象挂在函数上没什么大不了,但也不是惯用做法。

再者,注意range()函数给每个范围对象都定义了from和to属性,用以定义范围的起始位置和结束位置,这两个属性是非共享的,当然也是不可继承的。

最后,注意range.methods中定义的那些可共享、可继承的方法都用到了from和to属性,而且使用了this关键字,为了指代它们,二者使用this关键字来指代调用这个方法的对象。任何类的方法都可以通过this的这种基本用法来读取对象的属性。

《JS权威指南学习总结--9.1 类和模板》的更多相关文章

  1. 简单物联网:外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. typeJavaScript笔记----字符串,参数,函数,表达式,循环

    一.字符串新特性--双丿(撇)号声明字符串 .多行字符串 var myName = `fang my hao li jsk c sdf` //这样不会报错. .字符串模板 console.log(`q ...

  2. Python快捷键

    IDLE默认不能显示行号,使用ALT+G 跳到对应行号,在右下角有显示光标所在行.列. ALT+P  上一个历史输入内容. ALT+N 下一个历史输入内容. IDLE中按F5可以运行代码.

  3. 前端技术——WebFont与Sprite

    一.WebFont web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体. 我们在文档中显示的字体应该在系统中能找到才会正常显示,比如你在word中使用了黑体字 ...

  4. Html5移动端页面自适应布局详解(阿里rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

  5. 51nod1092(lcs简单运用/dp)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1092 题意:中文题诶- 思路: 解法1:最坏的情况就是在原字 ...

  6. 《JavaScript网页经典特效300例》

    <JavaScript网页经典特效300例> 基础篇 进阶篇 高级篇

  7. PL SQL Developer报错框乱码

    在系统变量里设置 变量名:NLS_LANG 变量值设为:SIMPLIFIED CHINESE_CHINA.ZHS16GBK

  8. Chapter 16_5 单一方法

    当一个对象只有一个方法时,可以不用创建接口table,但是要将这个单独的方法作为对象来返回.可以参考迭代器那一节,是如何构造一个迭代器函数,那个函数将状态保存为closure. 一个具有状态的迭代器是 ...

  9. 洛谷-求同构数的个数-NOIP2013提高组复赛

    题目描述 Description 所谓同构数是指这样的数,即它出现在它的平方数的右端.例如,5的平方是25 (即5×5=25),5是25右端的数,那么5就是同构数.又如,25的平方是625(即25×2 ...

  10. JQuery笔记(二)jq常用方法animate()

    在jq中,比较方便的是相对于js,jq封装了很多方法,很方便使用,下面我举几个常用的方法 animate()方法 <!DOCTYPE html> <html lang="e ...