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(){...};
时间: 2024-08-22 15:02:13

javascript类和原型学习笔记的相关文章

《JavaScript高级编程》学习笔记之object和array引用类型_javascript技巧

本文给大家分享我的javascript高级编程学习笔记之object和array引用类型,涉及到javascript引用类型相关知识,大家一起看看把. 1. Object类型      大多数引用类型值都是Object类型的实例:而且Object也是ECMAScript中使用最多的一个类型.      创建Object实例有如下两种方式: new操作符后跟Object构造函数: var person=new Object( ); person.name="webb"; person.a

《JavaScript高级程序设计》学习笔记

系统学习JS, 从<JavaScript高级程序设计>入门,通过学习jQuery或者angularJS源码来进阶. 第1章 JavaScript简介 1.JS问世的目的是处理以前由服务器端语言(如Perl)负责的一些输入验证操作, 由Netscape主导开发,那时候微软的IE还不能独领风骚.最初叫做LiveScript,当时媒体热炒Java,于是改名为JavaScript. JavaScript和ECMAScript通常指同一门语言,但是,JavaScript是ECMA-262标准的实现和扩展

javascript类型系统 Array对象学习笔记_javascript技巧

       数组是一组按序排列的值,相对地,对象的属性名称是无序的.从本质上讲,数组使用数字作为查找键,而对象拥有用户自定义的属性名.javascript没有真正的关联数组,但对象可用于实现关联的功能 Array()仅仅是一种特殊类型的Object(),也就是说,Array()实例基本上是拥有一些额外功能的Object()实例.数组可以保存任何类型的值,这些值可以随时更新或删除,且数组的大小是动态调整的 一.数组创建 与Javascript中的大多数对象一样,可以使用new操作符连同Array

javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)_js面向对象

关于javascript中类的继承可以参考阮一峰的Blog<Javascript继承机制的设计思想>,说的很透. 一.在javascript中实例化遇到的问题: 下面用<javascript高级程序设计>中的例子来做说明,假如现在定义了一个car的对象,它是Object类的实例.像下面这样的: 复制代码 代码如下: var oCar=new Object(); oCar.color = "red"; oCar.doors = 4; oCar.mpg = 23;

javascript入门教程之学习笔记

呵呵,,好久没写文章了,,近来接触js比较多久顺便写个与js相关的文吧. 嗯,今天就谢谢与变量相关的东东吧,变量这东西只要你是敲代码的天天都得接触呢. 有人说变量有啥好写的?我不会告诉你Javascript里的变量很奇怪呢,没好好学一遍真的会被搞晕掉的. 好,先拿一篇已存的文,个人感觉写的还可以. 1.变量类型:基本类型和引用类型     在js 中,基本类型:Number,Boolen,null,String,Underfined 存放在栈内存中,数据长度是固定的.     而引用类型,Obj

JavaScript高级程序设计 DOM学习笔记_javascript技巧

第十章 DOM DOM是针对XML和HTML文档的一个API:即规定了实现文本节点操控的属性.方法,具体实现由各自浏览器实现. 1. 节点层次 1) 文档节点:document,每个文档的根节点. 2) 文档元素:即<html>元素,文档最外层元素,文档节点第一个子节点. 3) Node类型: ①Node是DOM中各种节点类型的基类型,共享相同的基本属性和方法. □ Node.Element_NODE(1); □ Node.ATTRIBUTE_NODE(2); □ Node.TEXT_NODE

MVC项目结构搭建及单个类的实现学习笔记1_实用技巧

新人刚开始学习ASP.NET MVC,若有不足之处希望能得到您的指点,不胜感激! 先来一张项目的层级结构图: Model:模型层,主要是各种类型.枚举以及ORM框架,框架完成数据库和实体类的映射.项目中选用了微软的开源ORM框架 EntityFramework 6.0 (以下简称EF),数据库则选择了微软的轻量级数据库SQL Server Compact 4.0本地数据库(简称Compact),Compact对EF支持比较完美,又属于文档型数据库,部署起来比较简洁. DAL:数据访问层,主要是对

javascript类型系统 Window对象学习笔记_javascript技巧

window对象是Web浏览器中javascript的一个终极兜底儿对象,在作用域中处于最末端,是一个包含所有对象的对象.所有在全局作用域中定义的属性和函数都是window对象的属性 var myStringVar = 'myString'; var myFunctionVar = function(){}; console.log('myStringVar' in window);//true console.log('myFunctionVar' in window);//true   1.

JavaScript高级程序设计 事件学习笔记_javascript技巧

第12章 事件 1.事件流 1.1事件冒泡(IE事件流) □事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档). □所有浏览器均支持事件冒泡.Firefox.chrome.safari将事件一直冒泡到window对象. 1.2事件捕获(Netscape事件流) □不太具体的节点更早收到事件,而具体的节点最后收到节点. □Safari.chrome.Opera.firefox支持,但从window对象