JavaScript继承模式粗探


Posted in Javascript onJanuary 12, 2016

真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承。Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍《Javascript模式》中关于原型实现继承的几种方法,下面来谈谈JS中比较简单的继承方法,如果大家有不同意见,欢迎建议。

最基础的原型链继承在这里就不复述了,主要讲一下其他的继承模式。

1.借用构造函数继承

function Father (name) {
this.name=name;
}
function Son (name) {
Father.call(this,name); //在子类型中调用超类型的构造函数
this.age=15;
}
var me=new Son("Su");

好处:可以为子类型传递参数,如图中的name属性。

坏处:1.方法在构造函数中定义,无法复用。2.超类型原型中定义的方法对子类型是不可见的。

2.组合继承(综合原型链与构造函数)

//超类型构造函数function Father (name) {
this.name=name;
this.famMember=[];
}//超类型构造函数原型方法
Father.prototype.sayName=function () {
alert(this.name);
}//子类型构造函数
function Son (name,age) {
Father.call(this,name); //构造函数方法
this.age=age;
}
Son.prototype=new Father(); //重写子类型原型对象
Son.prototype.constructor=Son; //重写构造函数属性指向子类型
Son.prototype.sayAge=function () {
alert(this.age);
} //重写原型对象后再加入方法
var me=new Son("Su",15);
me.famMember.push("dad","mom"); //子类型可以调用超类型构造函数内的方法var he=new Son("Li",14);alert(he.famMember); // []

好处:不同的子类既可以拥有自己的属性,也可以使用相同的方法。

坏处:这种方法需要调用2次超类型的构造函数,同名的属性方法会被覆盖一次。

3.原型式继承 (类似Object.create())

function object (o) {
function F () {}
F.prototype=o;
return new F();
}var obj={}; //将obj对象传入作为新对象的原型。var me=object(obj);

使用这种方法继承需要有一个对象作为原型对象,所以所有继承其的子类型的属性方法都是共用的。

ES5通过新增Object.creatr()方法规范了原型式继承。

4.寄生式继承 (可以设置私有方法的原型式继承)

function object (o) {
function F () {}
F.prototype=o;
return new F();
}
var obj={}; //将obj对象传入作为新对象的原型。到这里都与原型式继承相同function creObj(o) {var clone=object(obj);
clone.sayHi=function () {

alert("Hi");
};return clone; }
var me=creObj(obj);

好处:这种方式弥补了原型式继承只有公有属性方法的缺陷,使子类型能有私有属性方法。

5.寄生组合式继承

function inherit (father,son) {
var pro=Object(father.prototype); //创建超类型原型对象的副本
pro.constructor=son;
son.prototype=pro;



 //将副本作为子类型的原型对象
}

本方法用于弥补组合继承中属性方法覆盖的问题。

用上图代码代替组合继承中 Son.prototype=new Father(); 这段代码。这样只需调用一次父类型的构造函数,避免了创造多余不必要的属性方法,并且保持了原型链不改变,是一种理想的引用类型继承方法。

关于js继承模式先粗略给大家介绍这么多,相信对大家有所帮助,更多信息请继续关注三水点靠木网站。

Javascript 相关文章推荐
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
JS实现的几个常用算法
Nov 12 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
深入理解vue中的$set
Jun 01 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
轻松实现Bootstrap图片轮播
Apr 20 #Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 #Javascript
学习JavaScript设计模式之策略模式
Jan 12 #Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 #Javascript
jQuery版本升级踩坑大全
Jan 12 #Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 #Javascript
7个jQuery最佳实践
Jan 12 #Javascript
You might like
php调用Google translate_tts api实现代码
2013/08/07 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
Python中防止sql注入的方法详解
2017/02/25 Python
Python数据集切分实例
2018/12/08 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
numba提升python运行速度的实例方法
2021/01/25 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
CSS3实现swap交换动画
2016/01/19 HTML / CSS
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
公司副总经理岗位职责
2014/10/01 职场文书
公司介绍信范文
2015/01/31 职场文书
家长高考寄语
2015/02/27 职场文书
小兵张嘎观后感
2015/06/03 职场文书
监护人证明
2015/06/19 职场文书