javascript实现面向对象编程_this_模块导入

 

大家好,我是一个游戏开发的初学者,非常高兴可以跟大家分享自己所学的知识,这是我第一次写博客,这里要说明下的是我写博客的目的除了是为通过有效输出巩固自己的知识体系另一个也是为了可以让大家可以监督自己的学习(本人是一个自律性极差的人),所以在这里我会不定期的分享一些知识供大家学习参考,由于是初学所以在文章中也许会有一些知识错误一些知识点也写得不够清晰,所以也烦请各位大佬可以批评和指正......

导入模块

在js中每一个js文件都称之为一个js代码模块,我们在开发项目中不可能全部写在一个js文件中,在编程过程中我们通常都会有一个main文件做为主文件来调用其他不同的代码文件,而在Javascript中如果代码散落在其他的地方我们应该怎么做呢?那我们就可以通过module.exports和require这两个关键字来实现

我们直接上个例子:

先创建两js文件->main.js和test.js

Ok,运行成功,这里可以看到我们通过module.exports接收了func函数然后在main.js通过require导入test.js模块漏入到了这个函数,也就是说我们可以把module.exports理解为一个变量一样的东西它可以接收函数、表、数组等对象,然后其他js模块就能通过require来获取这个函数、表或数组,注意在第一次require其他模块的时候首先会执行一次这个js文件:

在注意上面导入js文件前面的”./”,这说明是导入当目录文件下的js文件,”../”就是导入上上级目录文件,同理既然可以使用相对路径那就也能使用绝对路径

this

在js中我们经常要用到一个东西àthis,它一般用于在函数指向一些实例或函数等,而this有三种绑定指向的方式:隐式绑定、显示绑定、强制绑定。

隐式绑定:

在隐式绑定中函数中this是指向调用这个函数的对象,在这里创建了一个表对象xiaohong,里面包含了两个key:name和test_func函数,我们直接通过xiaohong调用里面的test_func函数来打印它的this:

运行成功后直接显示xiaohong这个表对象中的内容,所以说可以理解为在这里隐式的将实例对象当作this传递给函数,。

 

强制绑定:

 

在这里我们直接通过在函数后面bind()来传递实例对象做为它的this,但如果在这个实例对象后面再bind()

它就会报一坨这样的东西,为什么?因为如果在func后面bind这个实例就会重新生成一个新的函数而不是在原来的函数基础上进行绑定,但如果重新用这个函数来接住这个bind(xiaohong)就可以传递这个实例。

显式传递:

我们可以通过call来实现,在这里为了区别先注释掉上面的传递给this的代码重新写一个func并运行(call的使用方法这里便不赘述)。

最后要注意的是在三种传递作为this的方法中优先级:强制>显示>隐式。

 

New、prototype、__proto__

Ok,简单的知道this和导入模块的使用方式后我们就开始主要的内容:实现面向对象编程。实际上在js中并不存在真正的实现面向对象的方法,但由于其语言的特性我们可以通过function+prototype来模拟实现面向对象的模式,在javascript中每个函数里面都有一个隐藏的成员变量prototype。我们可以通过“函数.prototype.”的方式来扩充这个函数的属性和方法,我们写一个func_temp函数然后通过prototype扩充它的方法并运行

结果打印出它prototype中的函数,而在实例对象中每一个都有一个__proto__的隐藏的成员变量用来指向所调用函数中的prototype里面的key和value

运行后就能看到实例出的对象data中的__proto__里的值就是所func_temp中的prototype。在里面仔细看下我们会发现一个新的关键词new,它的作用就是可以通过构造函数实例化一个新的对象,这个对象里的值就是构造函数中的值,那么它的实现原理是怎样的呢?

首先我们会先创建一个新的表,然后将表的__proto__对函数prototype进行一次浅复制,再将这个表的实例作为this,传递给后面的函数,然后再来调用后面new的这个函数。

这里主要的是浅复制,什么是浅复制?我们直接通过代码来看看:

我们新var一个对象num,将func_temp的prototype复制到new的prototype中没有问题

但如果我再在new的prototype里添加函数时就会发现原来func_temp中的prototype也被添加了这个函数,这说明num和func_temp一起共享了这个函数,所以在一般情况下我们不能直接这样复制函数的prototype,那怎么才能复制其他函数的prototype呢?

我们就可以通过new进行一次浅复制来继承这个基类的方法,所以我们就可以通function的prototype+new的方式来实现面向对象中的类的继承

发布了11 篇原创文章 · 获赞 5 · 访问量 2698

猜你喜欢

转载自blog.csdn.net/qq_37872192/article/details/89061115