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';this

person.age=18;spa

person.sayName=function(){prototype

  console.log(this.name);code

}對象

優勢    
缺點

 1. 慢blog

  var Obj = function() {};資源

  var a = {};get

  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', {

  enumerablefalse,

  valuePerson

})

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操做符對他們沒有意義
相關文章
相關標籤/搜索