JavaScript笔记(2) 构造函数和原型
昨天又独自把案例做了一遍,还是有点小错误出现的,但是大体上比较顺利,感觉还是逻辑比较重要,先把思路整理好再开始做会比较好.
构造函数和原型
目标:
这些之前都学过的我就不多赘述了,直接将图片贴上来了
JavaScript的构造函数中可以添加一些成员,可以在构造函数本身上添加,也可以在构造函数内部的this上添加.通过这两种方式添加的成员,就分别称为静态成员和实例成员
- 静态成员: 在构造函数本身添加的成员称为静态成员,只能由构造函数本身来访问
- 实例成员: 在构造函数内部创建的成员称为实例成员,只能由实例化的对象来访问
现在写一个例子来认识这两种成员
(偷偷换了个主题哦)
构造函数很好用,但是存在浪费内存的问题:
分别有两个对象,但是这两个对象里的同一个方法却都开辟了新的内存空间,这不仅浪费内存也浪费时间,而且这两个方法指向的是不同的地址,这十分不合理,我们希望的是所有对象都使用的是同一个函数,那么要怎么做呢?
构造函数原型prototype
构造函数通过原型分配的函数是所有对象所共享的.
JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象.注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有.
我们用console.dir()打印一下这个构造函数(console.dir()可以显示一个对象所有的属性和方法。)
可以看到prototype里面有一个原型对象
我们可以把那些不变的方法,重新定义在prototype对象上,这样所有对象的实例就可以共享这些方法.
没使用原型对象之前:
因为两个对象指向的函数是不同的地址,所以是false.
使用了prototype以后:
一般情况下,我们的公共属性(简单数据类型)定义到构造函数里面,公共的方法(复杂数据类型)我们放到原型对象身上
可能我们还会有疑惑,我们的sing方法是放在了原型prototype上,为什么对象可以使用这个方法呢?
对象原型__proto__
对象都会有一个属性__proto__指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有__proto__原型的存在
我们打印一下ldh对象:
可以看到ldh对象是有__proto__这个属性的,而__proto__这个属性指向的是prototype这个原型对象,然而原型对象身上是有这个方法的,自然就能使用这个方法了.
- __proto__对象原型和prototype是等价的
分析:
- prototype 原型对象
- __proto__ 对象的原型
- __proto__对象原型的意义在于为对象的查找机制提供一个方向,或者说一条线路,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype.
constructor构造函数
对象原型和构造函数的原型对象里面都有一个属性constructor属性,constructor我们称为构造函数,因为它指回构造函数本身
如果我们直接打印Star.prototype.constructor,那么就是构造函数本身
很多情况下,我们需要手动的利用constructor这个属性指回原来的构造函数
这个时候就出问题了
这是因为原先的方法用的是".",相当是在这个对象上添加方法;但是我们现在用的是"=",也就是赋值的方法,自然就把Star.prototype给覆盖掉了.
所以现在我们做一步操作,手动利用constructor指回原来的构造函数
构造函数,原型对象,实例之间的关系
说到底这一节听懵逼的,晚点查查资料,明天继续,晚上复习
相关文章
- 《JavaScript设计模式》初次笔记——wsdchong[通俗易懂]
- JavaScript笔记(14)
- JavaScript笔记(16)之事件高级
- 【学习笔记】JavaScript
- JavaScript学习总结(九)——Javascript面向(基于)对象编程详解编程语言
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- 《JavaScript DOM编程艺术》学习笔记(三)详解编程语言
- 一些常用的Javascript函数
- javascript动画效果打开/关闭层
- JavaScript学习笔记(四)
- JavaScript学习笔记(十)
- JavaScript高级程序设计事件学习笔记
- JavaScript高级程序设计错误处理与调试学习笔记
- javascript学习笔记(六)Date日期类型
- javascript学习笔记(八)js内置对象
- JavaScript高级程序设计阅读笔记(十九)js表格排序
- JavaScript高级程序设计阅读笔记(二十一)JavaScript中的XML
- JavaScript高级程序设计(第3版)学习笔记11内建js对象
- Javascript自定义排序node运行实例
- 常用的几段javascript代码分享
- JavaScript基础知识学习笔记
- javascript使用正则表达式检测IP地址
- JavaScript实现的一个日期格式化函数分享
- JavaScript利用正则表达式去除日期中的“-”
- Javascript基础教程之比较操作符