javascript学习笔记(十) js对象 继承

下面是“javascript学习笔记(十) js对象 继承”的攻略。

一、对象的基础知识

在JavaScript中，对象是一种键-值对的数据结构。而对象的键和值通常称作属性和方法。我们可以使用对象字面量定义一个简单的对象，如下所示：

var person = {
  name: 'Jack',
  age: 20,
  sayHi: function() {
    console.log('Hi, I am ' + this.name);
  }
};

上述代码中，我们定义了一个名为person的对象，它包含了name、age和sayHi三个属性。其中，sayHi属性是一个函数，我们可以使用person.sayHi()来调用它，输出Hi, I am Jack。

二、JS继承的概念

面向对象程序设计(OOP)的核心概念之一是继承，其基本思想是利用已有的类创建新的类。这里提一下，JavaScript中的继承是基于原型的继承，而非基于类的继承。

在JavaScript中，每个对象都有一个原型对象，它决定了该对象的属性和方法。当我们访问一个对象的属性或方法时，如果该对象本身不存在该属性或方法，JavaScript会尝试从它的原型对象中寻找，如果还是找不到，则会从原型的原型继续查找，直到查找到Object.prototype为止。

具有继承关系的父类和子类，在JavaScript中通常使用构造函数来表示。在子类构造函数中，我们可以使用call方法调用父类的构造函数来初始化子类的属性，从而实现继承的效果。下面是一个示例代码：

// 定义一个父类
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHi = function() {
  console.log('Hi, I am ' + this.name);
}

// 定义一个子类
function Student(name, age, grade) {
  Person.call(this, name, age);
  this.grade = grade;
}

// 建立继承关系
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// 在子类中定义自己的方法
Student.prototype.sayGrade = function() {
  console.log('My grade is ' + this.grade);
}

var student = new Student('Tom', 18, 90);
student.sayHi(); // 输出 "Hi, I am Tom"
student.sayGrade(); // 输出 "My grade is 90"

在上述代码中，我们定义了一个名为Person的父类和一个名为Student的子类。在子类的构造函数中，我们调用了父类的构造函数，并传入了name和age两个参数。然后，我们使用Object.create方法创建了一个新的对象，并将其原型对象设置为父类的原型对象，从而建立了继承关系。最后，在子类中定义了一个新的方法sayGrade，并在子类的实例中调用了该方法。

三、JS继承的方式

在JavaScript中，实现继承的方式有很多种，下面简单介绍一下常用的几种：

1.原型链继承

原型链继承是最经典的继承方式之一，它的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。具体实现参考如下代码：

// 定义一个父类
function Animal(name) {
  this.name = name;
}

Animal.prototype.sayHi = function() {
  console.log('Hi, I am ' + this.name);
}

// 定义一个子类
function Cat(name) {
  this.color = 'white';
}

// 建立继承关系
Cat.prototype = new Animal();

// 在子类中定义自己的方法
Cat.prototype.sayColor = function() {
  console.log('My color is ' + this.color);
}

// 创建子类的实例并调用其方法
var cat = new Cat('Mimi');
cat.sayHi();
cat.sayColor();

在上述代码中，我们通过将子类的原型对象设置为父类的实例来实现继承。这样，子类就可以访问到父类中定义的属性和方法。但是，在使用原型链继承时，由于子类的原型对象是父类的实例，子类的实例可能会共享同一个父类实例的属性和方法。这可能会导致一些意想不到的问题，因此在使用时需要注意潜在的风险。

2. 构造函数继承

构造函数继承是将父类的构造函数作为子类的构造函数的一部分来运行，从而实现继承的方式。具体实现参考如下代码：

// 定义一个父类
function Animal(name) {
  this.name = name;
}

Animal.prototype.sayHi = function() {
  console.log('Hi, I am ' + this.name);
}

// 定义一个子类
function Cat(name) {
  Animal.call(this, name);
  this.color = 'white';
}

// 在子类中定义自己的方法
Cat.prototype.sayColor = function() {
  console.log('My color is ' + this.color);
}

// 创建子类的实例并调用其方法
var cat = new Cat('Mimi');
cat.sayHi();
cat.sayColor();

在上述代码中，我们通过在子类的构造函数中调用父类的构造函数，并且通过使用call方法确保在子类中创建的新对象将会成为父类中的this。这样，子类就可以访问到父类中定义的属性和方法。但是，在使用构造函数继承时，子类无法访问父类原型对象中定义的属性和方法。

3. 组合继承

组合继承是将原型链继承和构造函数继承组合起来使用的一种继承方式，它的基本思想是使用构造函数继承来继承实例属性，而使用原型链继承来继承原型属性。具体实现参考如下代码：

// 定义一个父类
function Animal(name) {
  this.name = name;
}

Animal.prototype.sayHi = function() {
  console.log('Hi, I am ' + this.name);
}

// 定义一个子类
function Cat(name) {
  Animal.call(this, name);
  this.color = 'white';
}

// 建立继承关系
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

// 在子类中定义自己的方法
Cat.prototype.sayColor = function() {
  console.log('My color is ' + this.color);
}

// 创建子类的实例并调用其方法
var cat = new Cat('Mimi');
cat.sayHi();
cat.sayColor();

在上述代码中，我们通过在子类中对父类进行构造函数调用实现了对实例属性的继承；使用Object.create方法创建了一个新的对象，并把父类原型对象复制到其中，从而建立了继承关系。这样，子类就可以同时访问到父类的实例属性和原型属性。但是，在使用组合继承时，我们需要调用两次父类的构造函数，这可能会产生一些性能上的问题。

四、总结

通过上述讲解，我们可以知道实现JavaScript继承的方式有很多种，包括原型链继承、构造函数继承和组合继承等等。我们应根据重用的需要和继承的复杂度，来选择不同的继承方式。