基于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 相关文章推荐
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
javascript this指向相关问题及改变方法
Nov 19 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
解读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 获得汉字拼音首字母的函数
2009/08/01 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
2019/12/22 Javascript
python采集百度百科的方法
2015/06/05 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python对List中的元素排序的方法
2018/04/01 Python
python实现狄克斯特拉算法
2019/01/17 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
keras 读取多标签图像数据方式
2020/06/12 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
大专毕业生简历的自我评价
2013/10/20 职场文书
临床医师专业个人自我评价范文
2013/11/07 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
销售代理协议书
2014/09/30 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
golang在GRPC中设置client的超时时间
2021/04/27 Golang