📜  JavaScript 构造函数中的继承如何工作?

📅  最后修改于: 2022-05-13 01:56:19.564000             🧑  作者: Mango

JavaScript 构造函数中的继承如何工作?

在这里,我们将讨论在 JavaScript 中继承构造函数。构造函数定义对象将包含的属性的原型。使用构造函数,我们可以在传递所需参数后创建一个新对象。

继承先前定义的构造函数意味着使用先前定义的函数的参数以及向新定义的构造函数添加一些新参数。为此,我们需要使用 call()函数,它允许我们调用在当前上下文中其他地方定义的函数。

句法:

myFunction.call( this, property1, property2, ... , propertyN )

参数值:

  • myFunction:这是一个构造函数,我们希望从中继承新构造函数中的参数。
  • this :调用 myFunction 时将使用 this 关键字的参数值。
  • property1, property2, ..., propertyN:要在新的构造函数中继承的参数。

返回类型:构造函数或继承其属性的函数没有任何返回类型。它指定对象将包含的属性的原型,这些属性是从该构造函数创建的。

示例:在这里,我们创建一个 'Employee' 构造函数。创建了一个新的“开发人员”构造函数,它将继承“员工”的基本属性,并包含一些新属性。

HTML


  

     
        JavaScript inheritance of constructor functions 
    

  

    

  


HTML


  

     
        JavaScript inheritance of constructor functions
     

  

    

  


输出:

Object
constructor: ƒ Employee(name, age, gender, id)
[[Prototype]]: Object

Object
constructor: ƒ Developer(name, age, gender, id, specialization)
[[Prototype]]: Object

我们可以注意到“ Developer ”构造函数继承了“ Employee ”构造函数的属性以及一个新参数“ specialization ”。在这里,我们使用 call()函数调用 Employee函数,将所需的参数传递给 Employee 构造函数。

我们还可以在传递该对象所需属性的值后使用这些构造函数创建对象。

句法:

let Obj1 = new Object( parameters )

示例:此示例描述了使用 new 关键字创建的对象,以创建具有构造函数的对象的实例。

HTML



  

     
        JavaScript inheritance of constructor functions
     

  

    

  

输出:

Employee {name: 'Suraj', age: 28, gender: 'Male', id: 564}
age: 28
gender: "Male"
id: 564
name: "Suraj"
[[Prototype]]: Object

Developer {name: 'Karishma', age: 31, gender: 'Female', id: 345, 
    specialization: 'Frontend Developer'}
age: 31
gender: "Female"
id: 345
name: "Karishma"
specialization: "Frontend Developer"
[[Prototype]]: Object

我们可以观察到,Employee 的构造函数被继承来创建一个新的构造函数Developer,它可以用来创建具有新属性的对象以及继承父构造函数的属性。