• 构造函数


    构造函数:通过new操作符调用的函数就是构造函数

    创建对象的三种方式:

    1:变量直接量(JSON格式key:value)

    var obj1={
            name:'xxx',
            age:'xxx',
            sad:function(){}
        }

    2:通过new Object()方式

    var obj2=new Object();
        obj2.name='xxx';
        obj2.age=20;
        obj2.say=function(){}

    3:通过构造函数的方式,优点:可以当做模板

    //构造函数Person(),默认return this
        function Person(){
            this.name='xxxx';
            this.age=10;
            this.sad=function(){console.log(this.age)}
            this.speak=function(){
                console.log('I am '+this.name+' '+'今年 :'+this.age);
            }
        }
        var person1=new Person();
        person1.age=20;
        person1.sad();//20
        //注意 new操作符 :的内部原理
            1:创建一个空对象
            2:把this指向到这个空对象
            3:把空对象的内部原型(proto)指向构造函数的原型(prototype)对象
            4:当前构造函数执行完成后,如果没有return的话,就会把当前的空对象返回,一般都没有return
        //注意 new操作符原理:执行的时候类似在构造函数Person()内部,过程可以如下去理解,实际不是!!
        function Person(){
            var tt={};
            this=tt;
            tt.__proto__=Person.prototype;
            this.name='xxxx';
            this.age=10;
            this.sad=function(){...}
            return tt;
        }
        //prototype只有函数才有的原型
        //__proto__所有的对象都有的
        person1.__proto__===Person.prototype;//true
        person1.prototype===Person.prototype;//false
        person1===person2//false
    
        var person2=new Person();
        //可以把所有实例对象person1、person2...的公用方法封装到构造函数的的原型里面去,就可以减少空间,所以可以优化
        Person.prototype.speak=function(){
            console.log('I am '+this.name+' '+'今年 :'+this.age);
        }
        person2.name='person2';
        person2.age=100;
        person2.sad();//100
        person2.speak();//I am person2 今年 :100

     3.1上面的升级版本

    function Person(name,age){
            this.name=name;
            this.age=age;
        }
        //1 实例对象person1和person2的公用方法 speak
       Person.prototype.said=function(){
            console.log('This is '+this.name);
        }
        Person.prototype.speak=function(){
           console.log('I am '+this.name+',今年 '+this.age);
        }
        var person1=new Person({name:'马云',age:40});
        var person2=new Person({name:'王健林',age:50});
        person1.said();//This is 马云
        person2.said();//This is 王健林
        person1.speak();//I am 马云,今年 40
        person2.speak();//I am 王健林,今年 50

    3.2 上面的再升级版本

    function Person(option){
            this.name=option.name;
            this.age=option.age;
        }
        Person.prototype.said=function(){
            console.log('This is '+this.name);
        }
        Person.prototype.speak=function(){
           console.log('I am '+this.name+',今年 '+this.age);
        }
        var person1=new Person({name:'马云',age:40});
        var person2=new Person({name:'王健林',age:50});
        person1.said();//This is 马云
        person2.said();//This is 王健林
        person1.speak();//I am 马云,今年 40
        person2.speak();//I am 王健林,今年 50

     3.3 还可以再次升级

    function Person(option){
            this.init(option);
        }
           //重新设定原型
        Person.prototype={
            init:function(option){
                this.name=option.name||'';
                this.age=option.age||'';
            },
            said:function(){console.log('This is '+this.name);},
            speak:function(){
                console.log('I am '+this.name+',今年 '+this.age);
            }
        }
        var person1=new Person({name:'马云',age:40});
        var person2=new Person({name:'王健林',age:50});
        person1.said();//This is 马云
        person2.said();//This is 王健林
        person1.speak();//I am 马云,今年 40
        person2.speak();//I am 王健林,今年 50

    总结:由于实例对象的内部原型proto都指向构造函数的原型prototype,所有的实例对象的方法封装到构造函数的原型里面去

  • 相关阅读:
    串匹配模式中的BF算法和KMP算法
    “隐藏与显示”的多种方法实现
    原生js实现tooltip提示框的效果
    心向旋转巧得木马 峰回路转偶得时钟
    jQuery 之 验证表单
    Java代码添加背景音乐
    svg动画 之 我的自制太阳系
    java_22 Map接口
    java_22.1 Map 的应用
    java_18 Collection接口
  • 原文地址:https://www.cnblogs.com/-walker/p/6287357.html
Copyright © 2020-2023  润新知