基于JavaScript 类的使用详解


Posted in Javascript onMay 07, 2013

以下为构造函数方法创建类:

function className (prop_1, prop_2, prop_3) {  
this.prop1 = prop_1;  
this.prop2 = prop_2;  
this.prop3 = prop_3;}

有了上面的类,我们就可以为类创建实例:
var obj_1 = new className(v1, v2, v3)
var obj_2 = new className(v1, v2, v3)

我们也可以给类添加方法(method),其实就是Function里的Function。
function className (prop_1, prop_2, prop_3) {
  this.prop1 = prop_1;
  this.prop2 = prop_2;
  this.prop3 = prop_3;
  this.func = function new_meth (property) {
        //coding here
  }
}

属性访问域:

在JavaScript里,对象的属性默认都是全局的,也就是说,对象内外都可以直接访问该属性。上面例子里this.prop1, this.prop2, this.prop3都是全局属性。

如何定义私有属性呢?使用var,下面的例子里,price就变成了私有属性!

function Car( listedPrice, color ) {
    var price = listedPrice;
    this.color = color;
    this.honk = function() {
        console.log("BEEP BEEP!!");
    };
}

如果你想访问私有属性,那么你可以在对象内添加一个方法去返回这个私有属性,因为方法在对象内,所以可以访问对象的私有属性。在外部调用该方法,就可以访问到这个私有属性了。但是在方法里,就不能再用this.了,像上面的例子,要访问price,就可以在对象里添加方法:
this.getPrice = function() {
//return price here!        
return price;
--------------------------------------------------------------------------------

继承:

使用以下语法继承:

ElectricCar.prototype = new Car();

使用instanceOf检查对象是否某对象的继承,返回true或false。
myElectricCar instanceof Car

给继承后的对象添加方法:
// 使用构造函数定义一个新的对象
function ElectricCar( listedPrice ) {
    this.electricity=100;
    var price = listedPrice;
}
// 使新对象继承Car
ElectricCar.prototype = new Car();
// 为新对象添加方法
ElectricCar.prototype.refuel = function(numHours) {
    this.electricity =+ 5*numHours;
};

重写原型对象的值或方法:
当我们继承原型对象后,我们会继承原型的值和方法。但有的时候,我们的对象值或方法可能会不同,这时候,我们可以通过重写原型对象的值和方法来改变新对象的内容
function Car( listedPrice ) {
   var price = listedPrice;
   this.speed = 0;
   this.numWheels = 4;   this.getPrice = function() {
       return price;
   };
}

Car.prototype.accelerate = function() {
   this.speed += 10;
};
function ElectricCar( listedPrice ) {
   var price = listedPrice;
   this.electricity = 100;
}
ElectricCar.prototype = new Car();
// 重写accelerate方法
ElectricCar.prototype.accelerate = function() {
  this.speed += 20;  
};
// 添加新方法decelerateElectricCar.prototype.decelerate = function(secondsStepped) {
    this.speed -= 5*secondsStepped;
};
myElectricCar = new ElectricCar(500);
myElectricCar.accelerate();
console.log("myElectricCar has speed " + myElectricCar.speed);
myElectricCar.decelerate(3);
console.log("myElectricCar has speed " + myElectricCar.speed);

Javascript 相关文章推荐
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
解读JavaScript中 For, While与递归的用法
May 07 #Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 #Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 #Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 #Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 #Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 #Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 #Javascript
You might like
php 文件缓存函数
2011/10/08 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
js实现一键复制功能
2017/03/16 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python生成随机验证码的两种方法
2015/12/22 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
python import 上级目录的导入
2020/11/03 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
党员个人思想汇报
2013/12/28 职场文书
十八大报告观后感
2014/01/28 职场文书
中年人生感言
2014/02/04 职场文书
历史学专业求职信
2014/06/19 职场文书
毕业设计致谢词
2015/05/14 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
Nginx配置使用详解
2022/07/07 Servers