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 文档的编码问题解决
Mar 01 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
jquery实现抽奖功能
Oct 22 jQuery
三分钟教你用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
php命名空间学习详解
2014/02/27 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
UI Events 用户界面事件
2012/06/27 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
JavaScript SHA512&SHA256加密算法详解
2015/08/11 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
js实现点赞效果
2020/03/16 Javascript
探究python中open函数的使用
2016/03/01 Python
Python实现购物车程序
2018/04/16 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
详解Python locals()的陷阱
2019/03/26 Python
Python编写打字训练小程序
2019/09/26 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
国庆宣传标语
2014/06/30 职场文书
授权委托书怎么写
2014/09/25 职场文书
小学教师自我评价
2015/03/04 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
python实战之90行代码写个猜数字游戏
2021/04/22 Python
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android