JS封装类

js的语法概念中,本身没有类这一说法,今天学习了用JS来封装一个类,就为大家介绍一下封装类,这个方法可以更加方便地管理类的属性和方法。废话不多说,马上来干货。

就把人当成一个类,作为一个例子吧。

类嘛,自然就有属性与方法

function Person(name,sex,year,love,fn){ //注意类名要大写

  this.name = name;

  this.sex = sex;

  this.year = year;

  this.love = love;

  this.fn = fn;//传一个函数进去

  var security_para = "my";//私有属性

}

//创建它的方法

Person.prototype = {

  eat:function(){

    console.log("hello,我是"+this.name+",我正在吃大餐");

  },

  walk:function(){

    console.log("今年刚满"+this.year+",可以走得很快");

  },

  read:function(){

    console.log("我是"+this.name+",我正在看书");

  }

}

欲传进去的函数

function sayHello(){
  console.log("hello");
}

//定义与使用类

(1)新建一个类

var xiaoming = new Person("小明",‘男‘,‘20‘,‘打篮球‘,sayHello);

var xiaofang = new Person("小芳",‘女‘,‘18‘,‘看书’);

(2)使用类的属性与方法

console.log(xiaoming);

console.log(xiaofang);

xiaoming.eat();

xiaofang.read();

xiaoming.fn;

--------------------------------------------------------------------------

输出效果:

Person {name: "小明", sex: "男", year: "20", love: "打篮球", fn: function…}
Person {name: "小芳", sex: "女", year: "18", love: "看书", fn: undefined…}
hello,我是小明,我正在吃大餐
我是小芳,我正在看书
function sayHi(){
console.log("hello");
}

-------------------------------------------------------------------------

拓展资源:

发现有一个关于Js类与继承的详细资源:http://www.w3cfuns.com/blog-5465813-5405580.html

时间: 2024-09-30 13:01:14

JS封装类的相关文章

博客第一篇:介绍一个js封装类 MSClass.js

新手第一篇博客,如有不足 请多多指教哈~ 在偶然的一次机会,接触到一个js封装类 那时候是我刚学js的时候,觉得什么效果都写不出来,脑子里也没有什么思路和逻辑之类的(新手们有这样的问题么...) 然后在随便点开链接的时候,接触到了一个js类 MSClass.js.. MSClass,是一款通用不间断滚动JS封装类,几乎支持目前所有流行风格的图片或文字的滚动/切入/渐显等效果,同时支持横向/竖向/连续/间断/缓动等多种形式. 要使用它,先在head部分引入 MSClass.js 核心文件,如: <

js 封装类实现原型继承

实现原理:定义一个封装函数extend:该函数有2个参数,Child代表子类,Parent代表父类:在函数内,先定义一个空函数F, 用来实现功能中转,设置F的原型为父类的原型,然后把空函数的实例传递给子类的原型,使用空函数的好处:避免直接实例化父类可能会带来系统性能问题,比如父类的实例很大的话,实例化会占用很多内存: function extend(Child,Parent) {    //Child表示子类,Parent表示父类    // 首先定义一个空函数   var F = functi

JS 封装类

function HighchartsObj(id, type) { var that = this; this.options = { chart : { renderTo : id, type : type, style : { cursor : 'pointer' }, events : { click : function(e) { // console.log(that.extra); var params = that.extra.split(','); if (null != pa

js封装类简单举例

//构造函数 function Cat(name,color){ this.name=name; this.color=color; } //原型 Cat.prototype={ run:function(){ //操作 alert(this.name+"run"); }, mew:function(){ //操作 alert(this.name+"mew"); } } //实例 var cat1=new Cat('tom','black'); //调用 cat1.

4个好用的JS联动选择插件

jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的JS省市联动菜单封装类,也是使用方法最简单的省市联动菜单.不过作者已经很久没更新过地址库的数据了. jQuery Dependent Selects jQuery Dependent Selects只需要在option中指明各层级之间的依赖关系,就可以自动生成多级联动下拉菜单.在小型的项目里是个不错的

不间断图片滚动JS

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-07) MSClass是一款通用不间断滚动JS封装类,几乎支持目前所有流行风格的图片或文字滚动,横向/竖向/连续/间断/缓动等多种形式. 入门 想要使用这款组件,需要页面引入MSClass.js 核心文件,该文件在您的HTML文档<head>标签之内. <script type="text/javascript" src="/path/MSClass.js">&

Html5用Canvas制作绘图板

需求: 绘制多边形 可填充颜色 可设置文字 可移动,可删除 鼠标按住后,抬起之前线段应该跟随鼠标当前位置 可与后台方便的进行数据交互,保存到后台,或将数据从后台取到前台显示相应的图形 思考: 第一想到的是找现成的改一改,找来找去,就觉得fabricjs还可以,不过研究了一下,发现例子太少,很难短时间内上手 想到了最近一直想研究确没时间看的Html5,正巧之前也买了一本关于Canvas游戏开发的书,想试试看,没想到很快就上手了 结果: 一天半时间完成,效果如下: 注意: 不要使用style或者cs

Html5用Canvas制作画图板

需求: 绘制多边形 可填充颜色 可设置文字 可移动,可删除 鼠标按住后,抬起之前线段应该尾随鼠标当前位置 可与后台方便的进行数据交互,保存到后台,或将数据从后台取到前台显示对应的图形 思考: 第一想到的是找现成的改一改,找来找去,就认为fabricjs还能够,只是研究了一下,发现样例太少,非常难短时间内上手 想到了近期一直想研究确没时间看的Html5,正巧之前也买了一本关于Canvas游戏开发的书,想试试看,没想到非常快就上手了 结果: 一天半时间完毕,效果例如以下: 注意: 不要使用style

[百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 界面查看 : http://www.cnblogs.com/ed