博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript 封装方法
阅读量:6908 次
发布时间:2019-06-27

本文共 2700 字,大约阅读时间需要 9 分钟。

基本封装方法

请看下面的例子:

var Person = function(name,age){ this.name = name; this.age = age || "未填写"; this.hobbys = []; } Person.prototype = { sayName:function(){ console.log(this.name); }, sayAge:function(){ console.log(this.age); }, addHobby:function(hobbys){ this.hobbys = this.hobbys.concat(hobbys); } } var person1 = new Person("Jane","20"); var person2 = new Person("TabWeng","21"); person1.addHobby(['sing','drawing']); person2.addHobby(['football','study','running']); person1.sayName(); console.log(person1.hobbys.toString()); person2.sayName(); console.log(person2.hobbys.toString());

运行结果:

Jane  sing,drawingTabWeng  football,study,running

这在中讲过,把可以共用的属性和方法写在原型上,需要每个实例各自都有的副本的属性和方法放在构造函数中。

现在有个问题,名称的输入不能有数字,要怎么解决呢?解决的方法可以写一个检查名称的函数,这个函数写在原型上。

var Person = function(name,age){ //校验名称 if(this.checkName(name)){ throw new Error("名字 "+name+" 不能存在数字"); } this.name = name; this.age = age || "未填写"; this.hobbys = []; } Person.prototype = { //校验函数 checkName:function(name){ re = /\d/; return re.test(name); }, sayName:function(){ console.log(this.name); }, sayAge:function(){ console.log(this.age); }, addHobby:function(hobbys){ this.hobbys = this.hobbys.concat(hobbys); } } var person1 = new Person("Helen666","20"); var person2 = new Person("TabWeng","21"); person1.addHobby(['sing','drawing']); person2.addHobby(['football','study','running']); person1.sayName(); console.log(person1.hobbys.toString()); person2.sayName(); console.log(person2.hobbys.toString());

这段代码中,我们写了一个checkName()函数,来校验名称,暂且只是校验不能有数字吧,然后再构造函数里的第一行代码中进行校验,若校验不通过,则抛出异常。

这里我传入一个名称Helen666,结果抛出如下异常:

Error: 名字 Helen666 不能存在数字

这样就做到了一个基本的封装,实现内部校验。

但是又有个问题,我们还可以这样来定义名称:

var person1 = new Person("Helen","20"); person1.name = "Helen666"; person1.sayName(); //Helen666

这样名称还是可以修改为不合法的名称,于是我们想到用get方法 和set方法来做控制,只能通过set方法来赋值,同时通过set方法进行校验,而通过get方法来获得值。现在的代码修改如下:

// Interfacevar People = new Interface("People",["setName","getName","setAge","getAge","addHobby","getHobby","sayName","sayAge"]); var Person = function(name,age){ //implement People this.setName(name); this.setAge(age); this._hobbys = []; } Person.prototype = { //校验函数 checkName:function(name){ re = /\d/; return re.test(name); }, sayName:function(){ console.log(this._name); }, sayAge:function(){ console.log(this._age); }, addHobby:function(hobbys){ this._hobbys = this._hobbys.concat(hobbys); }, getHobby:function(){ return this._hobbys; }, setName:function(name){ if(this.checkName(name)){ throw new Error("名字 "+name+" 不能含有数字"); } this._name = name; }, getName:function(){ return this._name; }, setAge:function(age){ this._age = age || "未设置"; }, getAge:function(){ return this._age; } } var person1 = new Person(

转载于:https://www.cnblogs.com/lianzhibin/p/6104576.html

你可能感兴趣的文章
<<java程序设计>>_Java程序设计
查看>>
java import lang_java.lang
查看>>
java实验Java面向对象编程_Java实验项目 面向对象编程.doc
查看>>
java ldap添加用户名密码_使用用户名和密码的Java LDAP身份验证
查看>>
java 单精度数据后缀_java有哪些基本数据类型
查看>>
java 死锁 定位_Java中死锁的定位与修复
查看>>
mysql数据库内存结构_mysql 内存结构
查看>>
java xml集合标签_java使用demo4j实现对指定目录下的XML文件指定标签下的内容进行编辑...
查看>>
检查表单行为的JAVA代码_form 表单验证
查看>>
JAVA怎么使用escape_Java中的escape,unescape方法
查看>>
zabbix Queue队列
查看>>
my-innodb-heavy-4G.cnf配置文件注解
查看>>
对IT人员如何提升自身英语能力的几点建议
查看>>
360败诉:从先例到下一例
查看>>
thinkphp学习笔记1—目录结构和命名规则
查看>>
C# 动态调用WebService
查看>>
Android开发之WebService介绍
查看>>
onClick(View) of type new View.OnClickListener(){} must override a superclass method
查看>>
2014第29周二
查看>>
自定义各式各样的圆形ProgressBar
查看>>