什么是原型對(duì)象?

請(qǐng)看下面的代碼,我們以各種姿勢(shì),創(chuàng)建了幾個(gè)方法!

    function fn1() {
    }
    var fn2 = function () {
    }
    var fn3 = new Function()

    console.log(typeof fn1) //function
    console.log(typeof fn2) //function
    console.log(typeof fn3)  //function

    console.dir(fn1) //如下圖
    console.dir(fn2)//如下圖
    console.dir(fn3)//如下圖

Snipaste_2019-07-06_20-15-51.png

得出結(jié)論~記住,重點(diǎn)
function 對(duì)象有一個(gè)prototype屬性，使用new生成的對(duì)象就沒有這個(gè)prototype屬性。

(這里什么是proto,什么是原型鏈,我們放到后面再說,以防干擾思路)

那么原型對(duì)象有什么作用?

這里我們來(lái)復(fù)習(xí)一下自定義構(gòu)造函數(shù)~

   function Person(name, age) {
        this.name = name
        this.age = age
        this.eat = function () {
            console.log("吃飯")
        }
    }
    var per1 = new Person("小明", 18)
    var per2 = new Person("小紅", 20)
   
    console.log(per1 === per2) //false
    per1.eat() //吃飯
    per2.eat() //吃飯
    console.log(per1.eat === per2.eat) //false

這里我使用自定義構(gòu)造函數(shù)實(shí)例化了兩個(gè)對(duì)象,可以看到,這兩個(gè)對(duì)象的eat方法雖然功能相同,不是同一個(gè)方法!

得出結(jié)論~~~
自定義構(gòu)造函數(shù)每次實(shí)例化出來(lái)的對(duì)象,構(gòu)造函數(shù)都會(huì)創(chuàng)建一次,
所以eat方法在內(nèi)存中創(chuàng)建了兩次!他們?cè)趦?nèi)存中的地址不同,所以不等!
但是因?yàn)樗鼈兊倪壿嫼凸δ芤粯?這樣就導(dǎo)致了代碼冗余,影響性能,所以這里就需要用到原型對(duì)象!

怎么使用原型及原型的作用

如下:

    function Person(name, age) {
        this.name = name
        this.age = age
    }
    Person.prototype.eat = function () { //將eat方法添加到Person的原型中
        console.log("恰飯")
    } 
    var per1 = new Person("小明", 18)
    var per2 = new Person("小紅", 20)
    console.log(per1 === per2) //false
    console.log(per1.eat === per2.eat) //true
    per1.eat() //恰飯
    per2.eat() //恰飯

同樣的配方,同樣的味道,但不同的是:

通過原型添加的方法,可以完美的解決數(shù)據(jù)共享問題,從而節(jié)省了內(nèi)存空間...