對js原型對象、實例化對象及prototype屬性的一些見解

什么是原型對象?

請看下面的代碼,我們以各種姿勢,創建了幾個方法!

 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

得出結論~記住,重點 function 對象有一個prototype屬性，使用new生成的對象就沒有這個prototype屬性。 

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

那么原型對象有什么作用?

這里我們來復習一下自定義構造函數~

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

 

這里我使用自定義構造函數實例化了兩個對象,可以看到,這兩個對象的eat方法雖然功能相同,不是同一個方法!

得出結論~~~
自定義構造函數每次實例化出來的對象,構造函數都會創建一次,
所以eat方法在內存中創建了兩次!他們在內存中的地址不同,所以不等!
但是因為它們的邏輯和功能一樣,這樣就導致了代碼冗余,影響性能,所以這里就需要用到原型對象!

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

如下:

  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() //恰飯

 

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

通過原型添加的方法,可以完美的解決數據共享問題,從而節省了內存空間...