美文网首页
构造函数的利弊以及使用原型对象

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

作者: Fanny | 来源:发表于2020-02-18 10:00 被阅读0次

    构造函数创建对象, 对象是引用类型,在堆中开辟空间,对象的赋值是堆中的地址,所以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)
            console.log(Person,Person1)
    
    image.png

    原型对象
    1.对象中公共的成员可以放到原型对象中去,这样实例化出来的所有的对象都可以访问
    2.对象中的成员的访问规则是如果对象中有,先访问自己的如果没有在从原型中找
    3.原型对象可以从新赋值,对象访问原型中的成员,取决于这个对象在什么时候被创建

    相关文章

      网友评论

          本文标题:构造函数的利弊以及使用原型对象

          本文链接:https://www.haomeiwen.com/subject/qjhifhtx.html