javascript类和原型学习笔记
js中类的所有实例对象都从同一个原型对象上继承属性。我们可以自己写一个对象创建的工厂方法来来“模拟”这种继承行为:
//inherit()返回一个继承自原型对象p的属性的性对象
//这里使用ECMAScript5中的Object.create()函数
//如果不存在该函数,则使用另一种方法
function inherit(p){
if(p == null) throw TypeError();
if(Object.create)
return Object.create(p);
var t = typeof p;
if(t !== "object" && t!=="function")
throw TypeError();
function f(){};
f.prototype = p;
return new f();
}
代码中Object.create方法是在ECMAScript5中定义的,它创建一个新的对象,其中第一个参数是这个对象的原型:
var x = Object.create({x:1,y:2});
var y = Object.create(Object.prototype);//和{}或new Object()类似
下面模拟了一个类的构造函数:
function range(from,to){
var r = inherit(range.methods);
r.from = from;
r.to = to;
return r;
}
range.methods = {
includes:function(x){
return this.from <= x && x <= this.to;
},
foreach:function(f){
for(var x = Math.ceil(this.from);x <= this.to;x++)
f(x);
},
toString:function(){
return "(" + this.from + "..." + this.to + ")";
}
}
//我们可以向下面这样创建range对象以及调用它的方法
var r = range(1,3);
r.includes(2);
r.foreach(console.log);
console.log(r);
接下来我们用js的标准的new方法来创建相同的对象:
//类的构造函数约定首字母大写
//注意函数结尾不用return something代码
function Range(from,to){
this.from = from;
this.to = to;
}
//方法内容和前面一样,省略
Range.prototype = {
includes:function(x){...},
foreach:function(f){...},
toString:function(){...}
};
//同样给出创建和使用的代码
var r = new Range(1,3);
r.includes(2);
r.foreach(console.log);
console.log(r);
以上代码遵循了一个编程约定:定义构造函数即是定义类,首字母需要大写,普通函数和方法的首字母皆为小写。
还有要注意的是,第一段代码原型是range.methods,这种命名可以是任意的;而第二段代码中原型是Range.prototype,这个名称是必须的。对Range()构造函数的调用会自动使用Range.prototype作为新Range对象的原型。
每个js函数(ECMAScript5中的Function.bind()方法返回的函数除外)都自动拥有一个prototype属性,该属性的值为一个对象,该对象包含唯一一个不可枚举属性constructor,该属性的值味一个函数对象:
var f = function(){};
var p = f.prototype;
var c = p.constructor;
c === f //must true!对于任意函数f,有f.prototype.constructor === f;
以上可以认为constructor是以指回其构造函数的反向”指针”,由于constructor方法在对象的原型对象中,所以可以用任意对象来调用:
var obj = new F();
obj.constructor === F; //must true!
需要注意的是,以上第2个例子中Range类使用了一个新的对象重写了预定义的Range.prototype对象,但是这个新定义的原型对象不含有constructor属性,因此Range类的实例中也不含有constructor属性,我们可以给原型显示添加一个构造函数:
Range.prototype = {
constructor:Range,
//same codes...
};
还有一种方法是使用预定义的原型对象,域定义的原型对象包含constructor属性:
Range.prototype.includes = function(x){...};
Range.prototype.foreach = function(f){...};
Range.prototype.toString = function(){...};
javascript类和原型学习笔记的更多相关文章
- js类、原型——学习笔记
js 内置有很多类,我们用的,都是从这些类实例化出来的. function Object () {} function Array () {} function String () {} functi ...
- 《零基础学JavaScript(全彩版)》学习笔记
<零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...
- 《JavaScript语言精粹》学习笔记
一.in的用法 for...in 枚举一个对象的所有可枚举属性 检测DOM/BOM属性 if ("onclick" in elem) { // 元素支持onclick } if ( ...
- 《JavaScript权威指南》学习笔记 第六天 开始学习DOM了。
昨天学习了window对象的一些方法.window对象主要是针对当前视窗的操作.window对象提供了一些列API来帮助我们了解当前窗口的信息.例如history对象可以让我们获取浏览历史.nvaig ...
- 《JavaScript高级程序设计》学习笔记12篇
写在前面: 这12篇博文不是给人看的,而是用来查的,忘记了什么基础知识,点开页面Ctrl + F关键字就好了 P.S.如果在对应分类里没有找到,麻烦告诉我,以便尽快添上.当然,我也会时不时地添点遗漏的 ...
- 对Javascript 类、原型链、继承的理解
一.序言 和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...
- JavaScript原型学习笔记
1 理解JavaScript原型 什么是原型? 原型是一个对象,其他对象可以通过它实现属性继承. 任何一个对象都可以成为原型么? 是 哪些对象有原型 所有的对象在默认的情况下都有一个原型,因为原型本身 ...
- 《JavaScript高级程序设计》学习笔记(5)——面向对象编程
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...
- 《JavaScript权威指南》学习笔记 第五天 window对象的方法。
前天和昨天大致浏览了犀牛书的函数.类与模块.正则表达式.JavaScript扩展.以及服务端的js.这些方面对于我目前的水平来说比较难,一些最基本的概念都不能领会.不过最复杂的知识占用平时使用的20% ...
随机推荐
- 【Unity Shaders】ShadowGun系列之二——雾和体积光
写在前面 体积光,这个名称是God Rays的中文翻译,感觉不是很形象.God Rays其实是Crepuscular rays在图形学中的说法,而Crepuscular rays的意思是云隙光.曙光. ...
- C语言省略extern的缺陷
在一个文件中(比如a.c)定义一个全局变量int a = 10; 然后在另一个代码文件(比如main.c)中需要使用变量a,可以写 int a; 单独看main.c文件时就会出现二义性,一个含义是当其 ...
- Ext JS 6开发实例(二) :使用CMD创建应用程序
由于Ext JS 6将原来的Ext JS和Sencha Touch合并为一个框架,因而在使用CMD来创建应用程序前,需要考虑清楚你是要创建一个通用应用程序,还是仅仅只是针对桌面或移动设备的应用程序. ...
- 公司间INVOICE的库存设置
公司间INVOICE 库存设置信息 实施多组织支持的步骤 1. 开发组织架构 2. 定义主要分类帐 3. 定义组织 4. 定义组织间关系 5. 定义职责 6. 为职责设置业务实体配置文件选项 ...
- HTTP 消息结构
HTTP 消息结构 HTTP是基于客户端/服务端(C/S)的架构模型,通过一个可靠的链接来交换信息,是一个无状态的请求/响应协议. 一个HTTP"客户端"是一个应用程序(Web浏览 ...
- 三层登录实例VB.NET版详解---理论加实战篇
层,百度百科这样解释,首先-重叠起来的东西:重叠起来的东西中的一部分:层次|表层|大气层.其次-重叠:重复:层峦叠嶂|层出不穷.最后-量词,用于可以分出层次的事物,女孩儿强烈的第六感,三层中的层一定是 ...
- 网站开发进阶(三十)HTML5--本地存储Web Storage
HTML5--本地存储Web Storage Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种: sessionStorage: ...
- Python进阶 函数式编程和面向对象编程等
函数式编程 函数:function 函数式:functional,一种编程范式.函数式编程是一种抽象计算机的编程模式. 函数!= 函数式(如计算!=计算机) 如下是不同语言的抽象 层次不同 高阶函数: ...
- 基于VB中WINSOCK控件的网上象棋系统的实现
本文发表在<微型机与应用>杂志2001年第3期. 基于VB中WINSOCK控件的网上象棋系统的实现 马根峰1 , 孙艳2 , 王平1 (1.重庆邮电学院自动化学院,重庆,40006 ...
- Django访问量和页面点击数统计
http://blog.csdn.net/pipisorry/article/details/47396311 下面是在模板中做一个简单的页面点击数统计.model阅读量统计.用户访问量统计的方法 简 ...