需要Javascript的基本澄清

Javascript fundamental clarification needed

本文关键字:Javascript 需要      更新时间:2023-09-26

我知道一点C#,现在我开始使用JavaScript,我在理解基础知识方面遇到了一些问题。

这是我的代码示例:

function BaseFunc(x, y) {
    this.X = x;
    this.Y = y;
}
function DerivedFunc(x, y, z) {
    this.Z = z;
    BaseFunc.call(this, x, y);
}
DerivedFunc.prototype = new BaseFunc;   

 function Test() {
    var d = DerivedFunc(1, 2, 3);
    var b = new BaseFunc(4, 5);
    d.sayHello();
    b.sayHello();
}
DerivedFunc.prototype.sayHello = function () {
    alert("Result is: " + (this.X + this.Y + this.Z));
}

在上面的代码中,我正在尝试进行继承。

一切看起来都很好,直到我到达该行BaseFunc.call(this, x, y);该行应该调用基函数,但是在这种情况下this有什么用。是不是只是为了满足方法call的签名,它是如何工作的?

第二个问题是,在javascript中,我们可以动态添加任何东西,就我而言,我正在添加一个sayHello()属性并为其分配一个匿名函数。像DerivedFunc.prototype.sayHello一样,我是否将属性/方法添加到BaseFuncDerivedFunc,因为它被添加到原型中,它应该添加到BaseFunc据我所知。但是当我执行上面的代码时,我收到错误,指出sayHello未定义。

有人可以澄清我出了什么问题,谢谢?

一切看起来都很好,直到我到达BaseFunc.call(this,x,y)行;这一行应该调用base函数,但在这种情况下有什么用。

它的存在使得在对BaseFunc的调用中,this具有与DerivedFunc调用相同的值,以便BaseFunc中的行this.X = x;等分配给正确的实例。(调用函数为this设置特定值是函数的.call.apply方法所做的。

但是当我执行上面的代码时,我收到错误,说你好没有定义。

如果d.sayHello您遇到麻烦的地方,那是因为您错过了线路d = DerivedFunc(1, 2, 3);上的new运算符。由于DerivedFunc,当只是作为一个函数而不是通过new调用时,没有任何返回值,d将被undefined


请注意,您进行继承的方式虽然常见,但存在问题。主要问题在这里:

DerivedFunc.prototype = new BaseFunc;

您正在尝试使用旨在创建实例并接受参数的函数,以便创建DerivedFunc将分配给事物的原型实例。那么BaseFunc应该如何处理缺少的论点呢?稍后,您再次调用它(从 DerivedFunc )来初始化实例。 BaseFunc正在履行双重职责。

以下是您如何纠正它,首先是冗长的版本:

function x() { }
x.prototype = BaseFunc.prototype;
DerivedFunc.prototype = new x;
DerivedFunc.prototype.constructor = DerivedFunc;

或者,如果您可以依靠ES5的Object.create

DerivedFunc.prototype = Object.create(BaseFunc.prototype);
DerivedFunc.prototype.constructor = DerivedFunc;

现在我们没有调用BaseFunc来创建原型,但我们仍然得到它的prototype对象作为DerivedFunc prototype对象的底层原型。我们不再有如何处理BaseFunc参数的问题,BaseFunc 只是以它设计的方式调用:初始化单个实例,而不是原型。

当然,与其每次我们想要派生构造函数时都编写它,不如为它提供一个帮助程序脚本。

如果你对 JavaScript 继承层次结构感兴趣,你可能想看看我的简短Lineage脚本 ——不一定是使用,而是了解这些东西是如何工作的。显示如何在没有脚本的情况下执行操作并与使用脚本执行操作进行比较的页面可能特别有用。

嗨,

请仔细阅读以下内容。我希望它能给你一些关于继承和call()的想法

<script type="text/javascript">   
    //inheritence
    function parent() {
        this.add = function (a, b) {
            return a + b;
        }
        this.subtract = function (a, b) {
            return a - b;
        }
    }
    function child() {
        this.display = function () {
            alert(this.add(11, 23));
        }
    }
    child.prototype = new parent();         //child extends parent.... inheritence
    child.prototype.constructor = child;    //resetting constructor property
    var obj = new child();
    obj.display();
    /*
    .call() and .apply()
    They allow our objects to borrow methods from other objects and invoke them as their own
    */
    var person = {
        name: 'Kundan',
        display: function(name) {
            alert(this.name + ' welcomes ' + name);
        }
    };
    person.display('Dipa'); //Kundan welcomes Dipa
    var person1 = { name: 'Java Master' };
    person.display.call(person1, 'Sachin'); //Java Master welcomes Sachin
    //here person1 object is passed in the call function
    //if we are using call inside a function and want to pass the same function object then this is passed in call function
    /*
    We can pass more parameters as follows
    person.display.call(person1, 'a', 'b', 'c');
    The method apply() works the same way as call() but with the difference that all parameters you want to pass to the method of the other object are passed as an array.
    */
        person.display.apply(person1, ['a', 'b', 'c']);

</script>