构造函数的利弊以及使用原型对象

构造函数建立对象, 对象是引用类型,在堆中开辟空间,对象的赋值是堆中的地址,因此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
相关文章
相关标签/搜索