构造函数 - 重要 难点
- 提取函数到外部 实现了 多个实例共享一个函数 （优化内存空间）
- 弊端 会污染全部变量
构造函数
<script>
/*
1. 构造函数 本质 其实也是一个函数
2. 作用 用来创建对象
3. 以前见过构造函数
1 Set 构造函数
2 Array 构造函数
3 Object
4 Strinf
5 Number
6 Boolean
7 Date
4. 只要他被 new 它 就是构造函数
5. Person 构造函数 首字母是大写 (规范)
6. per 被new 出来的对象 称之为 实例!!!
*/
function person (){}
// person 就是一个构造函数 被new
const per = new person()
console.log(per);
</script>
构造函数和this
<script>
// 每一个构造函数中 都存在 有一个 魔鬼 this
// 构造函数 默认情况下 就是返回了 this
// this 等于你所new出来的实例 per
// 只要给构造函数中的this 添加 属性或者方法
// 那么 实例 自然拥有对应的属性和方法
function Person() {
this.username = '悟空'; // per也增加了一个属性
this.add=()=>{};
this.clear=()=>{};
}
const per = new Person();
per.username = '悟空';
const per2 = new Person();
console.log(per);
console.log(per2);
</script>
构造函数 - 弊端
<script>
function Person() {
this.say = function () {};
}
const p1 = new Person();
const p2 = new Person();
console.log(p1 === p2); // 两个对象的比较 内存地址 false
console.log(p1.say === p2.say);// false 两个函数 存放在不同地址中
// const s1 = new Set();
// const s2 = new Set();
// console.log(s1 === s2);// false
// console.log(s1.add === s2.add); // true
// s1 和 s2 共享一个方法
// p1 和 p2 没有共享一个
</script>
对象在堆中情况
<script>
const obj1 = { username: '八戒' };
const obj2 = { username: '八戒' };
// console.log(obj1===obj2);// false 内存中的地址
const obj3 = obj2;
// console.log(obj3 === obj2); // true
obj3.username="悟空";
console.log(obj2);
</script>
构造函数-方法指向同一个
<script>
function say() {
console.log('外部单独的say方法');
}
function Person() {
this.say = say;
}
const p1 = new Person();
const p2 = new Person();
console.log(p1 === p2); // false
console.log(p1.say === p2.say);// true
/*
1 值类型 是存在 栈空间 适合存放 固定大小的数据
2 引用类型（对象、数组、函数） 存在 堆空间 适合存放大小不固定的数据
3 new了两个对象的时候， 两个对象的内存地址 不相等
4 我们希望 两个对象的方法 内存地址是相等！！！
1 在构造函数中 当我们定义方法的时候 一般都不会只在在 构造函数中写死
让我们方法 都指向外部 单独声明的方法 多个实例去共享方法！！！
*/
const obj1={username:"悟空"};
const obj2={username:"悟空"};
const obj3=obj2;
obj3.username="八戒";
console.log(obj2);
</script>
构造函数的基本使用
<script>
// 构造函数的方式 创建一个对象
// 姓名 属性
// 说出自己的姓名 方法
function say() {
console.log('这个是Person的一个方法', this.name);
}
function fly() {
console.log(this.name, '要起飞');
}
function Person(name, height) {
this.name = name;
this.height = height;
this.say = say;
this.fly = fly;
}
const p1 = new Person('八戒', 150);
// p1.say();
p1.fly();
/*
1 构造函数的时候 属性 分成了两种
1 函数类型的属性
一般都是写在外部！！！
2 非函数类型的属性
一般是写在内部！！！
*/
</script>
构造函数的使用演示
<body>
<button>减少一根</button>
<script>
/*
1 有一个构造函数 Person
2 有数字类型的属性 发量 hair =100
3 有行为 decrease 减少 方法
发量 - 1
4 按钮 每点击一次 发量减少一根
*/
// 1.
// function decrease() {
// this.hair--;
// }
// 2. 原型 prototype
Person.prototype.decrease = function() {
this.hair--;
}
function Person() {
this.hair = 100;
// this.decrease = decrease;
}
const btn = document.querySelector('button');
const p1 = new Person();
btn.addEventListener('click', function () {
// 每点击一次按钮 new一个对象
p1.decrease();
console.log(p1.hair);
});
</script>
</body>
