構造函數的利弊以及使用原型對象

構造函數建立對象, 對象是引用類型,在堆中開闢空間,對象的賦值是堆中的地址,因此Person1 !== Person2函數

function Person(name,age){
        this.name = name,
        this.age = age,
        }
    }
    var person1 = new Person('小白',12)
    var person2 = new Person('大白',22)
    console.log(person1 === person2); //false

image.png

構造函數中方法的利弊
缺點1: 若是構造函數中有不少的方法那麼就會開闢不少的空間,浪費內存資源this

function Person(name,age){
        this.name = name,
        this.age = age,
        this.sayhi = function(){
            console.log('構造函數中的方法');
        }
    }
    var Person1 = new Person('小白',12)
    var Person2 = new Person('大白',22)
    Person1.sayhi()
    Person2.sayhi()
    console.log(Person1 === Person2, Person1.sayhi === Person2.sayhi); //false false

image.png

缺點2: 若是在全局狀況下聲明函數,雖然解決了內存資源浪費的問題,可是又會出現全局變量污染的問題spa

function say(){
    console.log('構造函數中的方法');
}
 function Person(name,age){
        this.name = name,
        this.age = age,
        this.sayhi = say
    }
    var Person1 = new Person('小白',12)
    var Person2 = new Person('大白',22)
    Person1.sayhi()
    Person2.sayhi()
    console.log(Person1 === Person2, Person1.sayhi === Person2.sayhi); //false true

image.png

缺點3: 能夠從新聲明一個對象專門存放這些方法,可是新的問題時,若是有不少個構造函數,就要聲明不少個這樣的對象prototype

var obj = {
            say: function () {
                console.log('函數中的say方法');
            },
            hi: function () {
                console.log('函數中的hi方法');
            }
        }
        function Person(name, age) {
            this.name = name,
                this.age = age,
                this.sayhi = obj.say
        }
        var Person1 = new Person('小白', 12)
        var Person2 = new Person('大白', 22)
        Person1.sayhi()
        Person2.sayhi()
        console.log(Person1 === Person2, Person1.sayhi === Person2.sayhi); //false true

image.png

總結: 爲解決建立構造函數的弊端的問題,咱們能夠直接使用原型對象
原型對象----構造函數每次在聲明的時候,系統會自動的幫咱們建立一個與之對應的對象
prototype---- 屬於構造函數,指向原型對象
__proto__----屬於構造函數的實例化對象,指向原型對象
constructor----屬於原型對象,指向該原型對象與之對應的構造函數code

function Person(name, age) {
            this.name = name
            this.age = age 
        }
        var Person1 = new Person('小白', 12)  function Person(name, age) {
            this.name = name
            this.age = age
        }
        var Person1 = new Person('小白', 12)
        console.log(Person,Person1)
        console.log( Person.prototype === Person1.__proto__)//true 
        console.log(Person.prototype.constructor) //Person

image.png

原型對象
1.對象中公共的成員能夠放到原型對象中去,這樣實例化出來的全部的對象均可以訪問
2.對象中的成員的訪問規則是若是對象中有,先訪問本身的若是沒有在從原型中找
3.原型對象能夠重新賦值,對象訪問原型中的成員,取決於這個對象在何時被建立對象

//1.
 function Person(name, age) {
            this.name = name
            this.age = age 
        }
        Person.prototype.eat = function(){
            console.log('我是'+ this.name+',我也要吃東西');
        }
        var Person1 = new Person('小白', 12)
        var Person2 = new Person('大白', 22)
        Person1.eat()//我是小白,我也要吃東西
        Person2.eat()//我是大白,我也要吃東西
//2.
        function Person(name, age) {
            this.name = name
            this.age = age 
        }
        var Person1 = new Person('小白', 12)
        Person1.sayhi = function(){
            console.log('這是對象本身的方法');
        }
        Person.prototype.sayhi = function(){
            console.log('這是添加在原型中的方法');
        }
        Person1.sayhi()
//3.
function Person(name, age) {
            this.name = name
            this.age = age 
        }
        var Person1 = new Person('小白', 12)
       
        Person.prototype.sayhi = function(){
            console.log('這是添加在原型中的方法1');
        }
        Person1.sayhi()//這是添加在原型中的方法1
        Person.prototype.sayhi = function(){
            console.log('這是添加在原型中的方法2');
        }
        Person1.sayhi()//這是添加在原型中的方法2
相關文章
相關標籤/搜索