okgoes
🔍 登录 注册

JavaScript之封装

大 大苹果 2023-12-02 linux 👁 215 ⏱ 13min

封装

es5封装

function Person(name, sex, age) {
    if (!(this instanceof Person)) {
        return new Person(name, sex, age);
    }
    this.name = name;
    this.sex = sex || 'female';
    this.age = age || 0;

    this.walk = function() {
        if (this.age <= 2) {
            return console.log('我不会走路');
        }

        if (this.age >2 && this.age < 4) {
            return console.log('我会走路了');
        }

        return console.log('走路');
    }

    this.study = function (skill) {
        console.log('学习' + skill);
    }

    this.introduce = function () {
        console.log(`我是${this.name}，我是一个${this.sex === 'male' ? "男" : "女"}孩，今年${this.age}岁了。`);
    }
}

// 调用方式
// new关键字创建实例
var p = new Person('小名', 'male', 10);
// 直接调用创建
var p1 = Person('小红', 'female', 9);
p.walk(); // 走路
p1.study('游泳'); // 学习游泳
p.introduce();// 我是小名，我是一个男孩，今年10岁了。
p1.introduce();// 我是小红，我是一个女孩，今年9岁了。

原型链的方式

function Person(name, sex, age) {
    if (!(this instanceof Person)) {
        return new Person(name, sex, age);
    }
    this.name = name;
    this.sex = sex;
    this.age = age;
}

Person.prototype.walk = function() {
    if (this.age <= 2) {
        return console.log('我不会走路');
    }

    if (this.age >2 && this.age < 4) {
        return console.log('我会走路了');
    }

    return console.log('走路');
}

Person.prototype.study = function(skill) {
    console.log('学习' + skill);
}

Person.prototype.introduce = function() {
    console.log(`我是${this.name}，我是一个${this.sex === 'male' ? "男" : "女"}孩，今年${this.age}岁了。`);
}

// 调用方式
// new关键字创建实例
var p = new Person('小名', 'male', 10);
// 直接调用创建
var p1 = Person('小红', 'female', 9);
p.walk(); // 走路
p1.study('游泳'); // 学习游泳
p.introduce();
p1.introduce();

es6封装

class Person {
    constructor(name, sex, age) {
        this.name = name;
        this.sex = sex;
        this.age = age;
    }

    walk() {
        if (this.age <= 2) {
            return console.log('我不会走路');
        }

        if (this.age >2 && this.age < 4) {
            return console.log('我会走路了');
        }

        return console.log('走路');
    }

    study(skill) {
        console.log('学习' + skill);
    }

    introduce() {
        console.log(`我是${this.name}，我是一个${this.sex === 'male' ? "男" : "女"}孩，今年${this.age}岁了。`);
    }
}

// 调用方式
// new关键字创建实例
var p = new Person('小名', 'male', 10);
p.walk(); // 走路
p.introduce();
// 直接调用创建
// var p1 = Person('小红', 'female', 9); // TypeError: Class constructor Person cannot be invoked without 'new'
// class定义的不能直接调用，只能通过new关键字实例化后调用

console.log(typeof Person); // function

继承

es5

  • 原型链实现继承
function Person(name, sex, age) {
    if (!(this instanceof Person)) {
        return new Person(name, sex, age);
    }
    this.name = name;
    this.sex = sex || 'female';
    this.age = age || 0;

    this.walk = function() {
        if (this.age <= 2) {
            return console.log('我不会走路');
        }

        if (this.age >2 && this.age < 4) {
            return console.log('我会走路了');
        }

        return console.log('走路');
    }

    this.study = function (skill) {
        console.log('学习' + skill);
    }

    this.introduce = function () {
        console.log(`我是${this.name}，我是一个${this.sex === 'male' ? "男" : "女"}孩，今年${this.age}岁了。`);
    }
}

function Boy(name, age) {
    this.name = name;
    this.age = age;
    this.sex = 'male';

    this.doHouseWork = function() {
        console.log('我在做家务');
    }
}

Boy.prototype = new Person();
Boy.prototype.constructor = Boy;

var boy = new Boy('汤姆', 12);
boy.introduce(); // 我是汤姆，我是一个男孩，今年12岁了。
boy.doHouseWork();// 我在做家务
console.log(boy instanceof Boy);// true
  • Object.create
