構(gòu)造函數(shù) - 重要 難點(diǎn)
- 提取函數(shù)到外部 實(shí)現(xiàn)了 多個(gè)實(shí)例共享一個(gè)函數(shù) （優(yōu)化內(nèi)存空間）
- 弊端 會(huì)污染全部變量
構(gòu)造函數(shù)
<script>
/*
1. 構(gòu)造函數(shù) 本質(zhì) 其實(shí)也是一個(gè)函數(shù)
2. 作用 用來創(chuàng)建對(duì)象
3. 以前見過構(gòu)造函數(shù)
1 Set 構(gòu)造函數(shù)
2 Array 構(gòu)造函數(shù)
3 Object
4 Strinf
5 Number
6 Boolean
7 Date
4. 只要他被 new 它 就是構(gòu)造函數(shù)
5. Person 構(gòu)造函數(shù) 首字母是大寫 (規(guī)范)
6. per 被new 出來的對(duì)象 稱之為 實(shí)例!!!
*/
function person (){}
// person 就是一個(gè)構(gòu)造函數(shù) 被new
const per = new person()
console.log(per);
</script>
構(gòu)造函數(shù)和this
<script>
// 每一個(gè)構(gòu)造函數(shù)中 都存在 有一個(gè) 魔鬼 this
// 構(gòu)造函數(shù) 默認(rèn)情況下 就是返回了 this
// this 等于你所new出來的實(shí)例 per
// 只要給構(gòu)造函數(shù)中的this 添加 屬性或者方法
// 那么 實(shí)例 自然擁有對(duì)應(yīng)的屬性和方法
function Person() {
this.username = '悟空'; // per也增加了一個(gè)屬性
this.add=()=>{};
this.clear=()=>{};
}
const per = new Person();
per.username = '悟空';
const per2 = new Person();
console.log(per);
console.log(per2);
</script>
構(gòu)造函數(shù) - 弊端
<script>
function Person() {
this.say = function () {};
}
const p1 = new Person();
const p2 = new Person();
console.log(p1 === p2); // 兩個(gè)對(duì)象的比較 內(nèi)存地址 false
console.log(p1.say === p2.say);// false 兩個(gè)函數(shù) 存放在不同地址中
// const s1 = new Set();
// const s2 = new Set();
// console.log(s1 === s2);// false
// console.log(s1.add === s2.add); // true
// s1 和 s2 共享一個(gè)方法
// p1 和 p2 沒有共享一個(gè)
</script>
對(duì)象在堆中情況
<script>
const obj1 = { username: '八戒' };
const obj2 = { username: '八戒' };
// console.log(obj1===obj2);// false 內(nèi)存中的地址
const obj3 = obj2;
// console.log(obj3 === obj2); // true
obj3.username="悟空";
console.log(obj2);
</script>
構(gòu)造函數(shù)-方法指向同一個(gè)
<script>
function say() {
console.log('外部單獨(dú)的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 值類型 是存在 棧空間 適合存放 固定大小的數(shù)據(jù)
2 引用類型（對(duì)象、數(shù)組、函數(shù)） 存在 堆空間 適合存放大小不固定的數(shù)據(jù)
3 new了兩個(gè)對(duì)象的時(shí)候， 兩個(gè)對(duì)象的內(nèi)存地址 不相等
4 我們希望 兩個(gè)對(duì)象的方法 內(nèi)存地址是相等?。。?
1 在構(gòu)造函數(shù)中 當(dāng)我們定義方法的時(shí)候 一般都不會(huì)只在在 構(gòu)造函數(shù)中寫死
讓我們方法 都指向外部 單獨(dú)聲明的方法 多個(gè)實(shí)例去共享方法！??！
*/
const obj1={username:"悟空"};
const obj2={username:"悟空"};
const obj3=obj2;
obj3.username="八戒";
console.log(obj2);
</script>
構(gòu)造函數(shù)的基本使用
<script>
// 構(gòu)造函數(shù)的方式 創(chuàng)建一個(gè)對(duì)象
// 姓名 屬性
// 說出自己的姓名 方法
function say() {
console.log('這個(gè)是Person的一個(gè)方法', 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 構(gòu)造函數(shù)的時(shí)候 屬性 分成了兩種
1 函數(shù)類型的屬性
一般都是寫在外部?。?！
2 非函數(shù)類型的屬性
一般是寫在內(nèi)部?。。?
*/
</script>
構(gòu)造函數(shù)的使用演示
<body>
<button>減少一根</button>
<script>
/*
1 有一個(gè)構(gòu)造函數(shù) Person
2 有數(shù)字類型的屬性 發(fā)量 hair =100
3 有行為 decrease 減少 方法
發(fā)量 - 1
4 按鈕 每點(diǎn)擊一次 發(fā)量減少一根
*/
// 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 () {
// 每點(diǎn)擊一次按鈕 new一個(gè)對(duì)象
p1.decrease();
console.log(p1.hair);
});
</script>
</body>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
