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操做符对他们没有意义
相关文章
相关标签/搜索