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

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

作者: 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.原型对象可以从新赋值,对象访问原型中的成员,取决于这个对象在什么时候被创建

相关文章

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

    构造函数创建对象, 对象是引用类型,在堆中开辟空间,对象的赋值是堆中的地址,所以Person1 !== Perso...

  • JavaScript---原型

    学习目标 使用 prototype 原型对象解决构造函数的问题 理解什么是原型(原型对象) 构造函数、protot...

  • 69-继承方式三

    将Student构造函数的原型对象改为Person构造函数的原型对象注意点: 要想使用Person原型对象中的属性...

  • 构造函数-js-高级程序设计-第六章笔记

    前言 理解对象 创建对象构造函数模式原型模式组合使用构造函数模式和原型模式动态原型模式寄生构造函数模式稳妥构造函数...

  • 原型与原型链

    构造函数与原型 JavaScript 语言使用构造函数(constructor)作为对象的模板。所谓”构造函数”,...

  • 面向对象(四)构造函数的原型对象

    构造函数的原型对象 01 什么是原型对象在使用构造函数创建对象的时候,默认会生成一个与构造函数相关联的对象,这个对...

  • 原型概念

    神秘对象称与构造函数 神秘对象就是构造函数的 "原型属性"简称原型 (构造函数的原型) 神秘对象与构造函数所创建出...

  • javascirpt复习

    实例中访问构造函数原型的指针,指向的是构造函数原型,不是构造函数; 所以重写构造函数原型对象,【实例对象】访问还是...

  • 面向对象之原型对象和其他补充

    原型对象概念 原型对象的作用 如何访问构造函数的原型对象 ① 构造函数.protoType ② 对象.__prot...

  • 构造函数和原型对象

    javascript使用构造函数和原型对象来进行面向对象编程 构造函数 在 JavaScript 中,构造器其实就...

网友评论

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

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