Set對象
是一個對象
存放的數(shù)據(jù)不會重復
可以理解為不重復的數(shù)組
Set 對象 需要被 new 出來使用
數(shù)組轉Set對象
const set = new Set([1,2,3])
Set對象轉數(shù)組
const arr = [...Set]
Set對象add方法
set.add(123)
// Set 對象 需要被 new 出來使用
const set = new Set()
// 存放數(shù)據(jù) 用add方法
set.add(1)
set.add(2)
set.add(3)
set.add(3)
set.add(2)
set.add(2)
console.log(set) // {1,2,3}
// 把 set對象 轉成數(shù)組
const arr = [...set]
// 數(shù)組轉 Set對象
const set2 = new Set(arr)
console.log(arr) //[1,2,3]
console.log(set2) //{1,2,3}
面向對象
項目級別代碼的思維
特征: 封裝 繼承
創(chuàng)建對象的方式
字面量
- 不適合創(chuàng)建多個同樣類型的對象的場景
- 不方便維護 修改
const obj ={ name:"悟空",height:100,age:5000};
工廠函數(shù)
失去
血緣關系,無法簡單分辨對象的特征封裝
-
無法繼承
function p(name,a,b,c,d,e) { return { nickname:name, a,b,c,d,e } } function person(name, height,a,b,c,d,e) { return { nickname: name, height, a,b,c,d,e }; }
構造函數(shù)
可以方便的創(chuàng)建對象
方便后期維護修改
函數(shù)提取到外部,多個實例共享一個函數(shù)(優(yōu)化內存空間)
-
弊端: 污染全局變量
function createStudent(name, age) { this.name = name; this.age = age; this.say = function () { console.log(this.name); } } const obj = new createStudent("悟能", 83); const obj1 = new createStudent("悟能1", 84); console.log(obj.say === obj1.say); // false 不是同一say方法 浪費了內存[圖片上傳失敗...(image-6d5605-1652531679819)]
構造函數(shù) + 原型
- 最為主流的解決方案
構造函數(shù)
本質是一個函數(shù)
名稱規(guī)范 首字母大寫
作用: 用來創(chuàng)建對象
-
創(chuàng)建出來的對象叫 實例
function Preson() { } const pre = new Preson() //Preson()就是構造函數(shù) pre 就是實例 內部會默認返回this
this等于一些被new的實例
this
構造函數(shù)中 都存在一個 this
構造函數(shù) 默認情況下 返回的是this
this 等于 new出來的實例
只要給構造函數(shù)中的this 添加 屬性或方法 實例就擁有對應的屬性和方法
function Preson() {
this.username = '八戒'
this.add = () => {}
}
const per = new Preson()
per.height = 100
const per2 = new Preson()
console.log(per)
console.log(per2)
給實例添加屬性的方法
- 非函數(shù)類型的屬性 添加在構造函數(shù)內部
- 函數(shù)類型的屬性 添加在原型上 在原型上的屬性通過this來訪問到 在構造函數(shù)中定義的屬性
原型
- 原型本質是個對象 在創(chuàng)建構造函數(shù)的時候就有
- 在原型上添加一些方法 可以直接 被實例 使用 和共享
[圖片上傳失敗...(image-58cd9d-1652531679819)]
小案例
function Person() {
this.hair = 100
// this.decrease = decrease
}
// 在原型上添加方法
Person.prototype.decrease = function decrease() {
this.hair--
}
const p1 = new Person()
const btn = document.querySelector('button')
btn.addEventListener('click',function () {
p1.decrease()
console.log(p1.hair)
})
