javascript 实现继承

最新推荐文章于 2024-09-08 22:14:29 发布

原创最新推荐文章于 2024-09-08 22:14:29 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript继承 #继承

Web前端同时被 3 个专栏收录

66 篇文章

订阅专栏

javascript

60 篇文章

订阅专栏

ES6

55 篇文章

订阅专栏

本文详细介绍了在ES6中如何使用类和继承特性来简化JavaScript的面向对象编程。通过对比ES6之前复杂的继承实现方式，展示了使用class和extends关键字进行类定义和继承的简洁性和有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现继承

1.ES6之前的版本重中实现继承是一件痛苦个事。如下面代码：

function Person() {}
Person.prototype.dance = function(){};
function NinjaTest() {}
NinjaTest.prototype = new Person();
Object.defineProperty(NinjaTest.prototype, "constructor",{
    enumerable: false,
    value:NinjaTest,
    writable:true
});

这里需要记住几点：对所有实例均可访问的方法必须直接添加在构造函数的原型上。如Person构造函数上的dance方法。为了实现继承，我们必须将实例对象衍生的原型设置成“基类”。在上面的代码中，我们将一个新的Person实例对象赋值NinjaTest.prototype。糟糕的是，这回弄乱constructor属性，所以需要通过Object.defineProperty方法进行手动投置。

console.log("--------------------------在ES6中实现继承------------------------");
class Person{
  constructor(name) {
    this.name = name;
  }

  dance() {
    return true;
  }
}

//使用关键字‘extends’实现继承
class NinjaTest extends Person {
  constructor(name, weapon) {
    //使用关键字'super'调用基类构造函数
    super(name);
    this.weapon = weapon;
  }

  wieldWeapon() {
    return true;
  }
}

var person = new Person("Bob");
if (person instanceof Person) {
  console.log("A person's a person.");
}
if (person.dance()) {
  console.log("A person can dance");
}
if (person.name === 'Bob') {
  console.log("We cam call it by name.");
}
if (!(person instanceof NinjaTest)) {
  console.log("but it is not a NinjaTest");
}
if(!("wieldWeapon" in person)) {
  console.log("And it cannot wield a weapon");
}

var ninjaTest = new NinjaTest("Yoshi", "Wakizashi");
if (ninjaTest instanceof NinjaTest) {
  console.log("A ninjaTest's a ninjaTest!");
}
if (ninjaTest.wieldWeapon()) {
  console.log("That can wield a weapon");
}

if (ninjaTest instanceof Person) {
  console.log("but it is also a person.");
}

if (ninjaTest.name === 'Yoshi') {
  console.log("That has a name");
}

if (ninjaTest.dance()) {
  console.log("And enjoys dancing");
}