第一章 面向对象编程

最新推荐文章于 2024-04-01 14:41:22 发布
最新推荐文章于 2024-04-01 14:41:22 发布
阅读量352 收藏
点赞数
分类专栏： JavaScript设计模式 文章标签： js JavaScript设计模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39055970/article/details/115220077
版权

第一章 函数的几种编写方式

1.1 函数是变量

注意以下代码中的script部分，checkName1 和 checkName2 都是将函数保存在变量里来实现功能，通过控制台可以发现他们都是全局对象window下的一个变量，即全局变量。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function checkName1(){
      console.log('checkName1 !')
    }
    checkName1()

    var checkName2 = function(){
      console.log('checkName2 !')
    }
    checkName2()
    console.log(this)

  </script>
</body>
</html>

在这里插入图片描述

1.2 用对象收编变量

上面说了函数是保存在变量里面来实现功能，即声明了全局变量，但是如果是团队开发的话，就不能够直接声明全局变量函数，因为别人也可能定义了相同的方法，这样就会和你的函数相互覆盖，而且这种问题很难察觉。因此我们可以通过创建一个对象，然后将函数作为对象属性的方式收编，这样就可以大大降低相互覆盖的可能性了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 用对象收编变量
    var checkObject1 = {
      checkName: function(){
        console.log('checkName1')
      },
      checkEmail: function(){},
      checkPassword: function(){}
    }

    // 对象的另一种形式,函数也是对象，因此也可以通过 . 的方式收编变量
    var checkObject2 = function(){}
    checkObject2.checkName = function(){
      console.log('checkName2')
    }
    checkObject2.checkEmail = function(){}
    checkObject2.checkPassword = function(){}

    // 使用
    console.log(checkObject1)
    console.log(checkObject2)
    checkObject1.checkName()
    checkObject2.checkName()
    
  </script>
</body>
</html>

在这里插入图片描述
从上面的代码和控制台输出可以看到，函数也是一个对象，虽然输出的时候无法看到收编的变量，但是通过 . 仍然能够使用。
提示：函数是对象，对象的属性也可以是对象，理论上来说，只要你愿意，可以无限嵌套。

1.3 通过return返回的对象都是一个新的对象

上面我们已经可以通过对象收编变量了，但是如果很多人都想要这些变量，可是对象只有一个，那怎么办呢？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var checkObject = function(){
      return {
        checkName: function(){
          console.log('checkName')
        },
        checkEmail: function(){},
        checkPassword: function(){}
      }
    }

    var a = checkObject()
    var b = checkObject()
    console.log('a === b',a === b)

    a.checkName()
    b.checkName()
    console.log('a.checkName === b.checkName',a.checkName === b.checkName)
    a.checkName = function(){
      console.log('new checkName')
    }
    a.checkName()
    b.checkName()
  </script>
</body>
</html>

在这里插入图片描述

使用函数的方式返回对象时，虽然看上去都是返回了checkObject 对象，但是实际上返回的每次都是一个新的对象。
虽然对象中的方法执行的都是相同的语句，但是值并不同，并且修改其中一个对象的方法（比如a.checkName）不会影响到另外一个对象中的方法（比如b.checkName）
总结：每次通过 return 返回的对象都是一个新的对象，就像是克隆体，虽然长得一模一样，但是都是相互独立的个体。

1.4 类说：“俺也一样”

虽然通过函数return的方式可以批发对象，完成我们的需求了，但是这毕竟不是一个真正意义上创建类的方式，并且创建的对象a、b和checkObject没有任何关系（使用人突然return 返回的对象本生就和checkObject无关），所以接下来我们要改造一下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var checkObject = function(){
      this.checkName = function(){
        console.log('checkName')
      }
      this.checkEmai = function(){}
      this.chekPassword = function(){}
    }

    var a = new checkObject()
    var b = new checkObject()
    console.log('a === b',a === b)

    a.checkName()
    b.checkName()
    console.log('a.checkName === b.checkName',a.checkName === b.checkName)
    a.checkName = function(){
      console.log('new checkName')
    }
    a.checkName()
    b.checkName()
  </script>
</body>
</html>

在这里插入图片描述

1.5 使用prototype原型减小消耗

