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 相关文章推荐
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
js给table赋值的实例代码
Oct 13 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
详解Typescript里的This的使用方法
Jan 08 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 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
浅析Cookie中的Path与domain
2013/12/18 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
简介Django框架中可使用的各类缓存
2015/07/23 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python实现的Iou与Giou代码
2020/01/18 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
python怎么判断模块安装完成
2020/06/19 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
销售人员获奖感言
2014/02/05 职场文书
医德医风个人总结
2015/02/28 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书