基于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 相关文章推荐
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
javascript实现异形滚动轮播
Nov 28 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自动适应范围的分页代码
2008/08/05 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
信息部岗位职责
2013/11/12 职场文书
小学生植树节活动总结
2014/07/04 职场文书
党的生日活动方案
2014/08/15 职场文书
人生遥控器观后感
2015/06/11 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python