JavaScript 继承

146 阅读2分钟

前端答题(六) zgn 2022.2.19

导读

  • 前置知识简介
  • 基于原型的基础
  • 基于类的继承

一、前置知识简介

  • 继承简介(MDN)

JavaScript 常被描述为一种基于原型的语言 (prototype-based language) ——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain) ,它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

准确地说,这些属性和方法定义在Object的构造器函数之上的prototype属性上,而非对象实例本身。

  • new 简介

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

二、基于原型的继承

  • 原型可以说是js基础中,前期最难学习的部分,简单来说JS在创建对象的时候,都有一个叫做__proto__的内置属性, 用于指向创建它的函数对象的原型对象prototype。
  • 我们创建一个构造函数,用来构造对应的对象,将他们共有的属性都存在原型中,无需重复声明,该对象就可以调用原型中的属性。
  • 示例

function Person(name) {
    this.name = name;
} // 构造函数

Person.prototype.sayname = function () {
    return console.log('你好,我是' + this.name)
} // 将共有属性添加到原型
let b = new Person('小张'); // 使用new 构造
let c = new Person('小王');
b.sayname(); // 无需重复声明 就可以使用原型定义的共有属性
c.sayname();
console.log(b.constructor) // [Function: Person] 输出b的构造函数

每个实例对象都从原型中继承了一个constructor属性,该属性指向了用于构造此实例对象的构造函数。

三、基于类的继承

  • 类是用于创建对象的模板。他们用代码封装数据以处理该数据。 JS中的类建立在原型上,但也具有某些语法和语义未与ES5类相似语义共享。

  • 类大大简化了代码并且易于管理,继承避免了对一般类和特殊类之间共同特征进行的重复描述。比如父类有一个属性,子类只需继承,就不需要再声明了。

示例语法

class Person {
    constructor(age) {
        this.age = age;
    }
    sayage() {
        return console.log('你好,我今年' + this.age)
    }
} //定义Person类
let b = new Person(25);
let c = new Person(15)
b.sayage(); // 你好,我今年25
c.sayage(); // 你好,我今年15

注意:函数声明类声明之间的一个重要区别在于, 函数声明会提升,类声明不会。你首先需要声明你的类,然后再访问它

let b = new Person(25);
let c = new Person(15)
b.sayage();
c.sayage();
class Person {
    constructor(age) {
        this.age = age;
    }
    sayage() {
        return console.log('你好,我今年' + this.age)
    }
} // 报错:ReferenceError: Cannot access 'Person' before initialization