js 創建對象的方式
看了http://mp.weixin.qq.com/s/Dbtv9hsaAcSDo8F1gj_N7Q 前端大全的文章, 感覺還是自己總結一下,映像會比較深刻。
對象字面量方式 | Object構造函數方式 | |
案例 | var person = { name:‘11‘, age:18, sayName: function(){ console.log(this.name); } } |
var person = new Object(); person.name=‘111‘; person.age=18; person.sayName=function(){ console.log(this.name); } |
優點 | ||
缺點 |
1. 慢
|
工廠模式 | 構造函數模式 | 原型模式 | |
案例 |
function createPerson(name, job){ var person1 = createPerson(‘11‘,‘11job‘); |
function Person(name,job){ this.name = name; this.job = job; this.sayName = function(){ consol.log(this.name); } } var person1 = new Person(‘11‘,‘11job‘); var person2 = new Person(‘22‘,‘22job‘);
創建一個新對象
這個新對象會被執行[[prototype]]鏈接
這個新對象會綁定到函數調用的this 返回這個對象
|
function Person() { } Person.prototype.name = ‘Jiang‘ Person.prototype.job = ‘student‘ Person.prototype.sayName = function() { console.log(this.name) } var person1 = new Person() |
優點 | 批量生產 | person1 instanceof Person //ture | 所有的實例對象共享它所包含的屬性和方法 |
缺點 |
沒有解決對象識別問題 |
上面的this指向Person的一個對象, 每個對象都會有一個sayName 方法,會浪費資源 |
1.Person.prototype設置為等於一個以對象字面量形式創建的對象 ,但是會導致.constructor不在指向Person了。 Object.defineProperty(Person.prototype, ‘constructor‘, { enumerable: false, value: Person }) 2.原型中所有屬性實例是被很多實例共享的,這種共享對於函數非常合適。 對於那些包含基本值的屬性也勉強可以,畢竟實例屬性可以屏蔽原型屬性。 但是引用類型值,就會出現問題了 function Person() { } Person.prototype = { name: ‘jiang‘, friends: [‘Shelby‘, ‘Court‘] } var person1 = new Person() var person2 = new Person() person1.friends.push(‘Van‘) console.log(person1.friends) //["Shelby", "Court", "Van"] console.log(person2.friends) //["Shelby", "Court", "Van"] console.log(person1.friends === person2.friends) // true |
組合使用構造函數模式和原型模式 | 寄生構造函數模式 | 動態原型模式 | 穩妥構造函數模式 | |
案例 |
function Person(name) { this.name = name this.friends = [‘Shelby‘, ‘Court‘] } Person.prototype.sayName = function() { console.log(this.name) } var person1 = new Person() var person2 = new Person() person1.friends.push(‘Van‘) console.log(person1.friends) //["Shelby", "Court", "Van"] console.log(person2.friends) // ["Shelby", "Court"] console.log(person1.friends === person2.friends) //false |
function Person(name, job) { var o = new Object() o.name = name o.job = job o.sayName = function() { console.log(this.name) } return o } var person1 = new Person(‘Jiang‘, ‘student‘) person1.sayName() |
function Person(name, job) { // 屬性 this.name = name this.job = job
// 方法 if(typeof this.sayName !== ‘function‘) { Person.prototype.sayName = function() { console.log(this.name) } }
} var person1 = new Person(‘Jiang‘, ‘Student‘) person1.sayName() |
function Person(name, job) { var o = new Object() o.name = name o.job = job o.sayName = function() { console.log(name) } return o } var person1 = Person(‘Jiang‘, ‘student‘) person1.sayName() |
優點 | 可以重寫調用構造函數時返回的值 | |||
缺點 | instanceof操作符對他們沒有意義 |
js 創建對象的方式