JS类的实现:

a.理解类的实现机制

b.使用prototype对象定义类成员

c.一种JS类的设计模式

a.理解类的实现机制

  在JS中可以使用function关键字来定义一个类。

  添加类的成员,在函数内通过this指针引用的变量或者方法都会成为类的成员。

       function class1(){
var s = "abc";
this.p1=s;
this.Method1=function(){
alert("this is a test method");
}
} var obj1=new class1();// //在JS中,function本身的定义就是类的构造函数。
/*
* new 创建对象的过站
* 1)当解释器遇到new操作符时便创建一个空对象;
* 2)开始运行class1这个函数,并将其中的this指针都指向这个新建的对象;
* 3)因为当给对象不存在的属性赋值时,解释器就会为对象创建该属性,例如在class1中,当执行到this.p1=s这条语句时,
* 就会添加一个属性p1,并把变量s的值赋给它,这样函数执行就是初始化这个对象的过程,即实现构造函数的作用。
* 4)当函数执行完后,new操作符就返回初始化后的对象。
*
* 通过这整个过程,JS中就实现了面向对象的基本机制。由此可见,在JS中,function的定义实际上就是实现一个对象的构造器,
* 是通过函数来完成的,这种方式的缺点:
* 1)将所有的初始化语句,成员定义都放到一起,代码逻辑不够清晰,不易实现复杂的功能。
* 2)每创建一个类的实例,都要执行一次构造函数。构造函数中定义的属性和方法总被重复的创建。
* 例如:this.Method1=function(){
alert("this is a test method");
}
这里的Method1每创建一个class1的实例,都会被创建一次,造成了内存的浪费。(prototype对象可以解决相关缺点。)
*/

b.使用prototype对象定义类成员

       function class1(){
this.prop=1;
}; class1.prototype.showProp=function(){//使用函数的prototype属性给类定义新成员
alert(this.prop);
} var obj1=new class1();
obj1.showProp();//调用通过prototype原型对象定义的showProp方法 /*
* prototype是一个js对象,可以为prototype对象添加,修改,删除方法和属性。从而为一个类添加成员定义。
* 了解了函数的prototype对象,在来看new的执行过程:
* 1)创建一个新的对象,并让this指针指向它。
* 2)将函数的prototype对象的所有成员都赋给这个新对象
* 3)执行函数体,对这个对象进行初始化操作
* 4)返回1中创建的对象
*
* 和之前new的执行过程相比,多了用prototype来初始化对象的过程,这也和prototype的字面意思相符,它是所对应类的
* 实例的原型。这个初始化过程发生在函数体(构造器)执行之前,所以可以在函数体内调用prototype中定义的属性和方法!
*
*/ function class2(){
this.prop=1;
this.showProp();
};
class2.prototype.showProp=function(){//使用函数的prototype属性给类定义新成员
alert(this.prop);
}
var obj2=new class2();
//PS:原型对象的定义必须在创建类实例的语句之前,否则它将不会起作用。 //prototype对象运用于设计类的成员,它是和一个类紧密相关的!
//prototype还有一个重要的属性:constructor,表示对该构造函数的引用.
function class3(){
alert(123);
}
class3.prototype.constructor();//调用类的构造函数,等同于: class.prototype.constructor()==class1;

c.一种JS类的设计模式

        /*
* 在JS中,由于对象灵活的性质,在构造函数中也可以为类添加成员,在增加灵活性的同时,也增加了代码的复杂度。
*为例提供代码的可读性和开发效率,可以采用这种定义成员的方式:使用prototype对象来替代,这样function的定义就是类的
* 构造函数,符合传统意义类的实现(类名和构造函数名是相同的)。
*/ //第一种方式
function class1(){
//构造函数
};
class1.prototype.somePropety='sample';
class1.prototype.someMethod=function(){
//
};
//以上这种方式很清晰,但每定义一个属性或方法,都需要使用一次class1.prototype,不仅代码体积变大,而且易读性不够 //第二种方式(推荐)
//进一步改善,可以使用无类型对象的构造方法来指定prototype对象,从而实现类的成员定义
function class2(tt){
//构造函数
this.somePropety=tt;
}
class2.prototype={//通过指定prototype对象来实现类的成员定义
somePropety:'sample',
someMethod:function(){
//...
}
//anything alse
}
/*
* 以上,很清晰的定义了class1,构造函数直接用类名来实现,而成员使用无类型对象来定义,以列表的方式实现了所有属性和
* 方法,并且可以在定义的同时初始化属性的值。这也更像传统意义面向对象语言中类的实现。只是构造函数和类的成员定义被
* 分为两个部分,这可看成JS中定义类的一个固定模式,这样在使用时会更加容易理解。
*
* 注意:在一个类的成员之间互相引用,必须通过this指针类进行,例如在上面例子中的someMethod方法中,如果使用属性
* somePropety,必须通过this.somePropety的形式,因为在JS中每个属性和方法都是独立的,它们通过this指针联系在一个
* 对象上!!!
*/

   

