首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zy445566deyeye
V2EX  ›  前端开发

JavaScript 封装、继承和多态实现

  •   
  •   zy445566deyeye ·
    zyw327 · 2019-05-21 09:24:05 +08:00 · 2242 次点击
    这是一个创建于 1802 天前的主题，其中的信息可能已经有所发展或是发生改变。

    封装（概念） 封装，也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。封装是面向对象的特征之一，是对象和类概念的主要特性。 简单的说，一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体。在一个对象内部，某些代码或某些数据可以是私有的，不能被外界访问。通过这种方式，对象对内部数据提供了不同级别的保护，以防止程序中无关的部分意外的改变或错误的使用了对象的私有部分。

    继承（概念） 继承是指可以让某个类型的对象获得另一个类型的对象的属性的方法。它支持按级分类的概念。继承是指这样一种能力：它可以使用现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。 通过继承创建的新类称为“子类”或“派生类”，被继承的类称为“基类”、“父类”或“超类”。继承的过程，就是从一般到特殊的过程。要实现继承，可以通过“继承”（ Inheritance ）和“组合”（ Composition ）来实现。继承概念的实现方式有二类：实现继承与接口继承。实现继承是指直接使用基类的属性和方法而无需额外编码的能力；接口继承是指仅使用属性和方法的名称、但是子类必须提供实现的能力；

    多态 多态就是指一个类实例的相同方法在不同情形有不同表现形式。多态机制使具有不同内部结构的对象可以共享相同的外部接口。这意味着，虽然针对不同对象的具体操作不同，但通过一个公共的类，它们（那些操作）可以通过相同的方式予以调用。

    封装 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
    目前尚无回复
    consolelogfunctionreturn
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1069 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 23:08 · PVG 07:08 · LAX 16:08 · JFK 19:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.