JavaScript模拟实现封装的三种方式及写法区别


Posted in Javascript onOctober 27, 2017

前  言

   继承是使用一个子类继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承!  JS中有很多实现继承的方法,今天我给大家介绍其中的三种吧。

1.在 Object类上增加一个扩展方法

//声明一个父类
function Person(name){
 this.name=name;
 this.age=age;
 this.say=function(){
   alert("我叫"+this.name);
 }
}
//声明一个子类 
function Student(){
 this.no=no;
 this.study=function(){
  alert("我在学习!");
 }
}
// 通过循坏,将父类对象的所有属性和方法,全部赋给子类对象
Object.prototype.extend=function(parent){
 for(var i in parent){
   this[i].parent[i];
 }
}
var p=new Person("张三",12);
var s=new Student("1234567");
//子类对象调用这个扩展方法
s.extend()
console.log(s);

上述实现继承的原理:

通过循坏,将父类对象的所有属性和方法,全部赋给子类对象。关键点在于for-in循坏,即使不扩展Object,也能通过简单的循坏实现操作。

但是用这种方法实现继承也有一些缺点:

①无法通过一次实例化,直接拿到完整的子类对象。而需要先拿到父类对象和子类对象两个对象,再手动合并;

②扩展Object的继承方法,也会保留在子类的对象上。

再来看看第二种实现继承的方法吧~

2.使用原型继承

在介绍这种方法之前先来说两个概念:原型对象与原型

1、prototype:函数的原型对象

①只有函数才有prototype,而且所有函数必有prototype

②prototype本身也是一个对象!

③prototype指向了当前函数所在的引用地址!

2、__proto__:对象的原型!

①只有对象才有__proto__,而且所有对象必有__proto__

②__proto__也是一个对象,所以也有自己的__proto__,顺着这条线向上照的顺序,就是原型链。

③函数、数组都是对象,都有自己的__proto__

//声明父类
function Person(name,age){
   this.name=name;
   this.age=age;
   this.say=function(){
    alert("我叫"+this.name);
   }
}
//声明子类   
function Student(no){
   this.no=no;
   this.study=function(){
    alert("我在学习!我叫"+this.name+"今年"+this.age");
   }
}
//将父类对象赋给子类的prototype  
Student.prototype=new Person("张三",14);
//拿到子类对象时,就会将父类对象的所有属性和方法,添加到__proto__
var s=new Student(); 
s.study();

使用原型继承的原理:

将父类对象,赋值给子类的prototype,那么父类对象的属性和方法就会出现在子类的prototype中。那么,实例化子类时,子类的prototype又会到子类对象的__proto__中,最终,父类对象的属性和方法,会出现在子类对象的__proto__中。

这种继承的特点:

①子类自身的所有属性都是成员属性,父类继承过来的属性都是原型属性。

②依然无法通过一步实例化拿到完成的子类对象。

第三种实现继承的方法:

call()和apply()还有bind(),这三种方法很相似,只有在传参方面有所不同。

function Person(name,age){
  this.name=name;
  this.age=age;
  this.say=function(){
    alert("我叫"+this.name);
    }
}
function Student(no,name,age){
  this.no=no;
  this.study=function(){
    alert("我在学习!");
  }
//将父类函数的this,指向为子类函数的this
Person.call(this,name,age);
}
var s=new Student(12,"张三",24);
console.log(s);

三个函数的唯一区别,在于接受func的参数列表的方式不同,除此之外,功能上没有任何差异!

三个函数的写法(区别):

call写法:func.call(func的this指向的obj,func参数1,func参数2,...);

apply写法:func.apply(func的this指向的obj,[func参数1,func参数2,...]);

bind写法:func.bind(func的this指向的obj)(func参数1,func参数2,...);

总结

以上所述是小编给大家介绍的JavaScript模拟实现封装的三种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
jQuery get和post 方法传值注意事项
Nov 03 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
Node.js的包详细介绍
Jan 14 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 #Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 #Javascript
vue中的event bus非父子组件通信解析
Oct 27 #Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 #Javascript
webpack配置之后端渲染详解
Oct 26 #Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 #jQuery
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 #Javascript
You might like
介绍php设计模式中的工厂模式
2008/06/12 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
简述vue中的config配置
2018/01/23 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
爱心捐助倡议书
2014/05/19 职场文书
材料物理专业求职信
2014/09/01 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
三严三实心得体会范文
2014/10/13 职场文书
努力工作保证书
2015/02/28 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
MySQL中order by的使用详情
2021/11/17 MySQL