JS OOP -03 JS类的实现的更多相关文章

  1. JS OOP -04 JS中的公有成员,私有成员和静态成员

    JS中的公有成员,私有成员和静态成员 a.实现类的公有成员 b.实现类的私有成员 c.实现类的静态成员 a.实现类的公有成员 之前定义的任何类型成员都属于公有成员的范畴,该类的任何实例都对外公开这些属 ...

  2. 画布跟js.oop

    <Canvas> 是HTML5中新出现的一个元素.就是可以通过  JS绘制图形. 画布(Canvas)是一个没有内容也没有边框的矩形区域.我们可以控制里面的每一个像素. 下面我们首先定义一 ...

  3. JavaScript学习03 JS函数

    JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...

  4. js oop中的三种继承方法

    JS OOP 中的三种继承方法: 很多读者关于js opp的继承比较模糊,本文总结了oop中的三种继承方法,以助于读者进行区分. <继承使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方 ...

  5. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  6. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

  7. OOP in JS Public/Private Variables and Methods

    Summary private variables are declared with the 'var' keyword inside the object, and can only be acc ...

  8. OOP in JS - Inheritance

    Summary You cause a class to inherit using ChildClassName.prototype = new ParentClass();. You need t ...

  9. Node.js系列:Buffer类的使用

    客户端JavaScript中没有对二进制数据提供很好的支持.但是在处理TCP流或文件流时,必须要处理二进制数据.Node.js定义了一个Buffer类,用来创建一个专门存放二进制数据的缓存区. Buf ...

随机推荐

  1. vue-cli及vue-router

    1.单文件组件 (1)问题:    使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: ‘#container ‘}) 在每个页面内指定一个容器元素.当在更复杂的项 ...

  2. VS2017调试程序时 无法启动web iis或者提示ID为***的进程未启动

    打开项目的.csproj文件,定位到<WebProjectProperties>,把关于IIS的配置<DevelopmentServerPort>.<Developmen ...

  3. C++中的函数库

    函数库是由系统建立的具有一定功能的函数的集合. 库中存放函数的名称和对应的目标代码,以及连接过程中所需的重定位信息.用户也可以根据自己的需要建立自己的用户函数库. "cstdlib" ...

  4. ubuntu下载自带的java-1.8

      1.如果是自带的openjdk运行下面可以删除: sudo apt-get purge openjdk* 但是这种情况又不一定成功,有时候运行java -version发现还是可以运行的.证明删除 ...

  5. bing map for wpf 怎么显示中文地图

    添加一下代码: string suriFormat = "http://r2.tiles.ditu.live.com/tiles/r{quadkey}.png?g=41"; Mic ...

  6. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_06-SpringSecurityOauth2研究-Oauth2授权码模式-申请令牌

    3.3 Oauth2授权码模式 3.3.1 Oauth2授权模式 Oauth2有以下授权模式: 授权码模式(Authorization Code) 隐式授权模式(Implicit) 密码模式(Reso ...

  7. Elasticsearch(ELK)集群搭建

    一.前言 Elasticsearch是一个开源的高扩展的分布式全文检索引擎,它可以近乎实时的存储.检索数据:本身扩展性很好,可以扩展到上百台服务器,处理PB级别的数据.Elasticsearch也使用 ...

  8. 123457123456#0#-----com.yuming.FromPuzzleGame01--前拼后广--宝宝农场拼图cym

    com.yuming.FromPuzzleGame01--前拼后广--宝宝农场拼图cym

  9. Day7作业:选课系统

    这周的作业有点糙,迁就看吧,给大家点思路: readme: 需要安装模块: prettytable 测试帐号: 1.后台管理:admin/admin 只设定了这个后台管理帐号,没有写到数据库中 2.学 ...

  10. ABAP ole操作

    1.ole 如何保存和退出call method of sheetname 'saves' exporting #1 = filepath #2 = 1. call method of applica ...