JS面向对象编程笔记（二）：5种对象创建模式

最新推荐文章于 2022-09-07 20:23:43 发布
最新推荐文章于 2022-09-07 20:23:43 发布
阅读量150 收藏
点赞数
分类专栏： 前端 文章标签： js 设计模式 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18297883/article/details/107239357
版权

开头

笔记视频内容源自B站JavaScript从入门到放弃 第十二章 面向对象编程，笔记为自行整理复习使用，欢迎一同学习交流，转载请通知原作者

二、对象创建模式

2.1、对象的字面量方式
  1. 对象字面量
  2. 工厂模式
  3. 构造函数模式
    1. 构造函数拓展模式
    2. 寄生构造函数模式
    3. 稳妥构造函数模式
  4. 原型模式
  5. 组合模式
    1. 动态原型模式

对象字面量：

  1. ​ 通过new构造函数

    <body>
    <script>
        var obj = new Object();
        obj.name = '陈'
        console.log(obj); 
    </script>
</body>

    image-20200709194611077

  2. 对象字面量（语法糖）

    <body>
    <script>
        var person = {
            name:'chen',
            age:20
        }
        console.log(person);
    </script>
</body>

  3. Object.create(对象)：从一个实例对象生成另一个实例对象，create()方法中的参数a作为返回实例对象b的一个原型对象，在a中定义的属性和方法都能被b实例对象继承下来

    <body>
    <script>
      var a = {
        getX: function () {
          console.log("x");
        },
      };
      var b = Object.create(a);
      console.log(b);
      b.getX()
    </script>
  </body>

    image-20200709195132818

2.2、工厂模式

通过字面量创建对象往往在创建多个对象时会产生不必要的冗余,浪费资源，这时候就需要工厂模式：

<body>
    <script>

        function createPerson(name,age){
            var o = new Object();
            o.name = name;
            o.age = age;
            o.sayName = function(){
                console.log(this.name)
            }
            return o
        }

        var p1 = createPerson('chen','18');
        var p2 = createPerson('chen','28');
        var p3 = createPerson('chen','38');

        p1.sayName()
    </script>
</body>

image-20200709195914970

虽然他解决了之前的问题，但是他自身也有一些问题。它的好处时能创建多个类似的对象，但是没有解决对象识别的问题（都是Object）

console.log(p1 instanceof Object)
console.log(p2 instanceof Object)

image-20200709200323610

如何解决呢，我们就需要使用构造函数模式

2.3、构造函数模式

创建自定义的构造函数：

<body>
    <script>
        function Person(name,age){
            this.name = name;
            this.age = age;
            this.sayName = function(){
                console.log(this.name)
            }
        }
        var man = new Person('chen',18);
        var woman = new Person('chen2',20);

        man.sayName()
        woman.sayName()
    </script>
</body>

image-20200709200915017

不同于工厂模式，他将变量和方法都存储在了this中，同时解决了工厂函数无法识别对象（即统一为Object）的问题，但是仍会存在一些共同方法同时存在的冗余问题，即man和woman实例中都有一个sayName的方法，但是他们的方法的功能是一样的。但是分别占用了不同的空间，浪费了内存空间。

console.log(man.sayName === woman.sayName)

image-20200709201219113

这个就需要构造函数拓展模式来解决

构造函数拓展模式：

<body>
    <script>
      function Person(name, age) {
        this.name = name;
        this.age = age;
        this.sayName = sayName;
      }

      function sayName() {
        console.log(this.name);
      }
      var man = new Person("chen", 18);
      var woman = new Person("chen2", 20);

      console.log(man.sayName === woman.sayName);
    </script>
  </body>

image-20200709201434751

问题：但是定义多个全局函数会严重污染全局空间，没有封装性可言

寄生构造函数模式：

创建一个函数，函数体内部实例化一个对象，并且将对象返回，在外部的使用new关键字实例化对象，结合了工厂模式和构造函数模式：

<body>
    <script>
      function Person(name, age) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.sayName = function () {
          console.log(this.name);
        };
        return o;
      }

      var man = new Person("chen", 18);
      var woman = new Person("chen2", 20);

      console.log(man.sayName === woman.sayName);
      console.log(man.__proto__ === Person.prototype);
      console.log(man instanceof Person);
    </script>
  </body>

问题：

  1. 定义了相同的方法，浪费了内存空间
  2. instanceof运算符和prototype属性都没有意义

该模式尽量避免使用

稳妥构造函数模式：

