JS OOP -03 JS类的实现
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类的实现的更多相关文章
- JS OOP -04 JS中的公有成员,私有成员和静态成员
JS中的公有成员,私有成员和静态成员 a.实现类的公有成员 b.实现类的私有成员 c.实现类的静态成员 a.实现类的公有成员 之前定义的任何类型成员都属于公有成员的范畴,该类的任何实例都对外公开这些属 ...
- 画布跟js.oop
<Canvas> 是HTML5中新出现的一个元素.就是可以通过 JS绘制图形. 画布(Canvas)是一个没有内容也没有边框的矩形区域.我们可以控制里面的每一个像素. 下面我们首先定义一 ...
- JavaScript学习03 JS函数
JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...
- js oop中的三种继承方法
JS OOP 中的三种继承方法: 很多读者关于js opp的继承比较模糊,本文总结了oop中的三种继承方法,以助于读者进行区分. <继承使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方 ...
- 原生js添加和删除类
原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...
- JS表单验证类HTML代码实例
以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...
- 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 ...
- OOP in JS - Inheritance
Summary You cause a class to inherit using ChildClassName.prototype = new ParentClass();. You need t ...
- Node.js系列:Buffer类的使用
客户端JavaScript中没有对二进制数据提供很好的支持.但是在处理TCP流或文件流时,必须要处理二进制数据.Node.js定义了一个Buffer类,用来创建一个专门存放二进制数据的缓存区. Buf ...
随机推荐
- Linux中工作目录切换命令
1.pwd命令用于显示当前的工作目录 2.cd命令用于切换工作路径,格式为:cd [目录名称] 参数 作用 - 切换到上一次的 目录,如:cd - ~ 切换到”家目录“,如:cd ~ ~usernam ...
- Flutter移动电商实战 --(39)路由_Fluro的路由配置和静态化
handler只是单个路由的配置,这节课我们要学习路由的整体配置 整体配置 新建routers.dart文件来做整体配置 detailsHandler就是我们在router_handler里面定义的d ...
- Benchmark result without MONITOR running: Benchmark result with MONITOR running (redis-cli monitor > /dev/null): 吞吐量 下降约1半 Redis监控工具,命令和调优
https://redis.io/commands/monitor In this particular case, running a single MONITOR client can reduc ...
- this.getClass()和super.getClass()得到的是同一个类
今天dubug代码时发现this.getClass()和super.getClass()得到的竟然是同一个类,都是当前类. 遍访网络资料得出: getClass()不受this和super影响,而是有 ...
- python 设计模式之中介者模式
#先啰嗦一下 至少半个多月的样子没写博客了,月初去了趟黄山,赏了美景,自然没时间也没条件敲博客了,一个多星期就这么过去了.返回深圳后,工作积压了一堆,然后白天就马不停蹄的忙工作,晚上回家伺候小娃,又想 ...
- jsp中用java代码拼接下拉选备选项及默认值【我】
<th id="TD_N_CERTIFICATION_TYPE" >证件类型:</th> <td > <select id="C ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_12-SpringSecurityOauth2研究-JWT研究-生成私钥和公钥
3.6.3 JWT入门 Spring Security 提供对JWT的支持,本节我们使用Spring Security 提供的JwtHelper来创建JWT令牌,校验JWT令牌 等操作. 3.6.3. ...
- 使用Lock对象实现同步效果
Lock是一个接口,为了使用一个Lock对象,需要用到 Lock lock = new ReentrantLock(); 与 synchronized (someObject) 类似的,loc ...
- 遍历List集合删除元素的出现报错
遍历List集合删除元素的出现报错 遍历List集合删除元素的时候会发生索引越界异常或内容遍历不全等问题. 例子: List<String> al = new ArrayList< ...
- 使用Async-profiler 对程序性能优化实战
原文在简书上, https://www.jianshu.com/p/f8336b835978 1.背景 目前有一个kafka消费者工程,此工程会消费kafka中的消息,并通过fastjson解析该消息 ...