function create(obj) {
    return Object.create(obj);
}

var person = {
    name: 'Tom',
    age: 20,
    sex: 'male',
    walk: function() {
        if (this.age <= 2) {
            return console.log('我不会走路');
        }

        if (this.age >2 && this.age < 4) {
            return console.log('我会走路了');
        }

        return console.log('走路');
    },
    study: function(skill) {
        console.log('学习' + skill);
    },
    introduce: function() {
        console.log(`我是${this.name}，我是一个${this.sex === 'male' ? "男" : "女"}孩，今年${this.age}岁了。`);
    }
};

var boy = create(person);
boy.age = 15,
boy.name = '晓东';
boy.sex = 'male';
boy.doHouseWork = function() {
    console.log('我在做家务');
}

boy.introduce(); // 我是晓东，我是一个男孩，今年15岁了
boy.doHouseWork();// 我在做家务
  • call方法
function Person(name, sex, age) {
    if (!(this instanceof Person)) {
        return new Person(name, sex, age);
    }
    this.name = name;
    this.sex = sex || 'female';
    this.age = age || 0;

    this.walk = function() {
        if (this.age <= 2) {
            return console.log('我不会走路');
        }

        if (this.age >2 && this.age < 4) {
            return console.log('我会走路了');
        }

        return console.log('走路');
    }

    this.study = function (skill) {
        console.log('学习' + skill);
    }

    this.introduce = function () {
        console.log(`我是${this.name}，我是一个${this.sex === 'male' ? "男" : "女"}孩，今年${this.age}岁了。`);
    }
}

function Boy(name, age) {
    var obj = Person.call(this, name, 'male', age);
    obj.doHouseWork = function() {
        console.log('我在做家务');
    }
    return obj
}

let boy = Boy('小米', 16);
boy.introduce(boy); // 我是小米，我是一个男孩，今年16岁了。
boy.doHouseWork();// 我在做家务
  • apply方法
function Person(name, sex, age) {
    if (!(this instanceof Person)) {
        return new Person(name, sex, age);
    }
    this.name = name;
    this.sex = sex || 'female';
    this.age = age || 0;

    this.walk = function() {
        if (this.age <= 2) {
            return console.log('我不会走路');
        }

        if (this.age >2 && this.age < 4) {
            return console.log('我会走路了');
        }

        return console.log('走路');
    }

    this.study = function (skill) {
        console.log('学习' + skill);
    }

    this.introduce = function () {
        console.log(`我是${this.name}，我是一个${this.sex === 'male' ? "男" : "女"}孩，今年${this.age}岁了。`);
    }
}

function Boy(name, age) {
    var obj = Person.apply(this, [name, 'male', age]);
    obj.doHouseWork = function() {
        console.log('我在做家务');
    }
    return obj
}

let boy = Boy('小米', 17);
boy.introduce(boy); // 我是小米，我是一个男孩，今年16岁了。
boy.doHouseWork();// 我在做家务
  • es6 extends关键字
class Person {
    constructor(name, sex, age) {
        this.name = name;
        this.sex = sex;
        this.age = age;
    }

    walk() {
        if (this.age <= 2) {
            return console.log('我不会走路');
        }

        if (this.age >2 && this.age < 4) {
            return console.log('我会走路了');
        }

        return console.log('走路');
    }

    study(skill) {
        console.log('学习' + skill);
    }

    introduce() {
        console.log(`我是${this.name}，我是一个${this.sex === 'male' ? "男" : "女"}孩，今年${this.age}岁了。`);
    }
}

class Boy extends Person {
    constructor(name, age) {
        super(name, 'male', age);
    }

    doHouseWork() {
        console.log('我在做家务');
    }
}

var boy = new Boy('汤姆', 14);
boy.introduce(); // 我是汤姆，我是一个男孩，今年12岁了。
boy.doHouseWork();// 我在做家务
console.log(boy instanceof Boy);// true

多态

  • 函数参数不定个数
function Person(name, sex, age) {
    if (!(this instanceof Person)) {
        return new Person(name, sex, age);
    }
    this.name = name;
    this.sex = sex || 'female';
    this.age = age || 0;

    this.walk = function() {
        if (this.age <= 2) {
            return console.log('我不会走路');
        }

        if (this.age >2 && this.age < 4) {
            return console.log('我会走路了');
        }

        return console.log('走路');
    }

    this.study = function (skill) {
        console.log('学习' + skill);
    }

    this.introduce = function () {
        console.log(`我是${this.name}，我是一个${this.sex === 'male' ? "男" : "女"}孩，今年${this.age}岁了。`);
    }
}