没有公共属性，并且它的方法也不引用this对象，不适用new关键字,想要访问其中的私有属性必须通过内部的方法来实现，可以结合闭包理解：

<body>
    <script>
      function Person(name) {
        var a = 10;
        var o = new Object();
        //name就属于私有属性
        o.sayName = function () {
          console.log(a);
          console.log(name);
        };
        return o;
      }
      var p1 = Person("chen");
      p1.sayName();
    </script>
  </body>

image-20200709202707272

p1对象叫稳妥对象

console.log(p1.sayName === p2.sayName)

image-20200709203116535

这种模式也会有浪费内存空间的问题，同时没有使用new操作符构造也会缺失instanceof运算符和prototype属性

2.4、原型模式

使用prototype属性来定制共享的属性和方法:

<body>
    <script>
        function Person(){};

        Person.prototype.name = 'chen';
        Person.prototype.age = 28;
        Person.prototype.sayName = function(){
            console.log(this.name)
        }

        var p1 = new Person()
        p1.sayName()
        console.log(p1)

        var p2 = new Person()
        p2.sayName()

        console.log(p1.sayName === p2.sayName);
        
    </script>
</body>

image-20200709203624995

我们还可以进一步包装：

<body>
    <script>
      function Person() {}

      // Person.prototype.name = 'chen';
      // Person.prototype.age = 28;
      // Person.prototype.sayName = function(){
      //     console.log(this.name)
      // }

      Person.prototype = {
        constructor: Person,
        name: "chen",
        age: 28,
        sayName: function () {
          console.log(this.name);
        },
      };

      var p1 = new Person();
      p1.sayName();
      console.log(p1);

      var p2 = new Person();
      p2.sayName();

      console.log(p1.constructor === Person);

      console.log(p1.sayName === p2.sayName);
    </script>
  </body>

image-20200709203955592

但是也会出现一些问题，朋友的状态被共享了：

<body>
    <script>
      function Person() {}
      Person.prototype = {
        constructor: Person,
        name: "chen",
        age: 28,
        friends: ["a", "b"],
        sayName: function () {
          console.log(this.name);
        },
      };

      var me = new Person();
      me.sayName();

      var you = new Person();
      you.sayName();

      me.friends.push("c");
      console.log(me.friends);
      console.log(you.friends);
    </script>
  </body>

image-20200709204248401

问题：在于引用类型值属性会被所以的实例对象共享，并且会被修改，很少使用原型模式的原因

2.5、组合模式（重要）

他能解决原型模式状态共享问题，将私有的属性定义在函数内部，共有的方法通过原型去实现继承引用，该模式是目前使用最广泛，认同度最高的一种创建自定义对象的模式：

<body>
    <script>
      function Person(name, age) {
        this.name = name;
        this.age = age;
        this.friends = ["a", "b"];
      }

      Person.prototype = {
          //改变原型对象的同时，要改变该原型对象的constructor属性，让他指向当前的构造函数Person
        constructor: Person,
        sayName: function () {
          console.log(this.name);
        },
      };

      var wo = new Person("wo", 18);
      var ni = new Person("ni", 28);


      console.log(wo);
      console.log(ni);

      wo.friends.push('c')
      console.log(wo);
      console.log(ni);
      
      wo.sayName();
      ni.sayName();
      
    </script>
  </body>

image-20200709205027640

组合模式定制当前对象的属性，原型的作用是定制各个实例对象的共享属性

2.6、动态原型模式

动态原型模式是将组合模式中分开的部分都封装到构造函数中，避免未调用就初始化的问题：

<body>
    <script>
      function Person(name, age) {
        this.name = name;
        this.age = age;
        this.friends = ["a", "b"];

        if (typeof this.sayName != "function") {
          //初始化原型对象上的属性
          Person.prototype.sayName = function () {
            console.log(this.name);
          };
        }
      }

      //未被初始化
      console.log(Person.prototype);

      var wo = new Person("wo", 18);
      //初始化后
      console.log(Person.prototype);
      console.log(wo instanceof Person)
    </script>
  </body>

image-20200709205919489

2.7、总结

1、字面量方式
**问题：**创建多个对象会造成冗余的代码
2、工厂模式
解决对象字面量方式创建对象的问题
**问题：**对象识别的问题
3、构造函数模式
解决工厂模式的问题
**问题：**方法重复被创建
4、原型模式
解决构造函数模式创建对象的问题
**特点：**在于方法可以被共享
**问题：**给当前实例定制的引用类型的属性会被所有的实例所共享
5、组合模式(构造函数和原型模式)
**构造函数模式：**定义实例属性
**原型模式：**用于定义方法和共享的属性，还支持向构造函数中传递参数。
该模式是使用最广泛，应用度最高的一种模式

