js 建立對象的方式

標籤：rabl   設定   構造   前端   idt   oat   enum   typeof   table   

看了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. 慢 　　var Obj = function() {}; 　　var a = {}; 　　var b = new Object( 　　var c = new Obj(); 　　c最快 a,b 慢一些 2. 批量的生產對象， 代碼多

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

	原廠模式	建構函式模式	原型模式
案例	function createPerson(name, job){ var person = new Object(); person.name = name; person.job = job; person.sayName = function(){ consol.log(this.name); } return person; } var person1 = createPerson(‘11‘,‘11job‘); var person2 = createPerson(‘22‘,‘22job‘);	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 建立對象的方式