1. 程式人生 > >js 創建對象的方式

js 創建對象的方式

get 總結 構造 define 工廠 this bject enum creat

看了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 創建對象的方式