1.工厂模式

function createPerson(name) {
var o = new Object();
o.name = name;
o.getName = function() {
console.log(this.name)
};
return o;
}
var person1 = createPerson('kevin')

缺点:对象无法识别,因为所以的实例都指向一个原型

2.构造函数模式

function Person(name) {
this.name = name;
this.getName = function() {
console.log(this.name);
}
} var person1 = new Person('kevin')

优点:实例可以识别为一个特定的类型

缺点:每次创建实例时,每个方法都要被创建一次

2.1构造函数模式优化

function Person(name) {
this.name = name;
this.getName = getName;
} function getName() {
console.log(this.name)
} var person1 = new Person('kevin')

优点:解决了每个方法都要被重新创建的问题

缺点:这叫啥封装...

3.原型模式

function Person(name) {
} Person.prototype.name = 'kevin';
Person.prototype.getName = function() {
console.log(this.name);
}
var person1 = new Person()

优点:方法不会重新创建

缺点:1.所有的属性和方法都共享 2.不能初始化参数

3.1原型模式优化

function Person(name) {

}

Person.prototype = {
name: 'kevin',
getName: function(){
console.log(this.name)
}
}
var person1 = new Person()

优点:封装性好一点

缺点:重写了原型,丢失了 constructor属性

3.2 原型模式优化

function Person(name) {}
Person.prototype = {
constructor: Person,
name:'kevin',
getName: function() {
console.log(this.name)
}
}
var person1 = new Person()

优点:实例可以通过constructor属性找到所属构造函数

缺点:原型模式该有的缺点还是有

4. 组合模式

构造函数模式与原型模式双剑合璧

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

优点:该共享的共享,该私有的私有,使用最广泛的方式

缺点: 有的人就是希望全部都写在一起,即更好的封装性

4.1 动态原型模式

function Person(name) {
this.name = name;
if (typeof this.getName != 'function') {
Person.prototype.getName = function() {
console.log(this.name)
}
}
}
var person1 = new Person()

注意:使用动态原型模式时,不能用对象字面量重写原型

解释下为什么:

function Person(name) {
this.name = name;
if (typeof this.getName != 'function') {
Person.prototype = {
constructor: Person,
getName: function() {
console.log(this.name)
}
}
}
} var person1 = new Person('kevin')
var person2 = new Person('marven') person1.getName() // 报错 并没有该方法 person2.getName() // 注释掉上面的代码,这句是可以执行的

Javascript深入之创建对象的多种方式以及优缺点的更多相关文章

  1. js创建对象的多种方式及优缺点

    在js中,如果你想输入一个的信息,例如姓名,性别,年龄等,如果你用值类型来存储的话,那么你就必须要声明很多个变量才行,变量声明的多了的话,就会造成变量污染.所以最好的方式就是存储到对象中.下面能我就给 ...

  2. js 创建对象的多种方式

    参考: javascript 高级程序设计第三版 工厂模式 12345678910 function (name) { var obj = new Object() obj.name = name o ...

  3. 基础2:js创建对象的多种方式

    js创建对象的多种方式 1. 工厂模式 function createPerson(name) { var o = new Object() 0.name = name return o } var ...

  4. JavaScript对象的几种创建方式与优缺点

    JavaScript中常见的几种创建对象的方式有:Object构造函数模式.对象字面量模式.工厂模式.自定义构造函数模式.构造函数加原型组合模式:他们各自有各自的优缺点和使用场景. 1. Object ...

  5. 【编程题与分析题】Javascript 之继承的多种实现方式和优缺点总结

    [!NOTE] 能熟练掌握每种继承方式的手写实现,并知道该继承实现方式的优缺点. 原型链继承 function Parent() { this.name = 'zhangsan'; this.chil ...

  6. JavaScript中判断为整数的多种方式

    之前记录过JavaScript中判断为数字类型的多种方式,这篇看看如何判断为整数类型(Integer). JavaScript中不区分整数和浮点数,所有数字内部都采用64位浮点格式表示,和Java的d ...

  7. javascript 处理链接的多种方式

    在页面中的链接除了常规的方式以外,如果使用javascript,还有很多种方式,下面是一些使用javascript,打开链接的几种方式: 1.使用window的open方法打开链接,这里可是在制定页面 ...

  8. javascript中创建对象的方式及优缺点(一)

    1. 简单方式创建对象 // 字面量方式创建对象 var person1 = { name: "xyc", age: 23, sayHi: function() { console ...

  9. Spring学习总结(一)——Spring实现IoC的多种方式

    控制反转IoC(Inversion of Control),是一种设计思想,DI(依赖注入)是实现IoC的一种方法,也有人认为DI只是IoC的另一种说法.没有IoC的程序中我们使用面向对象编程对象的创 ...

随机推荐

  1. php7函数,声明,返回值等新特性介绍

    使用 ... 运算符定义变长参数函数 (PHP 5 >= 5.6.0, PHP 7) 现在可以不依赖 func_get_args(), 使用 ... 运算符 来实现 变长参数函数. functi ...

  2. python之路--字典

    一. 字典 字典是以key:value的形式来保存数据的,用{}表示 字典的增删改查 字典的增加 dic = {"意大利": "李云龙", "美国&q ...

  3. EXAMPLE FOR PEEWEE 多姿势使用 PEEWEE

    使用 PEEWEE 断断续续的差不多已经三个年头了,但是没有像这次使用这么多的特性和功能,所以这次一并记录一下,需要注意的地方和一些使用细节,之后使用起来可能会更方便. 因为是使用的 SQLAched ...

  4. python学习笔记(4)-基本数据类型-数字类型及操作

    大学mooc 北京理工大学 python语言程序设计课程学习笔记 一.整数类型 可正可负,没有取值范围的限制(这个与c不同,c要考虑数据类型的存储空间).如pow(x,y),计算x的y次方,pow(2 ...

  5. DAY04、流程控制if、while、for

    一.if 判断 语法一: if 条件: # 以下是上一条if 的子代码块 print(子代码1) print(子代码2) print(子代码3) 示例: # 路边飘过一个生物,要不要表白? sex = ...

  6. 关于PHP函数传参的注意点

    PHP的实参在传递过程中是顺序传递的,不支持指定参数名传递.怎么理解呢?看下面的代码: function test($name,$age){ echo '姓名:'.$name,' 年纪:'.$age; ...

  7. 各个版本spring的jar包以及源码下载地址,目前最高版本到spring4.3.8,留存备用:

    http://maven.springframework.org/release/org/springframework/spring/

  8. JQuery invoke remote webservice

    Sending the Access-Control-Allow-Origin header allows basic cross-origin access, but calling ASP.NET ...

  9. Jquery根据滚动条显示返回按钮

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  10. 使用RestTemplate测试视频上传的Post请求

    以往多用RestTemplate处理接口的调用以及与Ribbon/Feign配合使用调用微服务接口,近日写了一个处理Post文件上传的解决方案,其实就是将后台所需的MultipartFile,在请求P ...