因为类里面的方法都是通过this定义的，所以每次通过 new 关键字创建新对象的时候，新对象都会对类的this上的属性进行赋值，所以这些新创建的对象都会有一套自己的方法。但是有时候这么做造成的消耗是很奢侈的（每一个新对象一个比作一个朋友，对象里的方法比作搭出租车，如果每个朋友做的车都不一样，那肯定要消耗更多的钱。但是如果朋友拼的是同一辆车，那消耗自然就降低了），我们需要处理一下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var checkObject = function(){}
    checkObject.prototype.checkName = function(){
      console.log('checkName')
    }
    checkObject.prototype.checkEmail = function(){}
    checkObject.prototype.checkPassword = function(){}

    var a = new checkObject()
    var b = new checkObject()
    console.log('a === b',a === b)

    a.checkName()
    b.checkName()
    console.log('a.checkName === b.checkName',a.checkName === b.checkName)
    console.log('a.checkName === checkObject.checkName',a.checkName === checkObject.checkName)
    console.log('a.checkName === checkObject.prototype.checkName',a.checkName === checkObject.prototype.checkName)
    a.checkName = function(){
      console.log('new checkName')
    }
    a.checkName()
    b.checkName()
    console.log('a.checkName === checkObject.prototype.checkName',a.checkName === checkObject.prototype.checkName)
    console.log('b.checkName === checkObject.prototype.checkName',b.checkName === checkObject.prototype.checkName)
  </script>
</body>
</html>

在这里插入图片描述

可以看到 a 和 b 是不同的对象，但是他们的 .checkName() 方法是同一个，都是指向checkObject.prototype.checkName。
但是如果对 a.checkName方法重新定义的话，就不再指向checkObject.prototype.checkName。

1.6 prototype原型混用导致覆盖

上面使用prototype原型声明方法的方式要将prototype写很多遍，可以直接使用以下这种写法

var checkObject = function(){}
// 直接使用prototype对象
checkObject.prototype = {
  checkName:function(){
    console.log('checkName')
  },
  checkEmail:function(){},
  checkPassword:function(){},
}

但是两种方法不能够混用，否则如果将prototype对象赋值新对象的时候就会将原来的通过 prototype. 方式复制的方法覆盖。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var checkObject = function(){}

    // 往prototype对象上一个一个加方法
    checkObject.prototype.checkName = function(){
      console.log('checkName')
    }
    checkObject.prototype.checkEmail = function(){}
    checkObject.prototype.checkPassword = function(){}

    // 直接使用prototype对象
    checkObject.prototype = {
      checkId: function(){
        console.log('checkId')
      }
    }

    var a = new checkObject()
    a.checkId()
    a.checkName()
  </script>
</body>
</html>

在这里插入图片描述

1.7 方法的链式调用（优雅）

上面使用的prototype原型可以在类上一次性定义多个原型方法，并且被通过new创建的对象继承，但是在使用的时候仍然还需要多次书写对象本身（比如1.5中的a）。但是这是可以避免的，只要在声明的每一个方法的末尾处将当前的对象返回，在JavaScript中this指向的就是当前对象，所以我们可以将它返回。改动如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 对象收编方法
    var checkObject1 = {
      checkName: function(){
        console.log('checkName1')
        // 返回当前对象checkObject1
        return this
      },
      checkEmail:function(){
        console.log('checkEmail1')
        return this
      },
      checkPassword:function(){
        console.log('checkPassword1')
        return this
      }
    }
    
    // 方法的链式调用
    checkObject1.checkName().checkEmail().checkPassword()

    // 类的原型对象收编方法
    var checkObject2 = function(){}
    checkObject2.prototype = {
      checkName: function(){
        console.log('checkName2')
        // 返回原型对象 checkObject2.prototype
        return this
      },
      checkEmail:function(){
        console.log('checkEmai2')
        return this
      },
      checkPassword:function(){
        console.log('checkPassword2')
        return this
      }
    }
    var a = new checkObject2()

    // 类的原型对象也可以使用链式调用
    a.checkName().checkEmail().checkPassword()
  </script>
</body>
</html>

在这里插入图片描述

1.8 定义一个可以为函数添加多个方法的addMethod()方法

前面提到可以在函数对象中通过原型对象prototype收编多个变量函数，那么Function作为函数的祖先是否也可以呢？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 可以在所有函数的祖先类Function的原型对象上定义方法
    Function.prototype.checkName = function(){
      console.log('checkName')
    }
    var a = function(){}
    a.checkName()

    var b = new Function()
    b.checkName()

    // 上面的方式虽然可以收编很多变量函数，但是这么做会污染原生对象Function,造成不必要的开销。
    // 但是我们可以只在原生对象Function上添加一个添加方法的功能方法
    Function.prototype.addMethod = function(name,fn){
      this[name] = fn
    }
    var method = function(){}
    method.addMethod('checkEmail', function(){
      console.log('checkEmail')
    })
    method.checkEmail()
  </script>
