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 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 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
discuz Passport 通行证 整合笔记
2008/06/30 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
js调用css属性写法
2013/09/21 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
Python切图九宫格的实现方法
2019/10/10 Python
Python函数基本使用原理详解
2020/03/19 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
打架检讨书50字
2014/01/11 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
合作协议书模板2014
2014/09/26 职场文书
出租车拒载检讨书
2015/01/28 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS