01-构造函数-原型对象(利用原型挂载解决内存占用问题)
构造函数链接:构造函数解决内存占用问题方法之一
<body>
<script>
// 解决内存占用问题
function CreateTeacher(name, age) {
this.name = name
this.age = age
}
// 将为函数的属性:挂载到原型对象上
CreateTeacher.prototype.say = function () {
console.log(`我是${this.name},我今年${this.age}岁`)
}
let t1 = new CreateTeacher('小白', 30)
let t2 = new CreateTeacher('前端', 50)
t1.say()
t2.say()
console.log(t1, t2)
// 证明:两个say不占用内存
console.log(t1.say === t2.say) // true
</script>
</body>
02-构造函数-原型对象(含义解释)
<body>
<script>
// 原型对象:只要是个函数,系统一定会为函数 自动 产生一个对象:原型对象prototype
// 函数如何找到自己的原型对象呢?
// 函数名.prorotype
function a() { }
console.log(a.prototype)
// 原型对象中默认只有一个属性:constructor,指向所在的构造函数
// 构造函数:男人
// 男人找女人:男人.prototype
// 原型对象:系统分配的女人
// 女人找男人:constructor
// 一对一关系:证明
console.log(a.prototype.constructor == a) // true
// 原型对象是一个对象:对象是否可以添加属性?且非常安全
// 男人.女人.新增属性 = 新的属性值
// 构造函数.prototype.属性名 = 值
a.prototype.say = function () {
console.log('我是要成为海贼王的男人')
}
// 原型对象中的方法:给对象用,构造函数产生的对象
let objA = new a()
objA.say()
// 对象的原型对象(__proto__) === 构造函数的原型对象(prototype)
console.log(objA.__proto__ === a.prototype) // true
// 总结
// 1. 是函数一定会有原型对象:系统产生
// 2. 函数如何找到原型对象:函数名.prorotype
// 3. 原型对象中默认有一个属性:constructor,指向构造函数本身
// 4. 构造函数的作用:new产生对象,产生的对象与构造函数没有直接关联(间接有)
// 5. 构造函数产生对象可以通过__proto__找到原型对象
// 以上就是原型的三角关系
// 解决的问题
// 1. 原型对象只有1个:将方法存储到原型对象中,占用一份内存
// 2. 原型对象是对象:方法存在对象里面不存在覆盖问题,与全局隔离:安全
</script>
</body>