看了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
|
工厂模式 | 构造函数模式 | 原型模式 | |
案例 | 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操做符对他们没有意义 |