字面量和構造函數模式

字面量

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

構造函數

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

字面量和構造函數對比

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

自定義構造函數

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

工作原理：

var Person=function(name){var this=Object.create(Person.prototype);this.name=name;this.say=function(){return "i am"+this.name}return this; //隱式返回 }為了不在每個實例中都產生say(),優化如下:Person.prototype.say=function(){return "i am"+this.name; }默認返回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 復制代碼

當忘記new調用構造函數時會發生什么？

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當忘記使用new調用構造函數時，函數中的this會指向全局對象，在瀏覽器中即window，這樣將會引起一系列意外復制代碼

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

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

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 復制代碼

轉載于:https://juejin.im/post/5b602bfbe51d4519226f8f80

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。