一文带你了解Js的原型、原型链与继承

ajaxsync

已于 2022-10-17 12:47:11 修改

阅读量109

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-06-02 10:54:34 首次发布

本文链接：https://blog.csdn.net/m0_61342618/article/details/125094361

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在了解"原型"之前，你需要知道"面向对象"、"构造函数"等相关知识。

面向对象

面向对象实际是一种编程方式、思想。
提到面向对象，不得不提的是面向过程。
区别：
- 面向过程，关注的是每一步如何实现。
- 面向对象，只需要关注对象能做什么事。
- 举个例子：
  - 比如你想吃冰淇淋
  - 面向对象：你直接去超市或者商店，找到冰淇淋，付钱，开吃。
  - 面向过程：你要准备冰淇淋的材料，还要知道制作的过程，制作好后，才能吃。

你可能还并没有完全了解面向对象的概念，但是没关系。再举个例子：

比如你想吃拉面，你可以选择自己制作，也可选择去面馆。
自己做就是“面向过程”，因为你需要买面，和面，拉面，煮面···最后吃面。
去面馆就是“面向对象”，因为你只需要和老板说，我要吃“牛肉拉面”，等一会就能吃面了。

你也可以去阿里云开发者社区查看大佬的解释，或自行百度。

对象的创建方式

内置构造函数

var obj = new Object();  // 创建一个对象
obj.year = 2022;  // 为对象添加一个属性
// 为对象添加一个方法
obj.hiFn = function() {
	console.log("你好，2022!")
}

字面量

// 定义一个对象，并赋初始值
var obj1 = {
    name: 'tim',
    age: 22
}

工厂函数

// 先定义一个函数
function factory() {
    // 手动创建一个对象
    var obj = new Object();
    // 手动添加属性
    obj.name = 'tim';
    obj.age = 22;
    // 手动返回这个对象
    return obj;
}
// 外部再使用
var o1 = factory();
var o2 = factory();

自定义构造函数

// 先定义一个函数
function Person(name, age) {
    // 自动创建一个对象，并赋值给this
    // this = new Object();
    // 手动添加属性
    this.name = name;
    this.age = age;
    // 自动返回这个对象
    // return this;
}
// 外部使用时，需要与new连用
var p1 = new Person('tim', 22);
console.log(p1); // { name: tim, age: 22}

构造函数知识点

构造函数与普通函数类似，之不过调用时需要与new连用
首字母用大驼峰命名，如Person、Animal···
与new连用时，内部会自动创建一个对象，并返回对象，不需要写return
构造函数内部的this，指向当前实例。函数里this的指向，由调用方式决定：
- 作为声明式函数调用：this ⇒ window
- 作为事件函数调用：this ⇒ 事件源
- 作为对象的方法调用：this ⇒ 调用方法的实例对象
- ···
书写构造函数时，除了添加属性也可以添加方法
每new一次实例，方法都会单独开辟一块空间，即使是同一个方法
因此这会造成同一个方法占用多个内存空间，所以引入了原型 prototype

原型

prototype

原型的出现，就是为了解决构造函数的缺点：同一个方法占用多个内存空间
每一个函数都自带一个属性，叫prototype，是一个对象空间，构造函数也有
可以通过函数名访问，也可以向该空间添加属性、方法，如：Person.prototype、Person.prototype.name = "tim"
在prototype虽然是通过函数添加的内容，但内容却是给实例使用的

// 定义一个函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}
// 在函数的原型上添加一个方法
Person.prototype.sleep = function() {
    console.log("人都需要睡觉，7-8小时为宜。");
}
// 使用构造函数
var p1 = new Person("tim", 22);
console.log(p1.name);   // tim
console.log(p1.age);    // 22
console.log(p1.sleep);  // 人都需要睡觉，7-8小时为宜。

proto

每一个对象都自带一个属性，叫__proto__，也是一个对象空间
实例对象也有__proto__，这个空间是指向该构造函数的prototype
所以，__proto__的地址与构造函数的prototype的地址是同一个地址
当实例访问某个属性/方法时，会从自身查找。没找到会自动去__proto__里找
通常，在书写构造函数时：
- 属性写在构造函数的内部
- 方法写在构造函数的原型上

原型链

__proto__里面有一个成员叫constructor，是指向当前对象所属的构造函数
如果，当一个对象不知道是谁构造的，就认为是由Object构造的
因为，Object是Js中的顶级构造函数，有句话叫：“万物皆对象”
所以，当找到Object.prototype时就到顶了，Object.prototype.__proto__结果是null
由此形成了一个链状结构，就是"原型链"
原型链的规则：
- 访问规则
  - 当访问一个对象的属性或方法时，会先从自身查找
  - 如果没有找到，就会自动去__proto__里查找
  - 如果还没找到，就会去__proto__的__proto__里面查找
  - 一直找到Object.prototype里面都没有找到，那么就会返回undefined
