一篇文章教你JS函数继承

一篇文章教你JS函数继承的完整攻略

什么是JS函数继承

JS函数继承是指一个函数可以通过继承另一个函数的属性和方法来扩展自己的功能。在JS中，可以通过原型链实现函数继承。

实现JS函数继承的步骤

1. 实现一个父类函数
2. 继承父类函数的属性和方法
3. 扩展自己的功能

实现一个父类函数

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayName = function() {
  console.log("My name is " + this.name);
}

在以上代码中，我们定义了一个名为Person的函数，它接收两个参数 name 和 age，并将它们赋值给对象本身。这里的Person.prototype是一个对象，可以向该对象中添加方法sayName。sayName方法用于在控制台输出人名。

继承父类函数的属性和方法

原型继承

function Employee(name, age, job) {
  Person.call(this, name, age);
  this.job = job;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.sayJob = function() {
  console.log("My job is " + this.job);
}

在以上代码中，我们定义了一个名为Employee的函数，并通过call方法实现了对Person函数的继承。同时，通过Object.create方法创建了Employee.prototype对象，将其原型设置为Person.prototype。对Employee.prototype添加方法sayJob，用于在控制台输出工作信息。

构造函数继承

function Manager(name, age, department) {
  Person.call(this, name, age);
  this.department = department;
}

Object.setPrototypeOf(Manager.prototype, Person.prototype);

Manager.prototype.runDepartment = function() {
  console.log("I'm running the department of " + this.department);
}

在以上代码中，我们定义了一个名为Manager的函数，并通过call方法实现了对Person函数的继承。对Manager.prototype通过Object.setPrototypeOf方法，将其原型设置为Person.prototype。对Manager.prototype添加方法runDepartment，用于在控制台输出部门信息。

扩展自己的功能

function Developer(name, age, language) {
  Person.call(this, name, age);
  this.language = language;
}

Developer.prototype = Object.create(Person.prototype);
Developer.prototype.constructor = Developer;

Developer.prototype.sayLanguage = function() {
  console.log("I'm proficient in " + this.language);
}

Developer.prototype.sayNameAndLanguage = function() {
  this.sayName();
  this.sayLanguage();
}

在以上代码中，我们定义了一个名为Developer的函数，并通过call方法实现了对Person函数的继承。对Developer.prototype创建了sayLanguage方法，用于在控制台输出开发语言信息。对Developer.prototype创建了sayNameAndLanguage方法，用于在控制台输出开发者的名字和开发语言。

示例说明

原型继承的示例说明

var employee1 = new Employee("John", 28, "Engineer");
employee1.sayName();
employee1.sayJob();

在以上代码中，我们实例化了一个Employee对象，它会输出"John"。代码调用了Employee对象的sayJob方法，并输出了"Engineer"。

构造函数继承的示例说明

var manager1 = new Manager("Bob", 35, "Development");
manager1.sayName();
manager1.runDepartment();

在以上代码中，我们实例化了一个Manager对象，它会输出"Bob"。代码调用了Manager对象的runDepartment方法，并输出了"Development"。

扩展自己的功能的示例说明

var developer1 = new Developer("Jane", 24, "JavaScript");
developer1.sayNameAndLanguage();

在以上代码中，我们实例化了一个Developer对象，它会输出"Jane"和"JavaScript"。代码调用了Developer对象的sayNameAndLanguage方法，并输出了"Jane"和"JavaScript"。