JavaScript使用prototype属性实现继承操作示例


Posted in Javascript onMay 22, 2020

本文实例讲述了JavaScript使用prototype属性实现继承操作。分享给大家供大家参考,具体如下:

JS并没有显式的继承语法,在JS中所有的对象都是Object的子类实现, 因而对象之间是平等关系.

尽管如此我们可以通过特殊的方法达到继承的效果.

当然JS也不能直接定义类, 我们通过定义函数可以得到一个同名的类 , 同时这个函数就是这个类的构造器,

在定义函数时以this修饰的变量就是定义的 类的实例中的属性,当这个属性时函数时,  就可以认为这个属性变成了一个实例方法

//定义一个Person类
function Person(name , age)
{
  this.name=name;
  this.age=age;
  //定义一个info函数
  this.info=function()
  {
    document.writeln("年龄"+this.age+"姓名"+this.name);
  }
}
//创建Person类的实例对象
var p1= new Person('xiaoming',20);
//调用p1的info方法
p1.info();
var p2= new Person('wang',22);
p2.info();

这种在类内(函数内)定义函数的方式是有弊端的:

  • 性能低下, 这种方式定义函数在每次创建对象时都会创建一个新的info函数, 有多个对象就会有多个info函数,实际上我们只需要一个info函数,  这样就会造成系统内存泄漏, 引起性能的下降
  • 使info函数中的局部变量产生闭包, 闭包会扩大局部变量的作用域,使局部变量存活到函数外

为了避免这两种情况, 通常不建议在类定义时为类定义方法,而是采用prototype属性:

JS中所有类(函数)都有一个prototype属性, 为该属性增加属性方法可以视为对类的拓展,

也就是增加了prototype属性的类继承了原有的类 , 这也就是JS所提供的伪继承机制

//定义一个Person类
function Person(name , age)
{
  this.name=name;
  this.age=age;
  //定义一个info函数
  this.info=function()
  {
    document.writeln("年龄"+this.age+"姓名"+this.name);
  }
}
//创建Person类的实例对象
var p1= new Person('xiaoming',20);
//调用p1的info方法
p1.info();
 
//为Person类增加walk方法
Person.prototype.walk=function()
{
  document.writeln(this.name+'正在走<br/>');
}
var p2=new Person('xiaohong',20);
//p2可以调用Person中的方法
p2.info();
//也可以调用prototype属性增加的方法
p2.walk();
//JS允许为类动态增加方法和属性,这里p1也可以调用walk
p1.walk();

上例为prototype属性增加了方法可以认为是为Person类动态地增加了方法,

这种方式增加的方法会让所有实例共享一个walk方法, 可以注意到是Person.prototype类的属性,并非实例

walk方法不在Person函数内,因此不会产生闭包,

这种为类动态地增加属性和方法可以被当作一种伪继承,

但这种伪继承并非产生 了新的子类而是修改了原有的类

别着急,prototype属性还有另一种方式实现继承:

prototype属性代表该类原型对象, 即默认是一个Object对象, 将类prototype设为父类实例可以实现继承

function Person(name,age)
{
  this.name=name;
  this.age=age;
}
Person.prototype.say=function()
{
  console.log(this.name+'说话了');
}
var per = new Person('小明',20);
per.say();
//再定义一个student类,欲意继承Person
function Student (grade)
{
  this.grade=grade;
}
//将student的prototype设为Person对象
Student.prototype =new Person('小红',22);
//为Student添加方法
Student.prototype.intro= function()
{
  console.log(this.name+'是'+this.grade+'年级学生');
}
var stu=new Student(3);
stu.name="小刚";
console.log(stu instanceof Person&& stu instanceof Student);//true
stu.say();//小刚说话了
stu.intro();//小刚是3年级学生

上例定义了Person类,增加了say()方法

又定义了Student类, 并将Student类的prototype属性设为Person对象, 表明Student原型是Person对象,

也就是Student继承了Person, 会得到其方法和属性

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

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

Javascript 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
xml转json的js代码
Aug 28 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
详解vue 组件注册
Nov 20 Vue.js
详解JSON.parse和JSON.stringify用法
Feb 18 Javascript
详解如何修改 node_modules 里的文件
May 22 #Javascript
Node.js API详解之 readline模块用法详解
May 22 #Javascript
vue+canvas实现移动端手写签名
May 21 #Javascript
基于canvas实现手写签名(vue)
May 21 #Javascript
jQuery实现移动端笔触canvas电子签名
May 21 #jQuery
js cavans实现静态滚动弹幕
May 21 #Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 #Javascript
You might like
用PHP生成html分页列表的代码
2007/03/18 PHP
php explode函数实例代码
2012/02/27 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
深入密码加salt原理的分析
2013/06/06 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP生成唯一订单号
2015/07/05 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
JS中style属性
2006/10/11 Javascript
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
python使用RNN实现文本分类
2018/05/24 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
python中的对数log函数表示及用法
2020/12/09 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
打架检讨书100字
2014/01/08 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
Golang 链表的学习和使用
2022/04/19 Golang
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技