谈谈JS中的面向对象

请先看看下面这段代

1 <script src="jquery.js"></script>
2 <script type="text/javascript">
3  /**
  4      * Object.create() 最近才添加进了ECMAScript第5版规范,有些浏览器不支持
  5      * 这里模拟一个Object.create方法解决兼容性问题
  6      * Object.create : 该方法只有一个参数,即原型对象,返回一个新对象
  7      * 这个新对象的原型就是传入的参数。即传入一个对象,返回一个继承了这个对象的新对象
  8      */
  9
 10     if(typeof Object.create != "function") {
 11         Object.create = function (o) {
 12             function F() {}
 13             F.prototype = o;
 14             return F();
 15         }
 16     }
 17
 18     /**
 19      * 简单明了的GUID 生成器,用于自动化的生成ID,为保存实例记录增加ID支持
 20      */
 21     Math.guid = function(){
 22         return ‘xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx‘.replace(/[xy]/g, function( c ) {
 23             var r = Math.random() * 16 | 0;
 24             var v = c == ‘x‘ ? r : (r&0x3|0x8);
 25             return v.toString(16);
 26         }).toUpperCase();
 27     };
 28
 29     /**
 30      * creat a object 从这里开始,创建一个对象模型,注意,这里的Model是挂载到Object基类下,比Function、Array等类的级别高
 31      */
 32     var Model = {
 33         inherited : function () {},
 34         created : function () {},
 35
 36         prototype : {
 37             init : function () {}
 38         },
 39         //这个函数会返回一个新对象,这个对象继承自Model对象
 40         //我们使用它来创建新模型
 41         create : function () {
 42             var object = Object.create(this);
 43             object.parent = this;
 44             object.prototype = object.fn = Object.create(this.prototype);
 45
 46             object.created();
 47             this.inherited();
 48             this.inherited(object);
 49
 50             return object;
 51         },
 52         //这个函数会初始化返回一个新对象
 53         //它继承自Model.prototype,比如Model对象的一个实例
 54         init : function () {
 55             var instance = Object.create(this.prototype);
 56             instance.parent = this;
 57             instance.init.apply(instance, arguments);
 58
 59             return instance;
 60         },
 61         //这个方法为Model对象扩展多个属性
 62         extend : function (o) {
 63             var extented = o.extended;
 64
 65             $.extend(this, o);
 66             if(extented){
 67                 extented(this);
 68             }
 69         },
 70         //这个方法为Model对象扩展实例属性
 71         include : function(o){
 72             var included = o.included;
 73
 74             $.extend(this.prototype, o);
 75             if(included){
 76                 included(this);
 77             }
 78         }
 79     };
 80
 81     //我们需要保持记录的持久化,可以实现保存一个新创建的实例时,就将它添加进这个对象
 82     //当删除实例时,就将它从对象中删除
 83     Model.records = {};
 84     Model.include({
 85         newRecord : true,
 86         //create a isntance
 87         create : function () {
 88             this.newRecord = false;
 89             this.parent.records[this.id] = this;
 90         },
 91         //delete a instance
 92         destroy : function () {
 93             delete this.parent.records[this.id];
 94         },
 95         //update a instance existed
 96         update : function () {
 97             this.parent.records[this.id] = this;
 98         },
 99         //save a instance
100         save : function () {
101             this.newRecord ? this.create() : this.update();
102         },
103         init: function(atts) {
104             /* ... */
105         },
106         load: function(attributes){
107             /* ... */
108         }
109
110     });
111     /**
112      * 增加ID支持
113      */
114     Model.extend({
115         //search a instance by id
116         find : function (id){
117             return this.records[id];
118         }
119         create : function(){
120             if ( !this.id ) {
121                 this.id = Math.guid();
122             }
123             this.newRecord = false;
124             this.parent.records[this.id] = this;
125         }
126     });
127
128     /**
129      * for test
130      */
131     var Asset = Model.create();
132     var User = Model.create();
133
134     var user = User.init();
135
136     var asset = Asset.init();
137     asset.name = "same, same";
138     asset.id = 1;
139     asset.save();
140
141     var asset2 = Asset.init();
142     asset2.name = "but different";
143     asset2.id = 2;
144     asset2.save();
145
146
147 </script>

谈谈JS中的面向对象

时间: 2024-08-05 11:16:05

谈谈JS中的面向对象的相关文章

