需要Javascript的基本澄清
Javascript fundamental clarification needed
我知道一点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
一样,我是否将属性/方法添加到BaseFunc
或DerivedFunc
,因为它被添加到原型中,它应该添加到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>
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 数组从php到javascript(需要新的决策)
- JavaScript - 需要帮助组合两个脚本
- Javascript - 需要日期验证 IF 语句
- 为什么javascript需要jit
- xQuery到JavaScript需要多个文件
- 弗兰肯斯坦图像交换JavaScript需要整洁和可能的自动化
- Javascript:需要帮助验证表单的两个方面,然后启用“提交”按钮
- 令人沮丧的简单 Javascript 需要帮助
- JavaScript 需要比预期更多的时间
- Javascript - 需要重复数组迭代,每x秒更改一次元素的类
- JavaScript 需要输入更改输入边框
- JAVASCRIPT - 需要理解脚本
- JavaScript 需要从复选框数组中选中一个复选框
- JavaScript 需要从复选框数组中选中一个复选框
- Javascript / 需要 X 天的特定模式
- Javascript 需要使用带有 id 的
链接传递变量 - ARCGIS Javascript 需要选择地图中的所有要素
- 未捕获的错误:Bootstrap的JavaScript需要jQuery
- Javascript - 需要询问用户什么是“x”乘以“y”,其中x和y是随机数