个人中心
gpt4 book ai didi

javascript - 通过另一个源文件中的另一个函数扩展 function()

转载 作者：行者123 更新时间：2023-12-03 01:30:14 25 4
gpt4 key购买 nike

我的场景与 Web 客户端界面有关，它应该适用于不同的硬件。它有一个基本组件，以及基于所连接硬件的扩展(在这种特定情况下，login() 过程因设备而异)。

我通常是一名 C++ 开发人员，负责这个 JavaScript 扩展，但我完全迷失了。

我创建的想要测试的场景:

Source1.js(假设这是基本接口(interface)，对于所有硬件都相同):

function Login() {
    this.type = 'login';
    m_username = 'admin';
    m_password = 'admin';
}

function Constructor() {
    var mClass = new Login();
    this.clicked = function() {
        mClass.clicked();
    }

    this.getLogin = function() {
        return mClass;
    }
}

g_constructor = new Constructor();

Source2.js(这里应该实现Login().clicked()的功能):

function Login() {
    this.clicked = function() {
        document.getElementById("TextHere").innerHTML = m_username + ":" + m_password;
    }
}

我测试的 HTML 文件:

<html lang="en">
    <head>
        <title>JavaScript Test</title>
        <meta charset="utf-8" />
        <script src="source1.js"> </script>
        <script src="source2.js"> </script>
    </head>
    <body>
        <button onClick="g_constructor.clicked()">Test</button>
        <p>&nbsp;</p>
        <div id="TextHere">Text</div>
    </body>
</html>

通常我会使用虚拟基类之类的东西，但我完全不知道在 JavaScript 中要寻找什么。有人可以给我提示如何做类似的事情吗？每个 Login() 类型的对象都应该具有 Source2.js 中给出的 clicked() 函数

最佳答案

在 JavaScript 中，事情的工作方式有点不同。对象是使用原型(prototype)对象创建的。如果您在原型(prototype)对象上定义方法，则可以用实际实现覆盖这些方法。

要在原型(prototype)上定义方法，不应将它们定义为 this 的属性。

// Code that could be in source file 1
function Login() {
    this.type = 'login';
    this.m_username = 'admin';
    this.m_password = 'admin';
}

function Constructor() {}

Constructor.prototype = new Login();
Constructor.prototype.clicked = function () {
    alert('You should implement the "clicked" method');
};

var g_constructor = new Constructor();

// Code that could be in source file 2 

Constructor.prototype.clicked = function () {
    document.getElementById("TextHere").innerHTML = this.m_username + ":" + this.m_password;
}
<button onClick="g_constructor.clicked()">Test</button>
<p>&nbsp;</p>
<div id="TextHere">Text</div>

你会注意到 m_username 被定义为 this 的属性，否则以后它将不可用:在 JS 中是一个普通变量(当正确定义为var 关键字)只能在定义它的函数范围内访问。

使用更现代的 ES6 语法(使用 class 和 extends)，它可能如下所示:

// Code that could be in source file 1
class Login {
    constructor() {
        this.type = 'login';
        this.m_username = 'admin';
        this.m_password = 'admin';
    }
}

class Constructor extends Login {
    clicked () {
        alert('You should implement the "clicked" method');
    }
}

var g_constructor = new Constructor();

// Code that could be in source file 2 

Constructor.prototype.clicked = function () {
    document.getElementById("TextHere").innerHTML = this.m_username + ":" + this.m_password;
}
<button onClick="g_constructor.clicked()">Test</button>
<p>&nbsp;</p>
<div id="TextHere">Text</div>

注意:实际上并不需要有 getLogin 方法，因为 g_constructor 对象具有所有 Login 成员。

关于javascript - 通过另一个源文件中的另一个函数扩展 function()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51340012/

25 4 0
文章推荐： javascript - 单击触发器并传递 X、Y 坐标值
文章推荐： javascript - Firebase 存储 : How to store image url as an object property?
文章推荐： javascript - react native 出现意外错误
文章推荐： javascript - 使用 javascript/Jquery 编写具有打字效果的文本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com