【前端每日一题】day5

JS 实现继承的几种方式

在JavaScript中,实现继承的几种方式包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承和组合式继承。

原型链继承:

function Parent() {
    this.name = 'Parent';
}
Parent.prototype.sayHello = function() {
    console.log('Hello, I am ' + this.name);
};

function Child() {}
Child.prototype = new Parent();

var child = new Child();
child.sayHello(); // 输出: Hello, I am Parent

构造函数继承:

function Parent() {
    this.name = 'Parent';
}

function Child() {
    Parent.call(this);
}

var child = new Child();
console.log(child.name); // 输出: Parent

组合继承:

function Parent() {
    this.name = 'Parent';
}
Parent.prototype.sayHello = function() {
    console.log('Hello, I am ' + this.name);
};

function Child() {
    Parent.call(this);
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child = new Child();
child.sayHello(); // 输出: Hello, I am Parent

原型式继承:

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

var parent = {
    name: 'Parent',
    sayHello: function() {
        console.log('Hello, I am ' + this.name);
    }
};

var child = object(parent);
child.sayHello(); // 输出: Hello, I am Parent

寄生式继承:

function createAnother(original) {
    var clone = Object.create(original);
    clone.sayHello = function() {
        console.log('Hello, I am ' + this.name);
    };
    return clone;
}

var parent = {
    name: 'Parent'
};

var child = createAnother(parent);
child.sayHello(); // 输出: Hello, I am Parent

组合式继承:

function Parent(name) {
    this.name = name;
}
Parent.prototype.sayHello = function() {
    console.log('Hello, I am ' + this.name);
};

function Child(name) {
    Parent.call(this, name);
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

var child = new Child('Child');
child.sayHello(); // 输出: Hello, I am Child

相关推荐

  1. 前端每日day5

    2024-05-14 16:24:07       3 阅读
  2. 前端每日day1

    2024-05-14 16:24:07       3 阅读
  3. 前端每日day2

    2024-05-14 16:24:07       8 阅读
  4. 前端每日day3

    2024-05-14 16:24:07       3 阅读
  5. LeetCode 每日 Day1

    2024-05-14 16:24:07       31 阅读
  6. LeetCode 每日 Day 11||贪心

    2024-05-14 16:24:07       32 阅读
  7. LeetCode 每日 Day 47 - 50

    2024-05-14 16:24:07       28 阅读

最近更新

  1. .Net Core WebAPI参数的传递方式

    2024-05-14 16:24:07       0 阅读
  2. QT--气泡框的实现

    2024-05-14 16:24:07       0 阅读
  3. LeetCode 968.监控二叉树 (hard)

    2024-05-14 16:24:07       0 阅读
  4. leetcode热题100.完全平方数(动态规划进阶)

    2024-05-14 16:24:07       0 阅读
  5. leetcode328-Odd Even Linked List

    2024-05-14 16:24:07       0 阅读
  6. C 语言设计模式(结构型)

    2024-05-14 16:24:07       0 阅读
  7. v-if 与 v-show(vue3条件渲染)

    2024-05-14 16:24:07       0 阅读
  8. kafka防止消息丢失配置

    2024-05-14 16:24:07       0 阅读

热门阅读

  1. GNU/Linux - 是否可以多次打开同一个设备文件

    2024-05-14 16:24:07       5 阅读
  2. LeetCode-hot100题解—Day7

    2024-05-14 16:24:07       1 阅读
  3. 机器学习【简述】

    2024-05-14 16:24:07       1 阅读
  4. 【TypeScript声明合并简介以及使用方法】

    2024-05-14 16:24:07       2 阅读
  5. 【C++】字符串出现次数

    2024-05-14 16:24:07       2 阅读
  6. Mysql 锁

    Mysql 锁

    2024-05-14 16:24:07      2 阅读
  7. 图书管理数据库

    2024-05-14 16:24:07       2 阅读
  8. Android 桌面小组件 AppWidgetProvider(2)

    2024-05-14 16:24:07       2 阅读
  9. 什么是跨境物流管理系统,它有什么功能

    2024-05-14 16:24:07       1 阅读
  10. Spring redis工具类

    2024-05-14 16:24:07       2 阅读
  11. 算法打卡day45

    2024-05-14 16:24:07       3 阅读