最近在学习JavaScript面向对象编程,看了好多文章(参考较多的是阮一峰老师的文章),现在把学到的知识做一个归纳总结,方便以后随时复习,也希望帮助到学习这部分知识的小伙伴!JavaScript 面向对象编程学习笔记(一):封装

一、创建对象的原始模式(通过对象字面量方式来创建对象)

我们把狗狗看成一个对象,它有名字和颜色两个属性:

JavaScript 面向对象编程学习笔记(一):封装
接下来,我们需要根据上面这个原型对象的规格,生成两个实例对象:

JavaScript 面向对象编程学习笔记(一):封装

ok,以上就是简单的封装,把连个属性封装在一个对象里面。不过,这样的写法有两个缺点,一是如果需要生成N个实例,则学起来就比较麻烦。二是在实例和原型之间,看不出有任何的联系。


二、对上面原始模式的改进

我们可以先写一个函数,解决代码重复的问题。

JavaScript 面向对象编程学习笔记(一):封装

然后生成实例对象,就相当于调用函数。

JavaScript 面向对象编程学习笔记(一):封装

这种写法仍然存在一个问题,那就是仍然看不出dog1和dog2之间的联系,看不出它们是同一原型对象的实例。


三、构造函数模式

所谓的构造函数,实际上就是一个普通那个函数,只是内部使用了this变量,对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

比如,狗狗的原型对象现在可以这样写:

JavaScript 面向对象编程学习笔记(一):封装

接下来就可以生成实例对象了:

JavaScript 面向对象编程学习笔记(一):封装

此时,dog1dog2会自动包含一个constructor属性,指向它们的构造函数。

JavaScript 面向对象编程学习笔记(一):封装

JavaScript还提供了一个instanceof运算符,用来测试一个对象在其原型链中是否存在一个构造函数的prototype属性。

JavaScript 面向对象编程学习笔记(一):封装


四、构造函数模式的问题

构造函数虽然很好用,但是存在一个耗费内存的问题。

我们现在为dog对象添加一个不变的属性type(种类)和一个方法eat(吃)。那么原型对象就变成下面这种。

JavaScript 面向对象编程学习笔记(一):封装

还是采用同样的方法生成实例:

JavaScript 面向对象编程学习笔记(一):封装

这样写表面上没什么问题,但是,实际上有一个很大的弊端,那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。既不环保,也缺乏效率。

JavaScript 面向对象编程学习笔记(一):封装

其实,可以让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址。


五、prototype模式

Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继

这就意味着我们可以把那些不变的属性和方法,直接定义在prototype属性上。

JavaScript 面向对象编程学习笔记(一):封装

接下来,生成实例:

JavaScript 面向对象编程学习笔记(一):封装

这时所有的type属性和eat()方法,都是属于同一个内存地址,都只想prototype对象,因此提高了运行效率。

JavaScript 面向对象编程学习笔记(一):封装


六、prototype模式的验证方法

6.1  isProtptypeOf()  用来验证某个prototype对象和某个实例之间的关系

JavaScript 面向对象编程学习笔记(一):封装

6.2  hasOwnPropety()  用来判断一个属性到底是本地属性还是继承自prototype对象的属性

JavaScript 面向对象编程学习笔记(一):封装

6.3in运算符  用来判断某个实例是否含有某个属性,不管是不是本地属性

JavaScript 面向对象编程学习笔记(一):封装

in运算符还可以用来遍历某个对象的所有属性。

JavaScript 面向对象编程学习笔记(一):封装

运行结果:

JavaScript 面向对象编程学习笔记(一):封装

JavaScript 面向对象编程学习笔记(一):封装

JavaScript 面向对象编程学习笔记(一):封装

JavaScript 面向对象编程学习笔记(一):封装





























相关文章:

  • 2019-03-15
  • 2022-01-11
  • 2018-06-12
  • 2022-01-13
  • 2019-09-10
  • 2022-01-01
  • 2022-01-15
猜你喜欢
  • 2021-09-24
  • 2017-12-15
  • 2022-01-01
  • 2018-02-28
  • 2021-08-27
  • 2019-03-29
相关资源
相似解决方案