JS继承与闭包及JS实现继承的三种方式


Posted in Javascript onOctober 15, 2017

前  言

在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 、 成员属性、静态属性、原型属性与JS原型链)。今天我们来继续探讨剩余的内容吧。

我们都知道,面向对象的三大特征——封装、继承、多态。 封装无非就是属性和方法的私有化,所以我们JS中提供了私有属性和私有方法。 而JS中并没有多态,因此我们说JS是一门基于对象的语言,而非面向对象的语言。 那么,面向对象三大特征中,在JS中最重要的就是继承了。

一、继承的基本概念

使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方法。

>>>继承的两方,发生在两个类之间。

所以,所谓的继承,无非就是让子类,拥有父类的所有属性和方法。那么,在JS中,我们要模拟实现这一步,有三种常用的方法可以实现。

分别是:扩展Object的prototype实现继承、使用call和apply实现继承、使用原型实现继承。

二、扩展Object的prototype实现继承

扩展Object实现继承的本质,是我们自己写了一个方法,将父类的所有属性和方法通过遍历循环,逐个复制给子类。

详细步骤如下:

1:定义父类

functionParent(){}

2:定义子类

funtion Son(){}

3:通过原型给Object对象添加一个扩展方法。

Object.prototype.customExtend =function(parObj){
for(variinparObj){//通过for-in循环,把父类的所有属性方法,赋值给自己
this[i] =parObj[i];
}
}

4:子类对象调用扩展方法

Son.customExtend(Parent);

三、使用call和apply实现继承

首先,要使用这种方式显示继承,我们再来回顾一下call和apply两个函数的作用:

call和apply:通过函数名调用方法,强行将函数中的this指向某个对象;

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

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

那么,我们使用这两个函数实现继承的思路就是:在子类中,使用父类函数调用call或apply,并将父类的this,强行绑定为子类的this。 那这样,父类绑定在this上的属性和方法,不就顺利成章的绑定到子类的this上了吗?

详细步骤如下:

1:定义父类

funtion Parent(){}

2:定义子类

functionSon(){}

3:在子类中通过call方法或者apply方法去调用父类。

functionSon(){
Parent.call(this,....);//将父类函数中的this,强行绑定为子类的this}

四、使用原型实现继承

使用原型实现继承,是比较简单而且比较好理解的一种,就是将子类的prototype指向父类的对象就可以啦。

详细步骤如下:

1:定义父类

functionParent(){}

2:定义子类

functionSon(){}

3:把在子类对象的原型对象声明为父类的实例。

Son.prototype =newParent();

五、闭包

要理解闭包,首先,我们要了解一下JS中的作用域:

1、JS中的作用域

全局变量:函数外声明的变量

局部变量:函数内声明的变量

在JS中,函数为唯一的局部作用域,而if、for等其他{}没有自己的作用域

所以,函数外不能访问局部变量。其实,变量在函数执行完毕以后,占用的内存就会被释放。

2、闭包

在概述中,我刚刚提到,面向对象的三大特征中的“封装”,我们可以用函数的私有属性来实现。这个私有属性,其实也就是局部变量。

但是我们都知道,封装是限制外部的访问,并不是直接拒绝外部的访问,那么我们在函数中私有的属性,怎么才能在外部访问呢?答案就是闭包!

JS中,提供了一种"闭包"的概念:在函数内部,定义一个子函数,可以用子函数访问父函数的私有变量。执行完操作以后,将子函数通过return返回。

代码示例:

functionfunc2(){varnum = 1;functionfunc3(){varsum = num+10;
alert(sum);
}returnfunc3;
}varf =func2();
f();

3、闭包的作用:

① 访问函数的私有变量;

② 让函数的变量始终存在于内存中,而不被释放。

4、闭包的典型应用

我们来做这样一个功能:页面中有6个li,要求实现点击每个li,弹出这个li对应的序号。

HTML代码很简单:

那JS代码呢?我觉得很大一部分同学会这样写:

varlis = document.getElementsByTagName("li");for(vari=0;i
lis[i].onclick=function(){
alert("您/点击了第"+i+"个li!");
}

那么,这样对吗?不对!!!我们来分析一下:页面加载的时候,JS代码会全部执行,也就是上面的for循环在页面加载完就已经执行完了!那,这个i就已经变成了lis.length。也就是说,你在点击li的时候,无论点击第几个,弹出的都是lis.length。

那么,我们应该怎么修改呢?看代码!

varlis = document.getElementsByTagName("li");for(vari=0;i
lis[j].onclick=function(){
alert("您/点击了第"+j+"个li!");
}
}();
}

区别在哪?明眼人一眼就看穿我们在for循环外面嵌套了一层自执行函数!这种函数套函数的形式,就形成了闭包!

那作用呢?我们刚才强调,闭包的自执行函数会有自己的作用域。在函数里面的代码没有执行的时候,自执行函数中的j是不会被释放掉的!

也就是说,循环转了6次!生成了6个独立的函数空间,每个空间中有自己独立的j变量,所以最终不会出现所有li点击都是lis.length的情况!

总结

以上所述是小编给大家介绍的JS继承与闭包及JS实现继承的三种方式,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 #Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 #Javascript
JS中的多态实例详解
Oct 15 #Javascript
vue跨域解决方法
Oct 15 #Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 #Javascript
详解 vue.js用法和特性
Oct 15 #Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 #jQuery
You might like
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
机器学习python实战之决策树
2017/11/01 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
如何基于Python实现数字类型转换
2020/02/07 Python
使用Django清空数据库并重新生成
2020/04/03 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
中秋节礼品促销方案
2014/02/02 职场文书
优秀老师事迹材料
2014/02/05 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android