- 赋值规则
  - 当需要给一个对象的属性或方法赋值时，会先从自身查找
  - 如果找到了，就修改属性的值
  - 如果没找到，就直接添加该属性并赋值
  - 不会去__proto__里

继承

继承指的是可以让子类使用父类的属性与方法

原型继承

通过改变原型链的方式达到继承
就是将子类的原型指向父类的实例，Son.prototype = new Father();
缺点：
- 子类实例若修改了方法，会影响其他子类的方法，因为共用一个地址空间

// 父类
function Father(name){
    this.name = name;
}
// 原型上有一个方法
Person.prototype.sayHi = function(){
    console.log('hello, my son!')
} 
// 2 子类
function Son(age){
    this.age = age;
}
// 子类原型指向父类实例，就会拥有父类的属性与方法
Son.prototype = new Father('Jack');
// 使用子类，就可以使用的父类的属性与方法
var s1 = new Son(18);
console.log(s1);

构造函数继承

在子类的构造函数中，使用父类的构造函数，并修改this指向，指到子类实例
使用call来改变函数内部this指向，call(子类实例，传递给函数的参数, ...)
优点：可以将继承自父类的属性直接写在自身
缺点：
- 只能继承父类函数体里的内容，不能继承父类原型上的内容
- 因为，函数体里通常写的是属性，而方法通常是写在原型上的

// 父类
function Father(name, gender){
    this.name = name;
    this.gender = gender;            
}
Father.prototype.sayHi = function(){
    console.log('hello, my son!');
}
// 子类继承父类
function Son(age, name, gender){
    this.age = age;  // 子类自身的属性
    // 使用call将this指向当前实例，并传入父类的属性
    Person.call(this, name, gender); // 继承父类的属性
}
// 子类的实例对象，就会拥有父类的属性
var s1 = new Son(18, "小红", '女');

组合继承

由于上述两种方法，都有各自的缺点，所以将两者结合，就是组合继承
先使用构造函数继承，将属性继承到自身
再使用原型继承，将方法继承到自身
缺点：
- 子类自身原型上的方法，会被覆盖
- 所以，必须要继承以后，再为子类添加原型方法

// 父类
function Father(name, gender){
    this.name = name;
    this.gender = gender;            
}
Father.prototype.sayHi = function(){
    console.log('hello, my son!');
}
// 子类
function Son(age, name, gender){
    this.age = age;
    // 先使用构造函数 继承属性
    Father.call(this, name, gender);
}
// 再使用原型 继承方法
Son.prototype = new Father();
// 最后再添加 子类自身的方法
Son.prototype.sonFn = function(){
    console.log("我是子类自身的方法")
}
// 最终可以使用父类与子类的属性与方法
var s2 = new Student(20, "小明", '男');

ES6的类语法

学习ES6的class语法之前，先复习下之前使用构造函数如何定义属性与方法

// 构造函数
function Human(name, age){
    this.name = name;
    this.age = age;
}
// 在原型上添加方法
Human.prototype.eat = function(){
    console.log("一顿不吃饿得慌")
}

然后再来对比，ES6的类语法

// 使用关键字 class 定义一个函数
class Human{
   // 使用关键字 constructor 定义函数体内部的属性
   constructor(name, age) {
       this.name = name;
       this.age = age;
   }
   // 直接书写函数 就是在原型上定义的方法 等同于 Human.prototype.eat
   eat(){
       console.log("一顿不吃饿得慌")
   }
   // 使用关键字 static定义静态属性  该属性是给Human函数使用的
   static year = 2022;
   static sayHi = function() {
       console.log("Hello world!");
   };
}
// 实例化
var h1 = new Human("小明", 20); // 使用非static定义的属性与方法
console.log(Human.year);  // 2022 使用static定义的静态属性
console.log(Human.sayHi());  // 使用static定义的静态方法

ES6继承

可以使用extends关键字：class Son extends Father{ }
继承父类使用super关键字：super(name, age);，并且必须先写

// 父类
class Father{
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHi() {
        console.log("Hello, my son!")
    }
}
// 子类  使用extends关键字表示要继承父类
class Son extends Father{
    constructor(gender, name, age) {
        // 必须先写super，表示要继承父类的属性，并传入参数
        super(name, age);
        // 然后再书写自身的属性
        this.gender = gender; 
    }
    // 子类自身的方法
    sayHello() {
        console.log("Hello, my father!")
    }
}
// 实例就会有父类的属性与方法
var s1 = new Son("男", "李磊", 22)
console.log(s1);