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

78 阅读2分钟

构造函数创建对象

构造函数创建对象, 对象是引用类型,在堆中开辟空间,对象的赋值是堆中的地址,所以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: 如果构造函数中有很多的方法那么就会开辟很多的空间,浪费内存资源

  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: 如果在全局情况下声明函数,虽然解决了内存资源浪费的问题,但是又会出现全局变量污染的问题

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: 可以重新声明一个对象专门存放这些方法,但是新的问题时,如果有很多个构造函数,就要声明很多个这样的对象

       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----属于原型对象,指向该原型对象与之对应的构造函数

        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