javascript类和原型学习笔记
来源:互联网 发布:linux mount nfs目录 编辑:程序博客网 时间:2024/05/17 13:08
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类和原型学习笔记
- javascript 学习笔记3-构造函数、类和原型
- javascript学习笔记(五)原型和原型链详解
- JavaScript原型学习笔记
- javascript笔记--原型和原型链详解
- javascript 学习笔记(1)对象和原型
- 《悟透javascript》学习笔记:九、原型毕露
- 《悟透javascript》学习笔记:十、原型扩展
- JavaScript学习笔记(三十七) 原型继承
- JavaScript 学习笔记 三 原型(prototype)
- 学习Javascript原型笔记(一)
- javascript 学习笔记二【原型链模式】
- Javascript学习笔记(二)Javascript核心之类,构造函数和原型
- Javascript学习笔记(二)Javascript核心之类,构造函数和原型
- JavaScript笔记整理——原型和原型链
- 有关javaScript面向对象和原型笔记
- 韩顺平 javascript教学视频_学习笔记12_js面向对象编程介绍_类(原型对象)和对象
- Javascript的类和原型
- Chrome 扩展程序 CrxMouse Techzero优化版 更新至 v3.0.4
- 【c语言】输出乘法口诀表
- VB获取本地IP、计算机名、用户名代码
- 阿拉伯语下wifi突变显示不全
- Chrome 扩展程序 OneTab Techzero优化版 v1.0.0 发布
- javascript类和原型学习笔记
- 开始iOS 7中自动布局教程(一、二)
- Chrome 扩展程序 Speed Dial 2 Techzero优化版 更新至 v1.3.0
- Android 调用手机系统照相机拍照
- Allegro Out Of Date Shapes原因及解决方法
- 地理编码的概念及作用
- mysql常用命令
- java中工具插件列表
- 谷歌浏览器 Google Chrome v41.0.2272.89 便携增强版