首页 > Web开发 > 详细

js 创建对象的多种方式

时间:2019-12-14 00:18:52      阅读:84      评论:0      收藏:0      [点我收藏+]

参考: javascript 高级程序设计第三版

工厂模式

1
2
3
4
5
6
7
8
9
10
function (name) {
var obj = new Object()
obj.name = name
obj.getName = function() {
console.log(this.name)
}
return obj
}

var person1 = createPerson('jack')
  • 缺点:对象无法识别,所有实例都指向同一个原型

构造函数模式

1
2
3
4
5
6
7
function Person(name) {
this.name = name
this.getName = function() {
console.log(this.name)
}
}
var person1 = new Person('jack')
  • 优点:实例可以识别为一个特定类型
  • 缺点:每次创建实例时候,每个方法都会被创建一次

构造函数模式优化

1
2
3
4
5
6
7
8
9
10
function Person(name) {
this.name = name
this.getName = getName
}

function getName() {
console.log(this.name)
}

var person1 = new Person('jack')
  • 优点:解决每个方法都会被重新创建的问题
  • 缺点:没有很好的封装性

原型模式

1
2
3
4
5
6
7
8
9
function Person(name) {
}

Person.prototype.name = 'jack'
Person.prototype.getName() {
console.log(this.name)
}

var person1 = new Person('jack')
  • 优点:方法不会重新创建
  • 缺点:所有属性和方法都给共享;不能初始化参数

原型模式优化

1
2
3
4
5
6
7
8
9
10
大专栏  js 创建对象的多种方式>11
function Person(name) {
}

Person.prototype = {
name: 'jack',
getName: function() {
console.log(this.name)
}
}

var person1 = new Person('jack')
  • 缺点:重新了原型,丢失了 constructor 属性

原型模式优化

1
2
3
4
5
6
7
8
9
10
11
12
function Person(name) {
}

Person.prototype = {
constructor: Person,
name: 'jack',
getName: function() {
console.log(this.name)
}
}

var person1 = new Person('jack')
  • 优点: 实例可以通过 constructor 属性找到所属构造函数
  • 缺点: 还是存在原型模式的缺点

组合模式(构造函数模式和原型模式结合)

1
2
3
4
5
6
7
8
9
10
11
12
function Person(name) {
this.name = name
}

Person.prototype = {
constructor: Person,
getName: function() {
console.log(this.name)
}
}

var person1 = new Person('jack')
  • 优点:该共享的共享,该私有的私有

寄生构造函数模式

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name) {
var obj = new Object()
obj.name = name
obj.getName = function () {
console.log(this.name)
}

return obj
}

var person1 = new Person('jack');
console.log(person1 instanceof Person)
console.log(person1 instanceof Object) // true
  • 缺点:对象无法识别,所有实例都指向同一个原型,本质还是工厂模式

js 创建对象的多种方式

原文:https://www.cnblogs.com/lijianming180/p/12037687.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!