JavaScript中的类定义和继承实现

Stella981
• 阅读 508

ES5中因为没有class关键字,所以创建类的方式是通过构造函数来定义的。我将一步步的用代码演示如何慢慢用原生的语法实现JS的类的定义和继承。希望大家喜欢。

废话不多说,我们来看原生JavaScript定义类的方法。

1. 最简单的类

// 类的构造函数
function Person() {
    this.name = "夏诺风"; // 属性 name
    this.age = 18; // 属性 age
}

// 调用类则使用new关键字
var person = new Person();
console.log(person.name); // 输出 夏诺风

2. 构造函数和原型链里面增加属性和方法

function Person() {
    this.name = "夏诺风"; // 属性 name
    this.age = 18; // 属性 age

    // 增加类方法
    this.run = function() {
        console.log(this.name + '正在跑步');
    }
}

// 原型链上的属性会被多个实例所共享,构造函数中的属性则不会
Person.prototype.sex = "男"; // 原型链增加属性

Person.prototype.walk = function() { // 原型链上增加方法
    console.log(this.name + '正在走路');
};

// 调用类则使用new关键字
var person = new Person();
console.log(person.name); // 输出 "夏诺风"
person.run(); // 调用方法 输出 "夏诺风正在跑步"

// 我们也可以调用原型链的方法
person.walk(); // 调用原型链上的方法 输出 "夏诺风正在走路"

以上两个例子就是ES5中怎么定义类的属性和方法的例子,你可以在构造函数中定义也可以在原型链上定义,都是没有问题的。

3. 类里面的静态方法

function Person() {
    this.name = "夏诺风"; // 属性 name
    this.age = 18; // 属性 age

    // 增加类方法
    this.run = function() { // 实例方法必须通过new以后才能被调用
        console.log(this.name + '正在跑步');
    }
}

// 静态方法
Person.getInfo = function() {
    console.log('我是静态方法');
}

// 原型链上的属性会被多个实例所共享,构造函数中的属性则不会
Person.prototype.sex = "男"; // 原型链增加属性

Person.prototype.walk = function() { // 原型链上增加方法
    console.log(this.name + '正在走路');
};

// 静态方法的调用是不需要new的,而是直接“构造方法名称.方法名”
Person.getInfo();

ES5里面的继承

1. 对象冒充实现继承

function Person() {
    this.name = "夏诺风"; // 属性 name
    this.age = 18; // 属性 age

    // 增加类方法
    this.run = function() { // 实例方法必须通过new以后才能被调用
        console.log(this.name + '正在跑步');
    }
}

// 原型链上的属性会被多个实例所共享,构造函数中的属性则不会
Person.prototype.sex = "男"; // 原型链增加属性

Person.prototype.walk = function() { // 原型链上增加方法
    console.log(this.name + '正在走路');
};

// SuperMan类继承Person 在ES5中继承最常用的方法就是原型链+对象冒充的组合继承模式
function SuperMan() {
    Person.call(this); // 对象冒充实现继承
}

var superman = new SuperMan();
// 对象冒充可以继承构造函数中的属性和方法,但是没有办法结成原型链上的属性和方法。
superman.run(); // 输出 “夏诺风正在跑步”
superman.walk(); // 报错,对象冒充实现的继承没有办法继承原型链上的属性和方法。

2. 原型链实现继承

function Person() {
    this.name = "夏诺风"; // 属性 name
    this.age = 18; // 属性 age

    // 增加类方法
    this.run = function() { // 实例方法必须通过new以后才能被调用
        console.log(this.name + '正在跑步');
    }
}

// 原型链上的属性会被多个实例所共享,构造函数中的属性则不会
Person.prototype.sex = "男"; // 原型链增加属性

Person.prototype.walk = function() { // 原型链上增加方法
    console.log(this.name + '正在走路');
};

// SuperMan类继承Person 在ES5中继承最常用的方法就是原型链+对象冒充的组合继承模式
function SuperMan() {}

SuperMan.prototype = new Person(); // 原型链实现继承

var superman = new SuperMan();
// 原型链实现继承,既可以继承构造函数中的属性和方法,也可以继承原型链上的函数和方法。
superman.run(); // 输出 “夏诺风正在跑步”
superman.walk(); // 输出 “夏诺风正在走路”

3. 原型链继承的问题?没有办法给父类传参

function Person(name, age) {
    this.name = name; // 属性 name
    this.age = age; // 属性 age

    // 增加类方法
    this.run = function () { // 实例方法必须通过new以后才能被调用
        console.log(this.name + '正在跑步');
    }
}