好程序员Java学习路线分享JS中的面向对象

好程序员Java学习路线分享JS中的面向对象,在JS中,一般情况下我们都是直接写函数,直接调用,但是发现JS中也有new关键字,那么new关键字作为创建对象的关键字,给我们的感觉就是在JS中可以定义一个类,然后用new创建对象,那么在JS中如何做呢?我们先看如下案例,下面的案例是写一个简单的喷泉效果的. window.onload = function(){ // 创建一个画布对象var canvas = document.createElement("canvas");// 设置大小

简单谈谈js中的MVC

MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): 1.用户在视图 V 上与应用程序交互 2.控制器 C 触发相应的事件,要求模型 M 改变状态(读写数据) 3.模型 M 将数据发送到视图 V ,更新数据,展现给用户 在js的传统开发模式中,大多基于事件驱动的: 1.hash驱动 2.DOM事件,用来驱动视图 3.模型事件(业务模型事件和数据模型事

js中的面向对象

面向对象:不了解原理的情况下,会使用功能.如:电视机,不清楚原理,却知道如何操作.面向对象是一种通用的思想,并非只有在编程使用.面向对象编程简称OOP. js是一个基于原型的面向对象的编程语言,即每个对象有一个原型对象,对象从原型中继承属性和方法. js的原型的关系是递归的.即,对象的原型也是一个对象,而原型的本身可能还有一个原型. js中的对象使用一个new 运算符和一个构造函数来创建 js中可以给对象动态的添加属性和方法 js中创建对象的方法有多种,包括:原型方式,动态原型方式,工厂方式等等

《JS中的面向对象技术》

内容要点: 1.什么是对象:JS权威指南学习总结-第六章 ,(有句话:一切都是对象) 2.什么面向对象 使用对象时,只关注对象提供的功能,不关注其内部细节,比如jQuery.面向对象是一种通用思想,并非只有编程中使用,任何事情都可以用. 3.JS中面向对象三大特征: 封装.继承.多态 4.JS自定义对象(三大对象两大属性): 4.1创建对象方式:方法1:对象初始化的方法,就是通过对象直接量创建的对象.方法2:通过关键字new和构造函数的方法创建对象 4.2对象属性定义:私有属性.对象属性.类属性

js中的面向对象程序设计

面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义JS中对象:无序属性的集合,其属性可以包含基本值.对象或者函数.可以简单理解为JS的对象是一组无序的值,其中的属性或方法都有一个名字,根据这个名字可以访问相映射的值(值可以是基本值/对象/方法). 1.json格式的面向对象,一个命名空间:适合模块化开发插件.不同的模块使用不同的命名空间.也可用于小型

轻松理解JS中的面向对象,顺便搞懂prototype和__proto__的原理介绍

这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道,如果我要定义一个通用的类型我可以使用类(class).比如在java中我们可以这样定义一个类: public class Puppy{ int puppyAge; public Puppy(age){ puppyAge = age; } public void say() { System.out.

谈谈 js中的几种模式 (一)

今天看了<JavaScript 高级程序设计>(第三版)这本书,颇有收获,总想写点什么,只恨自己菜鸟一只写不出什么真知灼见,只能......好了废话不多说,开篇了. 大家都知道在js中可以用Object构造函数和对象字面量这 //利用Object构造函数创建对象 var person=new Object(); person.name="DJL"; person.age=22; //利用对象字面量创建对象 var person2={ name:"DJL"

谈谈JS中的原型

不知道大家对JS中的原型理解的怎么样,我想如果大家对JS中的原型对象以及prototype属性十分熟悉的话对后面原型链以及继承的理解会十分的容易,这里想和大家分享自己对其的理解,请先看下面这段代码O(∩_∩)O~~ 1 function Person(){ 2 } 3 Person.prototype.name = "jingzi"; 4 Person.prototype.age = 20; 5 Person.prototype.sayName = function(){ 6 aler

谈谈js中for in 需要注意的地方

js中for in 可以遍历对象或数组的显性属性,也就是说我们自己定义的属性是可以遍历的,那些原型上默认已有的属性,例如:Object.prototype.toString.Object.prototype.hasOwnProperty 是遍历不出来的. for in 的基本规则如上,不过还有“坑”的地方需要我们注意: 1.for in循环出的值不一定是按顺序的.代码如下: var b = {3:1,42:2,11:3} for( var key in b ){ alert( b[key] )