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