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 相关文章推荐
关于 文本框默认值 的操作js代码
Jan 12 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
js实现开启密码大写提示
Dec 21 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
小程序实现文字循环滚动动画
Jun 14 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
桌面中心(四)数据显示
2006/10/09 PHP
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python中return的返回和执行实例
2019/12/24 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
html5 input属性使用示例
2013/06/28 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
竞选部长演讲稿
2014/04/26 职场文书
志愿者事迹材料
2014/12/26 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
法定授权委托证明书
2015/06/18 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
Python中使用ipython的详细教程
2021/06/22 Python