字面量和構(gòu)造函數(shù)模式

字面量

var dog={} dog.name="benji"; //屬性 dog.getName=function(){ //方法return this.name; } 復(fù)制代碼

構(gòu)造函數(shù)

var dog=new Object(); dog.name="benji"; dog.getName=function(){ return this.name; } 復(fù)制代碼

字面量和構(gòu)造函數(shù)對比

• 字面量更簡潔
• 字面量強調(diào)對象實際是一組鍵值對
• 你可能創(chuàng)建一個本地構(gòu)造函數(shù)同名為Object,所以會一直順著原型鏈往上查詢，直到找到local object()或global.object(),消耗性能

自定義構(gòu)造函數(shù)

var Person=function(name){this.name=name;this.say=function(){return "i am"+this.name} } 復(fù)制代碼

工作原理：

var Person=function(name){var this=Object.create(Person.prototype);this.name=name;this.say=function(){return "i am"+this.name}return this; //隱式返回 }為了不在每個實例中都產(chǎn)生say(),優(yōu)化如下:Person.prototype.say=function(){return "i am"+this.name; }默認(rèn)返回this,但你也可以返回別的:var Person=function(name){this.name=name;this.say=function(){return "i am"+this.name}var that={};that.name="benji";return that; //顯式返回 }let obj=new Person('kaola'); console.log(obj.name) //benji 復(fù)制代碼

當(dāng)忘記new調(diào)用構(gòu)造函數(shù)時會發(fā)生什么？

function Dog(){this.name="benji" }var obj1=new Dog(); console.log(obj1.name) //benjivar obj2=Dog(); console.log(obj2.name) //undefined console.log(window.name) //benji當(dāng)忘記使用new調(diào)用構(gòu)造函數(shù)時，函數(shù)中的this會指向全局對象，在瀏覽器中即window，這樣將會引起一系列意外復(fù)制代碼

以下幾種方法避免這個問題：

• 構(gòu)造函數(shù)名字開頭大寫
• 不隱式返回this,用return that替代，但這個模式問題在于，任何加在prototype上的屬性或方法將遺失
• 自調(diào)用:

function Dog(){if(!this instanceof Dog){return new Dog()}this.name="benji" }Dog.prototype.getName=function(){return this.name }let obj=Dog(); obj.name //benji obj.getName() //benji 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5b602bfbe51d4519226f8f80

總結(jié)

以上是生活随笔為你收集整理的js设计模式每次10分钟:字面量和构造函数模式对比的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。