js创建对象的多种方式

1. 工厂模式

function createPerson(name) {
var o = new Object()
0.name = name
return o
}
var person1 = createPerson('xwk')

缺点:创造出来的对象无法识别,因为都指向同一个原型。

2. 构造函数模式

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

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

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

3. 原型模式

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

优点:方法是共用了,不会重复创建

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

3.1 原型模式优化

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

优点:封装性好了点

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

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('daisy'); // 报错 并没有该方法
person1.getName(); // 注释掉上面的代码,这句是可以执行的。
person2.getName();

这是因为: var person1 = new Person('kevin') ,在执行这段代码的时候,new的过程分解如下,首先把 person1.__proto__ 指向的是Person.prototype,我们可以认为是O1,其次再执行构造函数,发现没有getName,这时候把 Person.prototype 重新给复值给了一个新对象,我们认为是O2,但是此时person1的原型指向的是O1并不是O2,O1中并没有getName方法,person2的原型指向的是O2,所以可以正确执行。

可以修改代码:

function Person(name) {
this.name = name;
if (typeof this.getName != "function") {
Person.prototype = {
constructor: Person,
getName: function () {
console.log(this.name);
}
}
return new Person(name) // 修改方案一:首先实例化一次
// 修改方案二:
// 或者不要直接用字面量的方式赋值原型,修改之前的原型
// Person.prototype.getName = function() {console.log(this.name)}
}
} var person1 = new Person('kevin');
var person2 = new Person('daisy'); person1.getName(); person2.getName();

5.1 寄生构造函数模式

所谓的寄生构造函数模式就是比工厂模式在创建对象的时候,多使用了一个new,实际上两者的结果是一样的。

但是作者可能是希望能像使用普通 Array 一样使用 SpecialArray,虽然把 SpecialArray 当成函数也一样能用,但是这并不是作者的本意,也变得不优雅。

function SpecialArray() {
var values = new Array(); for (var i = 0, len = arguments.length; i < len; i++) {
values.push(arguments[i]);
} values.toPipedString = function () {
return this.join("|");
};
return values;
} var colors = new SpecialArray('red', 'blue', 'green');
var colors2 = SpecialArray('red2', 'blue2', 'green2'); console.log(colors);
console.log(colors.toPipedString()); // red|blue|green console.log(colors2);

5.2 稳妥构造函数模式

function person(name){
var o = new Object();
o.sayName = function(){
console.log(name);
};
return o;
} var person1 = person('kevin'); person1.sayName(); // kevin person1.name = "daisy"; person1.sayName(); // kevin console.log(person1.name); // daisy

所谓稳妥对象,指的是没有公共属性,而且其方法也不引用 this 的对象。

与寄生构造函数模式有两点不同:

  1. 新创建的实例方法不引用 this
  2. 不使用 new 操作符调用构造函数

稳妥对象最适合在一些安全的环境中。

稳妥构造函数模式也跟工厂模式一样,无法识别对象所属类型。

基础2:js创建对象的多种方式的更多相关文章

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

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

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

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

  3. JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...

  4. HTML系列:js和css多种方式实现隔行变色

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

  5. Javascript深入之创建对象的多种方式以及优缺点

    1.工厂模式 function createPerson(name) { var o = new Object(); o.name = name; o.getName = function() { c ...

  6. js创建对象的最佳方式

    1.对象的定义 ECMAScript中,对象是一个无序属性集,这里的“属性”可以是基本值.对象或者函数 2.数据属性与访问器属性 数据属性即有值的属性,可以设置属性只读.不可删除.不可枚举等等 访问器 ...

  7. 基础3:js实现继承的多种方式

    js实现继承的多种方式 1. 原型链继承 function Parent() { this.name = 'xwk' } Parent.prototype.getName = function() { ...

  8. JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式

    创建对象三种方式: 调用系统的构造函数创建对象 自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象) 字面量的方式创建对象 第一种:调用系统的构造函数创建对象 //小苏举例子: //实例化对 ...

  9. javascript(js)创建对象的模式与继承的几种方式

    1.js创建对象的几种方式 工厂模式 为什么会产生工厂模式,原因是使用同一个接口创建很多对象,会产生大量的重复代码,为了解决这个问题,产生了工厂模式. function createPerson(na ...

随机推荐

  1. Java并发3

    轻量级锁:如果一个有多个线程访问,但多线程访问的时间是错开的,没有竞争,那么可以使用轻量级锁来优化: monitor:重量级锁: 正常我们使用synchronized时,没有竞争则是轻量级锁,当遇到竞 ...

  2. Centos使用crontab自动定时备份mysql的脚本

    在我们网站上线之后免不了需要备份数据库,为什么要备份呢?我给大家列出了3个理由. 1.防止数据丢失 2.防止数据改错了,可以用来恢复 3.方便给客户数据 以 上几点告诉我们要经常备份,当然我今天给大家 ...

  3. 一文get到SOLID原则的重点

    ​ 最近没事再次翻开<敏捷软件开发:原则.模式与实践>看,发现以前似懂非懂的东西突然就看懂了,get到了讲的重点. SOLID(单一职责原则.开放-封闭原则.里氏替换原则.接口隔离原则以及 ...

  4. Vue回炉重造之搭建考试答卷系统

    本篇章主要讲述系统搭建逻辑,有疑问的可以加微信联系我.考试系统 资源 Vue.js Element UI 第三方数据接口 业务 答题过程中,防止用户中途退出或者其他不可抗力因素阻碍答题,在每次选择都要 ...

  5. sql-sql优化

    SQL执行流程 a. 编写过程: select dinstinct .. from .. join .. on .. where .. group by .. having .. order by . ...

  6. Centos8安装NextCloud记录

    今天在网上学习了这个Nextcloud 网盘的搭建,被折磨的快崩溃了.始终是找不到答案,我在网上查了2天的资料 还是没有找到答案,今天这里总结一下安装的下面的总结: 原文出处在官网:CentOS 8 ...

  7. Web开发小妙招:巧用ThreadLocal规避层层传值

    摘要:我们可以在处理每次请求的过程中,无需从Controller以及Service中的方法层层传值,只需要直接通过该局部变量取值即可. 本文分享自华为云社区<拦截器中巧用ThreadLocal规 ...

  8. 当在命令行输入"pip install xxx"

    当输入"pip install xxx"时发生了什么 不知道你在下载一些包的时候有没有什么疑惑,输入了"pip install xxx" ,系统是如何找到对应的 ...

  9. vim插件的社区活跃度怎么样

    www.vim.org -> Scripts -> Browse all可以看到有5051个插件.搜索Nerd可以看到NerdTree插件,它的评分是Rating 7882/2514, D ...

  10. 活动报名 | 如何基于开源项目 Tapdata PDK,快速完成数据源和目标的开发?

      近日,Tapdata 启动 PDK 插件生态共建计划,宣布开源插件开发框架 Tapdata PDK,将自身的数据接口能力开放出来,帮助开发者根据实际需求,自助接入数据源和目标,快速开启「Data ...