// 原型链上的属性会被多个实例所共享,构造函数中的属性则不会
Person.prototype.sex = "男"; // 原型链增加属性

Person.prototype.walk = function () { // 原型链上增加方法
    console.log(this.name + '正在走路');
};

function SuperMan(name, age) {}

SuperMan.prototype = new Person();

var superman = new SuperMan("超级夏诺风", 19); // 原型链继承的时候,我们没有办法给父类传参数
superman.run(); // 输出 “undefined正在跑步”

4. 原型链 + 对象冒充继承的组合继承模式

function Person(name, age) {
    this.name = name; // 属性 name
    this.age = age; // 属性 age

    // 增加类方法
    this.run = function () { // 实例方法必须通过new以后才能被调用
        console.log(this.name + '正在跑步');
    }
}

// 原型链上的属性会被多个实例所共享,构造函数中的属性则不会
Person.prototype.sex = "男"; // 原型链增加属性

Person.prototype.walk = function () { // 原型链上增加方法
    console.log(this.name + '正在走路');
};

function SuperMan(name, age) {
    Person.call(this, name, age); // 对象冒充继承 实例化子类可以给父类传参
}

SuperMan.prototype = new Person();

var superman = new SuperMan("超级夏诺风", 19); // 原型链继承的时候,我们没有办法给父类传参数
superman.run(); // 输出 “超级夏诺风正在跑步”

5. 原型链 + 对象冒充继承的组合继承模式的另外一种方法

function Person(name, age) {
    this.name = name; // 属性 name
    this.age = age; // 属性 age

    // 增加类方法
    this.run = function () { // 实例方法必须通过new以后才能被调用
        console.log(this.name + '正在跑步');
    }
}

// 原型链上的属性会被多个实例所共享,构造函数中的属性则不会
Person.prototype.sex = "男"; // 原型链增加属性

Person.prototype.walk = function () { // 原型链上增加方法
    console.log(this.name + '正在走路');
};

function SuperMan(name, age) {
    Person.call(this, name, age); // 对象冒充继承 实例化子类可以给父类传参
}

SuperMan.prototype = Person.prototype; // 因为上面已经继承了父类的构造函数中的属性和方法,剩下我们只需要继承原型链就好了

var superman = new SuperMan("超级夏诺风", 19); // 原型链继承的时候,我们没有办法给父类传参数
superman.run(); // 输出 “超级夏诺风正在跑步”

基本涵盖了ES5中的类创建和类继承的实现方式,初次总结希望大家喜欢,有不足之处也希望大家指出。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
ZY ZY
3年前
js继承的几种方式
1.原型链继承原型链继承:想要继承,就必须要提供父类(继承谁,提供继承的属性)//父级functionPerson(name)//给构造函数添加参数this.namename;this.age10;this.sumfunction()console.log(this.name)//原
Easter79 Easter79
2年前
typescript类 继承 修饰符
//1、ts中类的定义/es5:functionPerson(name){this.namename;this.runfunction(){
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
JS实现继承的几种方式
前言JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待。JS继承的实现方式既然要实现继承,那么首先我们得有一个父类,代码如下://定义一个动物类functionAnimal(name){//属性this.name
Wesley13 Wesley13
2年前
JS必知的6种继承方式
JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待JS继承的实现方式既然要实现继承,那么首先我们得有一个父类,代码如下:// 父类function Person(name) { // 给构造函数添加了参数  this.name  name;
Stella981 Stella981
2年前
Javascript 是如何体现继承的 ?
js继承的概念js里常用的如下两种继承方式:原型链继承(对象间的继承)类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念。所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现在面向对象的语言中,我们使用类来创建一个自定义对象
Stella981 Stella981
2年前
IntentService类 和 异步任务(AsyncTask)
IntentService是一个Service类。IntentService只有1个带String参数的构造方法,所以,在自定义类继承IntentService时,需要在自定义类中显式的调用IntentService带参数的构造方法,并且将自定义类的构造方法修改为无参数的。IntentService内部使用消息机制,利用消息队列的特性,可以依次处
Stella981 Stella981
2年前
Javascript中,实现类与继承的方法和优缺点分析
Javascript是一种弱类型语言,不存在类的概念,但在js中可以模仿类似于JAVA中的类,实现类与继承第一种方法:利用Javascript中的原型链1//首先定义一个父类23functionAnimal(name,age){4//定义父类的属性5thi
Stella981 Stella981
2年前
Javascript定义类(class)的三种方法
在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法。Javascript语言不支持"类",但是可以用一些变通的方法,模拟出"类"。一、构造函数法这是经典方法,也是教科书必教的方法。它用构造函数模拟"类",在其内部用this关键字指代实例对象。  function