了解：
构造函数扩展模式
寄生构造函数模式
稳妥构造函数模式
动态原型模式

干巴爹兔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS高级程序设计——第六章面向对象程序设计 6.2 创建对象
YuTong_的博客
02-22 199
6.2 创建对象6.2.1 工厂模式1、工厂模式示例2、工厂模式优缺点6.2.2 构造函数模式1、构造函数示例2、调用函数经历的步骤3、constructor(构造函数)属性4、将构造函数当作函数5、构造函数的问题6、构造函数优缺点总结 虽然 Object 构造函数或对象字面量都可以用来创建单个对象，但这些方式有个明显的缺点:使用同一个接口创建很多对象，会产生大量的重复代码（不能复用，不同对象的相...
韩顺平老师笔记JS面向对象和dom编程笔记
05-29
这里有我做的笔记，韩顺平老师讲的关于JS面向对象和Dom编程的笔记，做的很详细，希望你用得着，对你有用
JavaScript 面向对象-子类继承父类的属性和方法（原型的应用）
qq_31910227的博客
09-16 1756
JavaScript 面向对象-子类继承父类的属性和方法（原型的应用） 步骤： 创建构造函数Person，添加属性民族（nation）和肤色（skinColor），添加两个方法，分别返回民族和肤色 创建构造函数Woman，添加属性性别（sex），Woman继承Person 为构造函数Woman添加方法，返回性别 创建Woman的实例对象woman1 在页面中输出对象woman三个方法的值 代码部分： <body> <div></div> <sc...
js对象实例化的常见三种方式
theowl的专栏
08-08 1万+
三种常见模式：工厂模式，构造函数模式，原型模式 Object 创建对象常见的三种方式 window.onload=function(){ //工厂模式 function oj(){ var lio=new Object(); lio.name='lio';
字面量创建
zhangyiyang111的博客
12-29 108
字面量创建 var girlFriend1 = { "name":"如花", "age":80, "height":150, "weight":150 } console.log(girlFriend1); console.log(girlFriend1.name); 优点：直观 缺点：代码冗余，适合创建单个对象
JavaScript 对象实例化
man_zuo的博客
05-02 1万+
参考资料：《JavaScript入门经典》利用内置对象创建直接实例JavaScript有一个内置对象Object，利用它可以创建一个空白的对象。aObject = new Object();添加属性这样，我们就创建了没有任何属性和方法的空白对象。现在我们可以用以下方法为对象添加属性：aObject.info = "I am a obeject";现在，我们成功为aObject对象添加了一个名为in...
JS面向对象编程笔记（一）：原型、原型链
干巴爹兔的博客
07-08 220
开头 笔记视频内容源自B站JavaScript从入门到放弃 第十二章 面向对象编程，笔记为自行整理复习使用，欢迎一同学习交流，转载请通知原作者 一、原型、原型链 1.1、什么是面向对象？ 面向对象编程是目前主流的的一个编程的模式，它将我们真实世界各种复杂的关系抽象成了一个个的对象，然后由这些对象的分工合作完成真实世界的模拟。每一个对象都有其功能中心，即完成的任务（方法，属性）。因此面向对象编程(OOP)具有灵活、代码可复用、高度模块化等特点。 1.对象是单个实物的抽象 2.对象是一个容器，封装了对应的属性和
Web前端JavaScript面向对象编程
09-27
这个笔记是我在B站根据Mosh的JavaScript面向对象编程教学视频中学习并记录的，里面有我记录的知识点，自己写的代码，还有小部分的截图。大家可以在学习这个内容的时候看一下我的笔记进行参考一下。 视频链接：...
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
01-08
前两篇文章主要介绍了类和对象、类的继承，如果想了解更多理论请查阅《ES6学习笔记（一）：轻松搞懂面向对象编程、类和对象》、《ES6学习笔记（二）：教你玩转类的继承和类的对象》，今天主要来分享关于如何用js面向...
Javascript 面向对象编程（一） 封装
01-19
《面向对象的Javascript》（Object-Oriented JavaScript） 《Javascript高级程序设计（第二版）》（Professional JavaScript for Web Developers, 2nd Edition) 它们都是非常优秀的Javascript读物，推荐阅读。 笔记...
object:面向对象编程学习
05-01
object 面向对象编程学习 ...深入解读 JavaScript 中的面向对象编程 伯乐在线 ES6制作选项卡并实现继承 百度搜的 面向对象的 JavaScript – 深入了解 ES6 类 (未懂) 互相交流 Qq:952822399 Email:
【JS】使用字面量创建对象
weixin_44782422的博客
03-12 1065
创建对象可以用 var obj = new Object(); 也可以像基本数据类型的格式一样，使用字面量 var obj = {}; 使用对象字面量，可以在创建对象时，直接指定对象中的属性 语法：{属性名：属性值, 属性名：属性值，…} var obj = {name: “墨祈”}; 属性名本质上是个字符串，可以加引号，也可以不加，建议不加。 但若要使用特殊的名字，则必须加引号。 属性名和属性值是一组一组的名值对结构。 名和值之间使用冒号（：）连接，多个名值对之间使用逗号（,）隔开。 若一个属性之后
继承父类的属性和方法，并可以将值传给父类
qq_37056728的博客
10-22 432
<template> <div class="es5"> <h1>ES5</h1> <div> <ul> <li> <button @click="ceshiclass()">es5中定义只有属性没有方法的类</button&g...
构造函数和原型
qq_53847322的博客
09-07 223
这里我们主要讲构造函数的封装特性 用构造函数实例创建的对象彼此独立，互不影响。这段代码也很好的体现了构造函数的初始化对象的成员变量。但是构造函数其实是存在一个浪费内存的问题。怎么解决这个浪费内存的问题呢？这就要在原型中找到答案了。原型 原型对象 对象原型 对象实例 构造函数 原型链
Vite简单上手
热门推荐
干巴爹兔的博客
04-26 1万+
Vite介绍 Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。 官网网址：Vite 简单上手 新建一个index.html，复制GitHub的代...
Vue生成markdown目录索引
干巴爹兔的博客
05-19 6916
开头 一直以来我的博客的文章内容页都缺少一个目录索引，由于我的文章使用的文本结构为markdown，而现有的插件无法满足我的需求，所以我只能通过过滤文章提取标题动态生成目录结构，同时通过获取各个标题的据顶部高度来实现点击跳转的功能。本教程的代码实现参考了vue使用marked.js实现markdown转html并提取标题生成目录这篇文章，同时由于我使用Vue结合Vuetify的UI库，部分实现略有不同。 预期结果 这个是我的最终实现效果 代码实现 html部分 <template> &lt
分享一个用于Vue的markdown插件
干巴爹兔的博客
04-11 3057
官网：插件演示官网 安装 npm install markdown-it-vue 使用 <template> <div> <markdown-it-vue class="md-body" :content="content" /> </div> </template> <script> import Mar...
html引入百度地图插件
干巴爹兔的博客
06-11 2898
一、百度地图开放平台操作 1.1.注册账号 百度地图开发平台网址：http://lbsyun.baidu.com/， 百度账号不是百度地图开放平台账号，需要另外注册。 1.2.创建应用 登陆后首页上方有一个控制台，点击它： 进入之后左侧有一个应用管理，里面有一个我的应用，点击它然后再点击创建应用： 应用名称填写，应用类型选择浏览器端： Referer白名单选择*,也可以选择你自己的网址，然后填写完成点击提交。 提交后回到我的应用界面,你就会发现新创建的应用出现了： 其中访问应用AK就是你自己的密钥，
部署网站到GitHub或者码云
干巴爹兔的博客
06-09 1257
所需工具 VS Code、Git、Chrome 创建项目 1.创建文件夹（工作路径） 在自己的系统下创建一个文件夹，进入到文件夹，在地址栏使用cmd打开： 如果安装了vscode的话，应该会有一个code的指令，在cmd界面输入code .即可进入，如果不使用命令行也可以直接打开vscode,文件选项里面有个打开文件夹，选择你刚才创建的文件夹即可： 2.VS Code编写代码 进入VS Code,可以在左侧看到几个图标，第一个是文件资源路径，你可以点击如图所示创建文件： 在左侧第三个是VS Code自
Python 面向对象编程笔记：内置函数/方法的应用
最新发布
05-30
好的，针对你的问题，我可以为你提供一些关于 Python 面向对象编程中内置函数/方法的应用的笔记。具体内容如下： 1. `__init__`: 构造函数，用于初始化对象的属性。 2. `__str__`: 用于返回对象的字符串表示形式。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值