JS利用prototype给类添加方法操作详解


Posted in Javascript onJune 21, 2019

本文实例讲述了JS利用prototype给类添加方法操作。分享给大家供大家参考,具体如下:

1.如何定义一个简单的类?

以下是一个没有任何属性和方法的类的定义:

function MyClass(){};

你可能会想,这不就是个简单的函数声明?没错,这个函数就是一个类的定义的实现。如何使用这个类呢?看下面的代码:

var cls1 = new MyClass();

这样,利用new就可以生成MyClass的一个实例了。所以在js中可以说函数就是类,类就是函数。

2.给类增加属性和方法

function MyClass(name,age){
  this.name = name;
  this.age = age;
}
var cls1 = new MyClass("lily",18);
alert(cls1.name);

从上面的代码可以看出,在函数内使用this就能给函数本身增加属性值。而在上面的代码中就给myClass函数增加了name和age属性。

同样,还可以利用this给这个类增加一个 toString 方法,代码如下:

function MyClass(name,age){
  this.name = name;
  this.age = age;
  this.toString() = function(){
    alert(this.name +":"+ this.age);
  };
}
var cls1 = new MyClass("liming",10);
cls1.toString();

我们已经成功的给MyClass增加了toString方法。另外也可以用以下代码来添加方法:

function MyClass(name,age){
  this.name = name;
  this.age = age;
}
var cls1 = new MyClass("liming",10);
cls1.toString() = function(){
            alert(this.name +":"+ this.age);
          };
cls1.toString(); // [liming:10]
var cls2 = new MyClass("zhang",10);
cls2.toString(); //报错

虽然这样也能给这个类添加一个方法,但这种方式只是给cls1这个实例增加了方法,并未给MyClass本身增加方法。

cls2并不存在toString方法。

3.引出prototype

从上面我们已经知道要给MyClss类的本身增加方法,需要讲方法定义在MyClass这个函数内部,这样的话,每声明一个新的实例,就会将MyClass本身复制一遍,这显然不是最优的做法。

既然不能将一个类(函数)所包含的方法都定义在函数的内部,那么,如何来给一个类添加方法呢?这就需要用到函数的prototype属性了。

每一个函数都会包含一个prototype属性,这个属性指向了一个prototype对象,我们可以指定函数对应的prototype对象。如果不指定,则函数的prototype属性将指向一个默认的prototype对象,并且次默认的prototype对象的constructor属性又会指向该函数。

当用构造函数创建一个新的对象时,新的对象会获取构造函数的prototype属性所指向的prototype对象的所有属性和方法,这样一来,构造函数对应的prototype对象所做的任何操作都会反映到它所生成的对象上,所有的这些对象将共享与构造函数对应的prototype对象的属性和方法。

虽然新创建的对象可以使用它的构造函数所指向的prototype对象的属性和方法,但不能像构造函数那样直接调用prototype对象(对象没有prototype属性)。

简而言之,就是如果我们使用函数的prototype对象来给函数添加方法,那么在创建一个新的对象的时候,并不会复制这个函数的所有方法,而是指向了这函数的所有方法。

具体看下面的代码:

function MyClass(name,age){
  this.name = name;
  this.age = age;
}
MyClass.prototype.toString = function(){
  //
}
var cls1 = new MyClass("liming",10);
cls1.toString(); //
var cls2 = new MyClass("zhang",10);
cls2.toString();

如果要加入多个方法,也可以使用下面的方式:

function MyClass(name,age){
  this.name = name;
  this.age = age;
}
MyClass.prototype = {
  toString:function(){
    //
  },
  sayHellow:function(){
    //
  }
};

这就是js中给类添加方法的实现,它是利用prototype来实现封装的。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
js格式化时间的方法
Dec 18 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 #Javascript
微信小程序实现弹出菜单动画
Jun 21 #Javascript
js类的继承定义与用法分析
Jun 21 #Javascript
js中值引用和地址引用实例分析
Jun 21 #Javascript
微信小程序实现消息框弹出动画
Apr 18 #Javascript
前端Electron新手入门教程详解
Jun 21 #Javascript
javascript实现自由编辑图片代码详解
Jun 21 #Javascript
You might like
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
Python信息抽取之乱码解决办法
2017/06/29 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python实现桌面气泡提示功能
2019/07/29 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
劳资专员岗位职责
2013/12/27 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
小学六年级学生评语
2014/04/22 职场文书
户外宣传策划方案
2014/05/25 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
个人年终总结范文
2015/03/09 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers