当前位置:首页 > 日记 > 正文

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

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

前  言

在之前的两篇博客中,我们详细探讨了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;ilis[i].onclick=function(){alert("您/点击了第"+i+"个li!");}

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

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

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

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

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

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

总结

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

相关文章

Vue中定义全局变量与常量的各种方

Vue中定义全局变量与常量的各种方

全局变量,常量,详解,定义,方式,前言本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都…

wps表格怎么使用函数wps表格的函数

wps表格怎么使用函数wps表格的函数

函数,使用教程,表格,电脑软件,wps,  由于函数采用模块化的设计,可以完成一定的功能,因此在WPS表格中具有广泛的应用。今天小编与各位新手一起分享一下WPS表格中函数的使用方法。希望对你有帮助!wps表格的函数使用教程选中要输入公式的单元格…

js es6系列教程 - 基于new.target

js es6系列教程 - 基于new.target

教程,语法,属性,系列,电脑软件,es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性function Person( uN…

PS合成非常高端的三维教堂PARTY海

PS合成非常高端的三维教堂PARTY海

教堂,海报,电脑软件,PS,PARTY,这篇教程教的PS图片合成学习者们使用PS合成高大上教堂PARTY海报,教程制作出来的海报非常漂亮,非常高端,乍一看很多人会以为是使用三维软件制作的,其实并不是,这都是通过PS找素材和合成的,推荐一下,喜欢的就给我好评啦…

ionic+AngularJs实现获取验证码倒

ionic+AngularJs实现获取验证码倒

验证码,倒计时,按钮,电脑软件,ionic,按钮功能为:点击“获取验证码”——按钮不可用-设置倒计时-60秒后重新获取。主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中。设置一个$timeout,60秒…

详解react如何在组件中获取路由参

详解react如何在组件中获取路由参

路由,参数,组件,详解,如何在,路由参数假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢?这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置。import List from './compo…

Word2013如何设置打印方向为横向Wo

Word2013如何设置打印方向为横向Wo

横向,方法,设置,如何设置,电脑软件,  要使用Word打印文件,打印的一般是纵向,但有时候需要横向的打印方式,这需要怎么才做呢?下面小编来告诉你怎么将Word2013设置打印方向为横向吧。希望对你有帮助!Word2013设置打印方向为横向的方法打开需要…

PPT2007幻灯片如何转换成网页进行

PPT2007幻灯片如何转换成网页进行

浏览,网页,幻灯片,转换成,电脑软件,  在播放幻灯片的时候都希望将其保存为演示文稿的形式进行播放,在ppt2007 中制作的幻灯片可以转换成网页进行网页式的浏览。以下是小编为您带来的关于PPT2007幻灯片转换成网页进行浏览,希望对您有所帮助…

关于JavaScript的单双引号嵌套问题

关于JavaScript的单双引号嵌套问题

嵌套,双引号,电脑软件,JavaScript,单引号和双引号之间可以相互嵌套。1、单引号内只能嵌套双引号。2、双引号内只能嵌套单引号。3、如果想在双引号内,再嵌套双引号,里面的双引号,一定要进行转义(\”)。4、JS中的转义字符是反斜杠(\).常用的转义…

详解Node中导入模块require和impor

详解Node中导入模块require和impor

模块,详解,区别,电脑软件,require,ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。不把require和impo…

一分钟制作水彩 | 水墨头像ps实例

一分钟制作水彩 | 水墨头像ps实例

水墨,实例教程,头像,电脑软件,ps,一分钟制作水彩(水墨)头像素材:水彩材质或水墨材质、头像技巧:通道选区、蒙版教程结束,以上就是一分钟制作水彩(水墨)头像ps实例教程的全部内容,希望大家喜欢!相关教程推荐:Photoshop制作精美的水彩狐狸头像PS水…

AI怎么绘制一款镂空立体感LOGO?

AI怎么绘制一款镂空立体感LOGO?

绘制,立体感,电脑软件,AI,LOGO,今天我们来看看使用AI绘制立体感LO,教程难度中等。主要介绍的是使用AI来刻画立体感和质感的方法。造型方面是比较简单的图形。学习之后相信对于您的标志设计会有非常大的帮助,我们先来看看最终的效果图吧:软件名…