function Mathematician(name, age) {
    this.sex = 'male';
    this.calc = function() {
        var argsLength = arguments.length;
        switch(argsLength) {
            case 1:
                console.log("这是" + arguments[0]);
                break;
            case 2:
                console.log(arguments[0] + '+' + arguments[1] + '=' + (arguments[0] + arguments[1]));
                break;
            default:
                console.log('太复杂的暂时不会');
        }
    }
}

Mathematician.prototype = new Person();
Mathematician.prototype.constructor = Mathematician;

var boy = new Mathematician();

boy.calc(); // 太复杂的暂时不会
boy.calc(1);// 这是1
boy.calc(1, 3); // 1+3=4

读完了？给作者一点支持

本文采用 CC BY 4.0 协议转载 · © 大苹果

评论（0）

登录 后参与评论。

  • 还没有评论，来抢沙发。

🔗 相关文章

Mysql 表被标记为崩溃，最后一次自动化修复失败

当 MySQL 日志中出现“表被标记为崩溃且自动修复失败”的提示时，通常表示 MySQL 在启动过程中检测到某个表的文件系统或存储引擎层出现了问题。这种情况通常会导致表无法正常使用，需要手动进行修复。以下是处理这种情况的一些步骤和方法： ### 1. **查看具体错误信息** 首先，需要查看 MySQL 错误日志以获取更多的错误信息。这可以帮助确定崩溃的表和具体的问题。 ```bash # 查看 MySQL 错误日志 tail -f /var/log/mysql/error.log ``` ### 2. **修复表** 不同的存储引擎有不同的修复工具，以下是常用的修复方法： #### **使用 `myisamchk` 修复 MyISAM 表** 如果崩溃的表使用的是 MyISAM 存储引擎，可以使用 `myisamchk` 工具来修复表。 1. 停止 MySQL 服务： ```bash sudo systemctl stop mysql ``` 2. 使用 `myisamchk` 修复表：

2024/8/11👍 0

mermaid.min.js的使用及介绍

`mermaid.min.js` 是一个 JavaScript 库，用于在浏览器中轻松绘制复杂的图表和流程图。Mermaid 通过使用简单的标记语言来描述图表，使得用户无需深入学习图表绘制的底层技术即可创建专业的图形。 在这篇文章中，我们将介绍 `mermaid.min.js` 的功能、应用场景、如何在项目中使用，以及一些常用的示例。 ## Mermaid 的功能 Mermaid 支持多种类型的图表，包括但不限于： 1. **流程图（Flowchart）**： - 用于表示流程或过程中的步骤。 - 支持各种节点和连线风格。 2. **序列图（Sequence Diagram）**： - 用于表示对象之间的交互。 - 展示消息的发送和接收过程。 3. **类图（Class Diagram）**： - 用于表示类及其关系。 - 支持类的属性和方法定义。 4. **状态图（State Diagram）**： - 用于描述系统状态及其转换。 - 适用于复杂的状态机建模。 5. **甘

2024/8/9👍 0

docker之Dockerfile及docker compose配置文件的说明及使用

Docker 的配置文件对于镜像构建和容器化应用的管理至关重要。在 Docker 中，主要的配置文件是 Dockerfile 和 docker-compose.yml。Dockerfile 用于构建镜像，而 docker-compose.yml 用于定义多容器应用。下面将详细介绍这两个文件的配置选项和用法。 ## Dockerfile 配置详解 **Dockerfile** 是一个文本文件，其中包含一组指令，用于定义如何构建 Docker 镜像。以下是 Dockerfile 中常用的指令及其用法： ### FROM `FROM` 指令用于指定基础镜像，是 Dockerfile 中的第一条指令。 ```dockerfile FROM node:14 ``` 上例中，`node:14` 是官方的 Node.js 版本 14 的镜像。 ### LABEL `LABEL` 用于为镜像添加元数据，以键值对形式存在。 ```dockerfile LABEL maintainer="your-email@example.com" LABE

2024/8/9👍 0