Javascript面向物件——創建物件、建構式的原型
其實：JavaScript中的創建類，就是創建一個建構式，在創建物件時用到new這個關鍵字，
一、創建物件
1.函式創建物件
function creatObj(name,age){
//手動創建一個物件
var obj={}
//為物件添加屬性
obj.name=name
obj.age=age
obj.sayHi=function(){
console.log("hello world!")
}
//回傳物件
return obj
}
//呼叫方法創建不同物件
var obj1=creatObj("小明",18)
var obj2=creatObj("小花",20)
2.自定義建構式創建物件
建構式使用
1、建構式和普通函式沒有區別，只是在呼叫是和new一起使用
2、書寫建構式時，函式首字母大寫
? =>當看到首字母大寫時就知道要用new關節字去呼叫
3、呼叫時要用new關鍵字
? =>如果沒有就不會自動創建物件、不會自動回傳物件，也不能用this
function CreatObj(name,age){ //建構式首字母大寫
//自動創建一個物件
//為物件添加屬性
this.name=name //this代表了指向呼叫的物件
this.age=age
this.什么=什么
this.obj.sayHi=function(){
console.log("hello world!")
}
//自動回傳物件
}
//呼叫方法創建不同物件
var obj1=new creatObj("小明",18) //加了一個new
var obj2=new creatObj("小花",20)
二、建構式的原型（prototype）
定義：每一個函式天生自帶的屬性，叫做prototype，是一個物件
? =>既然prototype是一個物件，我們就可以使用操作物件的語法，向里面添加內容
作用：當函式里面沒有想呼叫的屬性或方法時，就會去函式的原型里面去找，
不合理性：如果把方法直接寫在函式體里面時（如上一個例子所示），每創建一個物件時都會從新創建一個方法，（造成資源浪費）
解決辦法：使用函式原型，如果把方法放在原型里面后，不同物件創建的方法都是同一個方法，
//格式：建構式.prototype.方法名=function(){ }
//為Creatobj的原型添加方法
Creatobj.prototype.sayHi=function(){
consle.log("hello world!")
}
function Creatobj(name,age){ //建構式首字母大寫
//自動創建一個物件
//為物件添加屬性
this.name=name //this代表了指向呼叫的物件
this.age=age
this.什么=什么
//自動回傳物件
}
//呼叫方法創建不同物件
var obj1=new creatObj("小明",18) //加了一個new
var obj2=new creatObj("小花",20)
//呼叫Creatobj里原型的方法
obj1.sayHi() //可以正常呼叫
1.物件自帶的方法（__proto__）
概念：每個物件天生自帶屬性__proto__，指向建構式是prototype，當訪問物件成員時先在自己身上找不到再去找__proto__
//建構式
function Person(){
}
//給Person的原型賦值
Person.prototype.a=100
Person.prototype.say=function(){
console.log("hello")
}
//創建兩個物件
var p1=new Person()
var p2=new Person()
//判斷物件的里
console.log(p1.__proto__===Person.prototype)
console.log(p2.__proto__===Person.prototype)
//結果都為true，
//說明所有物件使用同一個原型
2.原型鏈
原型鏈概念：
1、用__proto__ 串聯起來的物件鏈狀結構
2、每一個物件型別都有一個屬于自己的原型鏈
3、作用：為了訪問物件成員
訪問機制
當你需要訪問物件的成員的時候
首先在自己身上查找，如果有直接使用
如果沒有，會自動去__proto__ 上查找
如果還沒有，會再去__proto__ 上查找
直到objiect.prototype都沒有，那么回傳undefined
//建構式
function Person(){
}
//給Person的原型賦值
Person.prototype.a=100
Person.prototype.say=function(){
console.log("hello")
}
//創建兩個物件
var p1=new Person()
var p2=new Person()
看上面代碼回答問題
問題1：實體物件的 __proto__ 指向誰？
=>指向所屬建構式的原型prototype
=>p1 所屬的建構式是Person
=>p1. __proto__ 指向Person的prototype
問題2：Person.prototype的 __proto__ 指向誰？
=>Person.prototype所屬的建構式是誰？
=>Person.prototype是個物件資料型別（Object）
=>在JS里所有的Object資料型別都是屬于Object這個內置建構式的
=>Person.prototype的 __proto__ 指向Object.prototype
問題3：Person的 __proto__ 指向誰的？
=>Person是個函式，函式本身就是一個物件，就會有 __proto__
=>在JS里所有的函式都是屬于Function這個內置建構式的實體
=>Person. __proto__的 指向Function.prototype
問題4：Objiect.prototype的 __proto__ 指向誰的？
=>Objiect.prototype是個物件資料型別，所有的物件都是屬于Object這個內置建構式的，
=>注意：Objiect.prototype在JS中是頂級原型，是沒有 __proto__
=>Objiect.prototype的 __proto__ 指向null
問題5：Objiect的 __proto__ 指向誰的？
=>Objiect是個內置建構式，同時是一個函式，也是一個物件
=>在JS里所有的函式都是屬于Function這個內置建構式的實體
=>Objiect的 __proto__ 指向Function.prototype
問題6：Function.prototype的 __proto__ 指向誰的？
=>Function.prototype是物件資料型別
=>在JS里所有的物件都是屬于Object這個內置建構式的實體
=>Function.prototype的 __proto__ 指向Object.prototype
問題7：Function的 __proto__ 指向誰的？
=>Function是個內置建構式，同時是一個函式，也是一個物件
=>在JS里所有的函式都是屬于Function這個內置建構式的實體
=>Fanction 自己是自己的建構式
=>Fanction 自己是自己的實體物件
=>Function的 __proto__ 指向Function
本文來自博客園，作者：永恒之月TEL，轉載請注明原文鏈接：https://www.cnblogs.com/akc4/p/15818795.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/415294.html
標籤：JavaScript
上一篇：通過HTML+CSS+JavaScript實作滑鼠移動到頁面頂部導航欄出現，如果移出導航欄3秒又隱藏起來，而且不受滾動條影響（二）