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 应用类库代码
Jun 02 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
PHP nl2br函数 将换行字符转成 <br>
2009/08/21 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
Python求均值,方差,标准差的实例
2019/06/29 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
小学数学课后反思
2014/04/23 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
演讲开场白和结束语
2015/05/29 职场文书
遗失证明范文
2015/06/19 职场文书
教师反邪教心得体会
2016/01/15 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
解析目标检测之IoU
2021/06/26 Python
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python