美文网首页
javascript学习笔记--构造函数改进(原型对象)

javascript学习笔记--构造函数改进(原型对象)

作者: 持续5年输出bug | 来源:发表于2018-10-09 08:21 被阅读0次

    执行console.log(obj.sayName==obj2.sayName)代码块时,结果为false,所以:
    1.在构造函数Fun中,sayName方法每次都是新创建的;
    2.有多少个构造函数被执行就要被创建多少次,即sayName每次都是唯一的;

        function Fun(name,age) {
            this.name=name;
            this.age=age;
            this.sayName=function( ){
                alert(this.name)
            };
        }  
        var obj=new Fun("tom",18);
        var obj2=new Fun("tom",18);
        obj.sayName();
        obj2.sayName();
        console.log(obj.sayName==obj2.sayName)
    

    这样的缺点是:
    1.消耗大量的内存;
    2.创建的大量sayName都是一样的,但是却不能共用(因为每次都是创建了心的);
    所以,可以尝试共享sayName方法---定义一个函数到全局作用域中,然后将该函数赋值给sayName,即:

        function Fun(name,age) {
            this.name=name;
            this.age=age;
            this.sayName=fun2
    
        }
        function fun2 ( ){
                alert(this.name)
            };
        var obj=new Fun("tom",18);
        var obj2=new Fun("tom",18);
        obj.sayName();
        obj2.sayName();
        console.log(obj.sayName==obj2.sayName)
    

    运行 console.log(obj.sayName==obj2.sayName)后,控制台打印结果为ture,这样就实现了obj,obj2,共用sayName方法
    但是这样做的缺点是:
    1.污染了全局作用域的命名空间;
    2.一旦有同样的函数名被命名,就会被覆盖掉,
    所以,尽量不要在全局作用域中这样做,那么,这样的情况可以引入原型对象
    prototype

    1.如果作为普通函数调用,prototype无任何作用;
    2.可以通过protp访问;
    3.原型对象就相当于一个公共区域,所有同一个类的实例都可以访问到这个实例

        function Fun(name,age) {
            this.name=name;
            this.age=age;
        }
       Fun.prototype.sayName= function( ){
                alert(this.name)
            };
        
        var obj=new Fun("tom",18);
        var obj2=new Fun("tom",18);
        obj.sayName();
        obj2.sayName();
    

    直接向原型中添加sayName方法

    相关文章

      网友评论

          本文标题:javascript学习笔记--构造函数改进(原型对象)

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