</body>
</html>

在这里插入图片描述
从上面的代码和控制台结果可以知道，Function也可以通过prototype收编变量函数，但是如果按照这种方法频繁的添加，会导致每个函数都有这些方法，从而造成不必要的开销。所以我们可以在原生对象Function上添加一个添加方法的功能方法。

1.9 定义一个既可以为函数原型添加多个方法也可以为自身添加多个方法的addMethod()方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 给Function的原型添加方法的方法
    Function.prototype.addMethod = function(name,fn){
      this.prototype[name] = fn
      return this
    }

    // 直接给Funtion使用 addMethod 添加方法
    Function.addMethod('fun1',function(){
      console.log('fun1!')
      return this
    })
    Function.addMethod('fun2',function(){
      console.log('fun2!')
      return this
    })

    // 
    // var method = function(){}
    var method = new Function()
    method.fun1().fun2()

    method.addMethod('fun3',function(){
      console.log('fun3!')
      return this
    })
    var m = new method()
    m.fun3()

  </script>
</body>
</html>

在这里插入图片描述

番外篇：prototype和__proto__是什么以及两者的区别

相信很多初学JavaScript的同学和我一样，可能听过prototype和__proto__两个属性，但是在实际的项目开发中很少或者几乎没有用到。那么这两个属性究竟是什么？学习这两个属性又有什么用处呢？这部分的内容放到下一篇中prototype和__proto__的来历和使用讲解。

下一章 面向对象编程之封装

