構造函數
構造函數:通過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