通過(guò)js創(chuàng)建一個(gè)正方形
正方形
let square = {
width: 5,
getArea(){
return this.width * this.width
},
getLength(){
return this.width * 4
}
}
接下來(lái)需要多個(gè)正方形滨溉？
let squareList = []
let widthList = [5,6,6,6,5,6,6,5,5,6]
for(let i = 0; i < 12; i++){
squareList[i] = {
width: widthList[i],
getArea(){
return this.width * this.width
},
getLength(){
return this.width * 4
}
}
}
浪費(fèi)太多內(nèi)存
image.png
image.png
解決方法什湘，使用原型
let squareList = [];
let widthList = [5,6,5,6,5,6,5,6,5,6]
let squarePrototype = {
getArea(){
return this.width * this.width
},
getLength(){
return this.width * 4
}
}
for(let i = 0; i < 12; i++){
squareList[i] = Object.create(squarePrototype)
squareList[i].width = widthList[i]
}
image.png
抽離到函數(shù)
let squareList = []
let widthList = [5,6,5,6,5,6,5,6,5,6]
function createSquare(width){
let obj = Object.create(squarePrototype)
obj.width = width
return obj
}
let squarePrototype = {
getArea(){
return this.width * this.width
},
getLength () {
return this.width*4
}
}
for(let i = 0; i < 12; i++){
squareList[i] = createSquare(widthList[i])
}
函數(shù)和原型結(jié)合
let squareList = [];
let widthList = [5,6,5,6,5,6,5,6,5,6]
function createSquare(width){
let obj = Object.create(createSquare.squarePrototype)
obj.width = width
return obj
}
createSquare.squarePrototype = {
getArea(){
return this.width * this.width
},
getLength () {
return this.width * 4
},
constructor: createSquare
}
for(let i = 0; i < 12; i++){
squareList[i] = createSquare(widthList[i])
console.log(squareList[i].constructor)
}
使用new操作符號(hào)
let squareList = [];
let widthList = [5,6,5,6,5,6,5,6,5,6];
function Square(width){
this.width = width
}
Square.prototype.getArea = function(){
return this.width*this.width
}
Square.prototype.getLength = function(){
return this.width*4
}
for(let i = 0; i < 12; i++){
squareList[i] = new Square(widthList[i]);
console.log(squareList[i].constructor)
}
總結(jié)
new X()自動(dòng)做了四件事情
- 自動(dòng)創(chuàng)建空對(duì)象
- 自動(dòng)為空對(duì)象關(guān)聯(lián)原型，原型地址為X.prototype
- 自動(dòng)將空對(duì)象作為this關(guān)鍵字運(yùn)行構(gòu)造函數(shù)
- 自動(dòng)return this
構(gòu)造函數(shù) - 構(gòu)造函數(shù)本身負(fù)責(zé)給對(duì)象本身添加屬性
- x.prototype對(duì)象負(fù)責(zé)保存對(duì)象的共用屬性
代碼規(guī)范
1 大小寫(xiě)
- 所有構(gòu)造函數(shù)（專門(mén)用于創(chuàng)建對(duì)象的函數(shù)）首字母大寫(xiě)
- 所有被構(gòu)造出來(lái)的函數(shù)晦攒，首字母小寫(xiě)
2 詞性 - new 后面的函數(shù)闽撤，使用名詞形式
- 如new Person(), new Object()
- 其他函數(shù)，一般使用動(dòng)詞開(kāi)頭
- 如createSquare(5)脯颜、createElement('div')
如何確定一個(gè)對(duì)象的原型
為什么
- let obj = new Object()的原型是Object.prototype
- let arr = new Array() 的原型是Array.prototype
- let square = new Square() 的原型 Square.prototype
- let fn = new Function() 的原型是 Function.prototype
new操作符
- 自動(dòng)創(chuàng)建空對(duì)象
- 自動(dòng)為空對(duì)象關(guān)聯(lián)原型,原型地址指定為X.prototype
- 自動(dòng)將空對(duì)象作為this關(guān)鍵字運(yùn)行構(gòu)造函數(shù)
- 自動(dòng)return this
結(jié)論
你是誰(shuí)構(gòu)造的哟旗，你的原型就是誰(shuí)的prototype屬性對(duì)應(yīng)的對(duì)象
公式
對(duì)象.__proto__ === 構(gòu)造函數(shù).prototype 除了Object.prototype.__proto__ === null(true)
image.png
obj1 = new Object
obj1.__proto__ === Object.prototype
image.png
image.png
創(chuàng)建一個(gè)圓
function Circle(radius){
this.radius = radius
}
Circle.prototype.getLength = function(){
return this.radius*2*Math.PI
}
Circle.prototype.getArea = function(){
return radius ** 2 * Math.PI
}
對(duì)象分類
理由一
- 有很多對(duì)象擁有一樣的行為和屬性
- 需要把它們分為同一類
- 如square1和square2
- 創(chuàng)建類似的對(duì)象就會(huì)很方便
理由二
- 但是還是有很多對(duì)象擁有其他的屬性和行為
- 所以就需要不同的分類
- 比如Square/Circle/React就是不同的分類
- Array/Function也是不同的分類
- 而Object創(chuàng)建出來(lái)的對(duì)象，是最沒(méi)有特點(diǎn)的對(duì)象
類和類型
類型
- 類型是JS數(shù)據(jù)的分類栋操，有7種
- Number,String,Bool,Symbol,Null, Undefined, Object
類
- 類是針對(duì)于對(duì)象的分類闸餐，有無(wú)數(shù)種
- 常見(jiàn)有Array、Function讼庇、Date等
數(shù)組對(duì)象
定義了一個(gè)數(shù)組
- let arr = [1,2,3]
- let arr = new Array(2,3)//定義一個(gè)有2绎巨，3兩個(gè)元素的數(shù)組
-
let arr = new Array(3)//定義一個(gè)長(zhǎng)度為三的數(shù)組
image.png
當(dāng)以Array(3)會(huì)定義一個(gè)長(zhǎng)度為三的空數(shù)組，但是不會(huì)初始化值蠕啄。
let arr = new Array(1,2,3);
arr.push(4);
console.log(arr);
函數(shù)
定義一個(gè)函數(shù)
- function fn(x,y){return x+y};
- let fn2 = function fn(x, y){return x+y};
- let fn = (x, y) => x + y
- let fn = new Function('x', 'y', 'return x + y')
函數(shù)對(duì)象自身屬性
- 'name'/'length'
函數(shù)對(duì)象公有屬性
- 'call'/'apply'/'bind'
window
構(gòu)造
- Window
- 可以通過(guò)constructor屬性看出構(gòu)造者
window.Object 是誰(shuí)構(gòu)造出來(lái)的
- window.Function
- 因?yàn)樗泻瘮?shù)都是window.Function構(gòu)造出來(lái)的
window.Function 是誰(shuí)構(gòu)造出來(lái)的
- window.Function
- 所有函數(shù)都是window.Function構(gòu)造出來(lái)的
window.Function 是誰(shuí)構(gòu)造出來(lái)的
- window.Function
- 所有都是window.Function構(gòu)造出來(lái)的
- 瀏覽器構(gòu)造了Function场勤，然后指定了他的構(gòu)造者是自己
class
class Square{
width = 0//初始化
constructor(width){
this.width = width
}
getArea(){
return this.widh * this.width
}
getLength(){
return this.width*4
}
get area2(){// 只讀屬性
return this.width* this.width
}
}
