首页 > 编程语言 >javascript - 面向对象

javascript - 面向对象

时间:2024-06-13 22:00:51浏览次数:24  
标签:function console name Person age javascript 面向对象 return

要是直接百度,如何在 javascript 中创建一个对象,你能找到一堆这样的文章:《js 创建对象的 n 种方式》、《闭包的 n 种写法》……

咱们不参加考试,不要记那么多,整那么多写法,代码还不好维护。

就例举几个,在实际项目开发过程中,比较好的代码写法。

兼容语法 1

如果想兼容旧的浏览器,可以采用这种方式,采用了闭包的写法。

几乎不存在兼容性问题,除了代码缩进不好看,没什么缺点。

<!DOCTYPE html>
<html lang="CHN">
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
</body>
<script>
    function Person() {
        var age = 3;
        var name = 'xiaomming';

        return {
            getAge: function () {
                return age
            }
            , setAge: function (a) {
                age = a;
            }
            , getName: function () {
                return name;
            }
            , setName: function (a) {
                name = a;
            }
        }
    }

    var person = new Person();

    console.log(person.getAge());
    console.log(person.getName());
</script>
</html>

兼容语法 2

如果觉得代码缩进不好看,可以采用这种方式。

<!DOCTYPE html>
<html lang="CHN">
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
</body>
<script>
  function Person() {
    this.age = 3;
    this.name = 'xiaomming';
  }

  // 这种写法的缺点,是容易产生不规范的代码。
  // 比如:你离职之前,在这里写三五百行代码,其他人就看不懂 Person 是怎么定义的了。
  
  Person.prototype.getAge = function () {
    return this.age
  }
  Person.prototype.setAge = function (a) {
    this.age = a;
  }
  Person.prototype.getName = function () {
    return this.name;
  }
  Person.prototype.setName = function (a) {
    this.name = a;
  }

  var person = new Person();

  console.log(person.getAge());
  console.log(person.getName());
</script>
</html>

ES6 语法

ES6 有 class 的概念,可以采用下面这种写法。

跟闭包的写法相比,似乎没啥改进,重点是 ES6 还多了 extends 语法。

这估计会形成升级代码的动力,因为在旧的代码中,写继承是很麻烦的一件事。

<!DOCTYPE html>
<html lang="CHN">
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
</body>
<script>
    class Person {
        age = 3;
        name = 'xiaomming';

        constructor() {
            console.log('构造函数')
        }

        getAge() {
            return this.age
        }

        setAge(a) {
            this.age = a;
        }

        getName() {
            return this.name;
        }

        setName(a) {
            this.name = a;
        }
    }

    class Student extends Person{
    }
    
    let student = new Student();

    console.log(student.getAge());
    console.log(student.getName());
</script>
</html>

标签:function,console,name,Person,age,javascript,面向对象,return
From: https://www.cnblogs.com/chenss15060100790/p/18246851

相关文章

  • 需求虽小但是问题很多,浅谈JavaScript导出excel文件
    最近我在进行一些前端小开发,遇到了一个小需求:我想要将数据导出到Excel文件,并希望能够封装成一个函数来实现。这个函数需要接收一个二维数组作为参数,数组的第一行是表头。在导出的过程中,要能够确保避免出现中文乱码的情况。另外,考虑到数组中可能包含回车、逗号、换行符等......
  • JAVA面向对象模型练习题3
    题目要求:        需求:在实际开发中,经常会遇到一些数组使用的工具类。请按照如下要求编写一个数组的工具类:ArraysUtils:        ①我们知道数组对象直接输出的时候是输出对象的地址的,而项目中很多地方都需要返回数组的内容,请在ArraysUtils中提供一个工具类......
  • JavaScript 编程语言【数据类型】映射|集合|WeakMap and WeakSet
    文章目录MapandSet(映射和集合)MapMap迭代Object.entries:从对象创建Map]Object.fromEntries:从Map创建对象SetSet迭代(iteration)总结✅任务过滤数组中的唯一元素过滤字谜(anagrams)迭代键WeakMapandWeakSet(弱映射和弱集合)WeakMap使用案例:额外的数据使用案例:缓存Weak......
  • JAVA面向对象练习题2
    题目要求:        定义一个Student实体类,成员变量:name、age。静态成员变量:在线人数。在测试类中:创建集合,存储学生对象,每创建一个学生对象,在线人数+1,删除一个学生对象,在线人数-1定义方法完成:请给集合中存储3个学生对象,并遍历集合,并输出在线人数。定义方法完成:请判断......
  • 一起来学javascript-axios
       <!--//AJAX的封装插件——Axios。  //什么是Axios  //Axios是一个基于Promise的HTTP库,可以用于浏览器和Node.js,支持VanillaJS、Angular、React、Vue等框架。  //简单的理解就是对Ajax的封装,且具有易用、简洁、高效等特点。  ......
  • 使用 JavaScript 中的 DeviceOrientationEvent
    在前端开发中,DeviceOrientationEvent是一个非常有用的API,它允许我们访问设备的物理方向信息,如设备的倾斜和旋转。这个API可以在移动设备上获取设备的方向,可以用来创建各种有趣和交互性强的应用程序,比如游戏、增强现实体验等。本文将介绍如何使用DeviceOrientationEventAP......
  • JavaScript-DOM
    DOM全称:DOM(DocumentObjectModel--文档对象类型) 作用:用来操控网页类容的功能,开发网页特效和实现用户交互DOM结构将HTML文档以树形结构表现出来称之为DOM树获取DOM 语法:document.querySelector('css选择器')参数:包含一个或多个css选择器字符串返回值:CSS选......
  • 【C++面向对象】重载操作符
    C++将运算符重载扩展到自定义的数据类型,它可以让对象操作更美观。例如字符串string用加号(+)拼接、cout用两个左尖括号(<<)输出。运算符重载函数的语法:返回值operator运算符(参数列表);运算符重载函数的返回值类型要与运算符本身的含义一致。非成员函数版本的重载运算符函数:形......
  • web网页设计期末课程大作业:家乡旅游主题网站设计——河北8页html css javascript
    ......
  • 【保姆级详细介绍JavaScript初识及基本语法】
    ......