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. 基于PYQT5的截图翻译工具

    基于PYQT5的截图翻译工具 功能介绍 翻译功能 截图功能(快捷键 + 截图存储到剪切板中) 文字识别OCR(基于百度API的文字识别) UI 界面 截图 截图可以使用第三方截图 或 使用PyQt5截 ...

  2. k8s中label和label selector的基本概念及使用方法

    1.概述 在k8s中,有一个非常核心的概念,就是label(标签),以及对label的使用,label selector. 本文档中,我们就来看看:1.什么是标签,2.如何定义标签,3.什么是标签选择 ...

  3. python变量名下划线

    xx: 公有变量 _x: 单前置下划线,保护变量,私有化属性或方法,不能用于'from module import *' 以单下划线开头的表示的是protected类型的变量.即保护类型只能允许其/类 ...

  4. mysql数据恢复 根据旧备份的sql文件和当前data下的ibd文件恢复innodb引擎数据

    1.使用navicat fro mysql数据库工具进行恢复 2.将原有备份的sql文件导入数据库 3.新建一个空数据库 4将备份数据库的数据表复制到新建数据库(只复制表格式) 5.在命令行模式中 u ...

  5. php 图片转换二进制数

    $image = "1.jpg"; //图片地址 $fp = fopen($image, 'rb'); $content = fread($fp, filesize($image) ...

  6. vscode常用插件快捷键

    俗话说,工欲善其事必先利其器,我们码农的器是什么尼?没错,就是我们亲爱的IDE,前端开发者最爱的编辑器应该是vscode了吧.但是我们要怎么去锋利它尼?不外乎就是熟悉它的使用方法.快捷键以及第三方的插 ...

  7. Java获取汉字的大小写拼音码(汉字的拼音首字母)

    import java.io.UnsupportedEncodingException; /** * 获取拼音码 * * @author xmj * */ public class GetPinyin ...

  8. Educational Codeforces Round 129 (Rated for Div. 2) A-D

    Educational Codeforces Round 129 (Rated for Div. 2) A-D A 题目 https://codeforces.com/contest/1681/pro ...

  9. 015(Power string)(哈希表)

    题目:http://ybt.ssoier.cn:8088/problem_show.php?pid=1457 题目思路: 思路就是预设子串的长度,从1开始,而后一段一段试 试到一个对不上的就打回 如果 ...

  10. windows版anaconda+CUDA9.0+cudnn7+pytorch+tensorflow安装

    1.Anaconda 首先下载Anaconda,它是一个开源的python发行版本,含有众多科学工具包,直接安装anaconda免除了许多包的手动安装,点击这里下载. 按照你的实际情况选择下载.下载完 ...