Sheldon一蓑烟雨任平生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Python学习之面向对象编程详解
python03011的博客
12-08 886
class关键字 + 类名(首字母大写) + 小括号(括号内填写 object:为python中的通用对象，书写通用对象的 class 会带有更多的内置功能) + 冒号变量 = 变量的值# 可以定义 类 的变量do# 也可以定义 类 的函数：类函数内有个必传参数 'self' ，一定要书写在类函数的第一参数位，这是 python 内部的语法规定# 需要注意的是 类的属性与函数的缩进要统一\# 定义一个动物类；动物类中定义一个变量；定义一个 跑 的函数(属性)
如何写好面向对象程序
爱孔孟
11-28 725
How to write an object oriented program that doesn't suck原文链接 显然面向对象编程方法曾被当作银弹，但是无论如何作为技术架构师货计算机科学专业毕业工作的人来说，掌握OOP这一技能会受到用人单位的相当重视。 我看到很多计算机程序员自豪地宣称：耶，我以面对对象方式设计了代码，将我的数据成员定义为私有，只能通过公有方法访问，我还创建了
面向对象编程
xiaoliu的博客
07-07 919
python中面向对象编程的详细介绍
第章面向对象程序设计ppt课件.ppt
11-17
面向对象程序设计是软件开发中的一种重要设计方法，本课件对面向对象程序设计进行了详细的介绍。从面向过程到面向对象程序设计的转变是软件开发技术的一大飞跃。本课件将从面向对象技术的基本概念、面向对象程序设计...
陈天华面向对象程序设计C第三第一章推选PPT文档.ppt
10-31
结合适当的参考书籍，如《C++程序设计教程》（钱能，清华大学出版社）、C++ Primer中文版以及《面向对象程序设计导论》（王申康、朱晓芸著，浙江大学出版社），可以进一步深入理解和掌握面向对象编程的精髓。
第16章 LabVIEW中的面向对象编程,labview面向对象的框架,LabView
09-11
在LabVIEW中实现面向对象编程（Object-Oriented Programming, OOP）可以提升代码的可重用性、可维护性和组织性。本章将深入探讨LabVIEW中的面向对象编程框架及其应用。 面向对象编程的核心概念包括类（Class）、...
第7章-面向对象程序设计基础.ppt
11-21
本章内容主要涵盖了面向对象编程的基本特性、类的定义与使用、对象的创建以及在Windows环境下进行图形界面设计的基础知识。 1. 面向对象编程的基本特征： 面向对象编程（Object-Oriented Programming, OOP）的主要...
C面向对象程序设计第二章.ppt
11-15
面向对象程序设计是一种基于对象的编程范式，它强调将数据和操作数据的方法封装在一起，形成独立的实体——对象。C++ 是一种支持面向对象编程的强类型、编译型语言，由Bjarne Stroustrup在C语言的基础上扩展而来。在...
C语言的链式调用
qq_36201602的博客
08-26 340
这里append()方法会返回StringBuilder对象本身,所以可以继续调用append()方法,形成链式调用的效果。在C语言中,可以通过返回对象指针来实现链式调用,主要思路是:- 每个方法执行操作后,返回对象本身的指针。所以链式调用是一种编程技巧,可以让代码更加可读和优雅,在C语言中也可以通过返回指针来实现。它的主要思想是,把多个方法调用链式连接起来,一个方法的返回值可以当作下一个方法的参数。MyObject_print() 打印num关键是每个方法在执行操作后,都返回对象本身的指针。
C++方法链式调用
weixin_39126199的博客
05-11 629
方法链式调用是一种编程风格，它允许在一个对象上连续调用多个方法，每个方法都返回当前对象的引用，以便可以继续在该对象上调用其他方法。这种风格可以提高代码的可读性和简洁性。
c语言函数的链式调用,使用OC链式调用方式简化SpriteKit的动画调用
weixin_34300871的博客
05-22 330
一，什么是链式调用？在网络前端编程里使用JQuery，经常可以看到链式调用，代码易读简洁。例如：$(“#Test”).css(‘color’,’red’).show(200).removeClass(‘style’);对id选择器为Test的对象进行了三项操作：先设置其字体颜色为红色，再显示对象，最后移除对象的“style”样式。通过“.”操作符调用方法执行后返回方法执行的实体，然后可以接着再使...
C/C++简单链式调用
最新发布
BaiiaJava的博客
04-01 251
(Method Chaining)是一种代码编写技巧,可以让代码更加简洁和易读。它的主要思想是,把多个方法调用链式连接起来,一个方法的返回值可以当作下一个方法的参数。在C++中，链式调用通常指的是连续调用同一个对象的成员函数，每次调用后都返回该对象的引用，从而允许进一步的调用。
链式调用和Lambda表达式在C语言中的应用
m0_46359684的博客
12-03 160
在编程世界中，我们经常会遇到需要执行一系列操作的情况。这些操作可能包括调用多个函数，或者根据不同的条件执行不同的代码块。在这种情况下，我们通常会使用if-else语句或者switch语句来实现。然而，当我们需要处理的条件和操作变得越来越复杂时，这种方式可能会导致代码变得难以理解和维护。为了解决这个问题，一些高级语言引入了链式调用（Method Chaining）和Lambda表达式（Lambda Expressions）这两种强大的编程技术。
js 设计模式（灵活的语言 JavaScript）
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
08-13 274
小白工作第一天的故事结束，通过对小白与小铭对函数的多样化创建与使用，我们对JavaScript这门语言有了新的认识，“灵活性” 是这门语言特有的气质，不同的人可以写出不同风格的代码，这是JavaScript给予我们的财富，不过我们要在团队开发中慎重挥霍，尽量保证团队开发代码风格一致，这也是团队代码易开发、可维护以及代码规范的必要要求。在欢乐的学习中小白的第一天工作结束了，兴奋、痴迷、感概。在那时小白将领略封装、继承的魅力。试着定义一个既可为函数原型添加方法又可为其自身添加方法的 addMethod 方法。.
面向对象编程（没有对象如何编程！）（初步学习）
一个蒟蒻的博客
12-01 821
说到编程，我们很容易想到两种思想： 面向对象编程 面向过程编程 这两者有什么区别呢？ 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。 面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。 看完上面的你相信一定没有什么感觉，的确我们如果刚刚接触编程的话，打打O...
面向对象编程（全）
m0_70444867的博客
07-28 7701
1，对象概述。 2，三大基本特性。3，面向对象高级特性 4，接口。 5，枚举。 6，内部类。
面向对象编程七大编程原则概述详解
Pluto372的博客
12-11 1498
面向对象编程原则概述 1.1 软件的可维护性和可复用性 可维护性较低的软件设计，通常由于如下四个原因造成: 过于僵硬(Rigidity) :灵活性不够 过于脆弱(Fragility) :健壮性（鲁棒性） 不够复用率低(Immobility) :不能重用 黏度过高(Viscosity) :高耦合，关联性太高 一个好的系统设计应该具备如下三个性质： 可扩展性（Extensibility） 灵活性（Flexibility） 可插入性（Pluggability） 程序设计原则：高内聚，低耦合 面向对象编程的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sheldon一蓑烟雨任平生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值