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 相关文章推荐
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 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
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
12个超实用的JQuery代码片段
2015/11/02 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
TensorFlow神经网络优化策略学习
2018/03/09 Python
python list格式数据excel导出方法
2018/10/31 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Linux如何压缩可执行文件
2014/03/27 面试题
研究生自荐信
2013/10/09 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
入股协议书范本
2014/11/01 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
python tqdm用法及实例详解
2021/06/16 Python
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android