閱讀691 返回首頁    go 阿裏雲 go 技術社區[雲棲]


構造函數

構造函數:通過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,所有的實例對象的方法封裝到構造函數的原型裏麵去

最後更新:2017-11-03 18:33:43

  上一篇:go  javascript如何設置DIV背景色為隨機色
  下一篇:go  rem計算適配