面向对象原型继承（ES5）

普通对象原型(隐式原型)

JavaScript中的每个对象都有一个特殊的内置属性[[prototype]],它实际上是一个对象，指向的是另外一个对象

[[prototype]]的作用
- 当我们通过引用对象的 key获取一个value时候，实际上会触发get的对象操作
- 这个操作 首先会查找对象本身有没有这个key，如果有的话直接使用
- 没有这个 key，那么会访问对象内置属性[[prototype]]指向的对象上，有没有这个属性

let obj = {
  a: 100,
  b: 200,
};

//__proto__是浏览器自动加的
console.log(obj.__proto__);
//这是标准获取方法
console.log(Object.getPrototypeOf(obj));

函数的原型（显式原型）

所有的函数都有一个prototype属性 注意不是 __proto__

我们知道，一个函数可以当作构造函数来使用，通过new，创建新的对象

function Foo(){
    
}
/*
通过new方法创建的对象，内部会帮我们做以下事情
	1.首先在函数内部创建一个空对象
	2.将对象的__proto__（隐式原型）指向函数的prototype（显式原型的作用）
	3.将空对象赋值给this
	4.执行函数体中的代码
	5.将这个对象默认返回
*/
let newFoo = new Foo()
//通过步骤2我们可以得知，newFoo对象的隐式原型就是Foo函数的显式原型
newFoo.__proto__ === Foo.prototype
//无论通过Foo函数创建多少对象，这些对象的隐式原型都是相等的，均指向Foo函数的显式原型

通过以上代码，将函数的显式原型赋值给对象的隐式原型就是 显式原型的作用；
那么知道了它的作用，接下来可以看一个小案例，加深以下体会（将 方法放在原型上）
- 首先我们知道，我们可以通过构造函数来创建一个又一个的对象，这是为了将多个对象的共同的内容抽象到一起
```
//创建一个学生构造函数
function Student(stuName,age){
    this.stuName = stuName;
    this.age = age;
    //每个学生都有这个方法
    this.study = function () {
        console.log(this.stuName + "正在学习");
    };
}

//这样我们就可以创建多个对象
let stu1 = new Student("zhangsan",18)
let stu2 = new Student("zhangsan2",18)
let stu3 = new Student("zhangsan3",18)
let stu4 = new Student("zhangsan4",18)
```
- 但是新的问题随之而来，每创建一个对象，都会生成一个study的方法，当生成足够多对象的时候，会占用内存
- 那么通过 显式原型和隐式原型的关系我们可以知道，将共有的方法提取到 显式原型上即可
```
function Student(stuName, age) {
  this.stuName = stuName;
  this.age = age;
}

Student.prototype.study = function () {
    //这里的this指向，在前面的文章解释过，通过隐式绑定，指向的就是调用方法的对象
   console.log(this.stuName + "正在学习");
};

let stu1 = new Student("zhangsan", 20);
let stu2 = new Student("lisi", 18);

console.log(stu1.stuName, stu1.age);
console.log(stu2.stuName, stu2.age);
stu1.study()
stu2.study()
```
- 通过 将方法提取到构造函数的显式原型上，就可以解决以上的问题，以下是模拟的内存图
- 通过内存模拟图我们可以看出
  - 无论创建多少对象，study方法都只会有一份
  - 每个对象都有 隐式原型，这个 隐式原型是通过构造函数的 显式原型赋值过去的
  - 因此对象在调用study方法的时候：首先在自己身上找，发现没有就会顺着原型链找到所指向的显式原型
- 因此当多个对象拥有共同的值时，我们可以放到构造函数的显式原型中
  - 由构造函数创建的所有对象，都会共享这些属性

显式原型中的属性

显式原型中有一个属性construtor

我们打印显式原型，会发现有一个construtor的属性，同时打印这个属性发现是函数本身
```
function Foo(){
    
}

console.log(Foo.prototype)//construtor
console.log(Foo.prototype.construtor)//Foo
```
试着画出以下代码的内存图
```
function Student(stuName, age) {
  this.stuName = stuName;
  this.age = age;
}
Student.prototype.study = function () {
  console.log(this.stuName);
};

let stu1 = new Student("zhangsan", 20);
let stu2 = new Student("lisi", 18);

stu1.address = "河北";
stu1.num = "18213";

Student.prototype.classRoom = "ruanjian";

stu1.classRoom = "jisuanji";
console.log(stu2.classRoom);

stu1.study();
```
- 结合内存图，再看代码的运行情况，就可以明白以上的几点结论
  - 构造函数有自己的 显式原型对象
  - 构造函数创建对象时候，将对象的 隐式原型，指向自己的显式原型对象
  - 对象在调用方法，访问对象的时候，会优先在自己身上查找，没有的话再通过 隐式原型去查找

重写函数显式原型对象

当我们要再函数显式原型上 添加大量的属性以及方法的时候，可以考虑重写显式原型

function Student(stuName, age) {
  this.stuName = stuName;
  this.age = age;
}

Student.prototype.study = function () {
  console.log(this.stuName);
};
Student.prototype.num1 = 123;
Student.prototype.num2 = 456;

//可以这样重写显式原型对象
Student.prototype = {
    study:function () {
        console.log(this.stuName);
    },
    num1:123,
    num2:456
}

但是重写完只会，我们会发现 重写的显式原型对象，缺失了constructor属性

Student.prototype = {
    study:function () {
        console.log(this.stuName);
    },
    num1:123,
    num2:456,
    //可以直接这样写上该属性
    constructor:Student
}
//但是原本的constructor属性，是不可枚举的，且数据属性描述符需要特殊设置
Object.defineProperty(Student.prototype,constructor,{
    value:Student
    //设置其他的数据属性描述符即可
})

面向对象的特性 – 继承

面向对象的三大特性：封装、继承、多态

封装：将多个对象中，相同的属性，写到一个类中的思想就是封装的思想
继承：**继承是面向对象中非常重要的特性，**是多态的前提（纯面向对象中）
- 可以帮助我们 **将重复的代码抽取到一个父类中，**子类只需要继承过来使用即可
- 在JS中实现，需要了解继承
多态：不同的对象再执行时表现出不同的形态（JS中不明显）

对象的原型链

默认形式的原型链

//当我们创建一个对象的时候
//这种创建方式相当于：let obj = new Object()
//通过上面的学习，我们可以知道obj.__proto__ === Object.prototy
//而Object.prototype作为对象也有自己的隐式原型，它的隐式原型指向null
let obj = {
    name:"zhangcheng"
}

重学JavaScript高级（六）：以面向对象（ES5）搞懂原型原型链

因此通过以上理论，我们可以对原型对象进行改造

//当我们在obj上面查找message的时候，自身没有，就会顺着去查找它的原型，一层一层的往上找
let obj = {
  name: "zhangcheng",
};

obj.__proto__ = {
  message: "hello aaa",
};

obj.__proto__.__proto__ = {
  message: "hello bbb",
};
obj.__proto__.__proto__.__proto__ = {
  message: "hello ccc",
};

console.log(obj.message);

重学JavaScript高级（六）：以面向对象（ES5）搞懂原型原型链

通过把对象的隐式原型改造，让其一层一层的去查找，这样就形成了原型链
同时这就是继承的思想，我们可以创建一个父类，创建的子类去 继承父类，子类实例出来的对象，在查找值的时候，首先在自身查找，之后会顺着原型链，去子类查找，子类若没有，就会查找父类，最后会查找到 Object的原型对象—>null

通过原型链实现继承

既然了解了理论，那么我们就开始使用原型链实现继承（ES5），有可能在使用定义变量用的ES6的语法，但是思想是最重要的

现在有Peoson和Student两个类，要实现Student继承Person

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

Person.prototype.running = function () {
  console.log("running");
};



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

Student.prototype.running = function () {
  console.log("running");
};
Student.prototype.study = function () {
  console.log("studying");
};

在真正实现继承之前，我们先看以下操作
- 这样虽然可以让stu1对象成功调用running
- 但是在给Student类添加方法的时候，实际上是给Person类添加的方法（详见内存图）

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

Person.prototype.running = function () {
  console.log("running");
};

//方式一：将Student的显式原型直接指向Peoson的显式原型
//或者将stu1的隐式原型指向Peoson的显式原型
Student.prototype = Person.prototype;

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

//Student.prototype.running = function () {
 // console.log("running");
//};
Student.prototype.study = function () {
  console.log("studying");
};
let stu1 = new Student("zhangcheng", 18, 2002);
stu1.running();

重学JavaScript高级（六）：以面向对象（ES5）搞懂原型原型链

很明显，以上的操作方法，并不是我们想要的

组合借用继承

这种方式是ES5最常用的继承方法，但是只是基本实现了继承，依旧存在很多缺点
- 通过第三方，实现父类方法的继承（用父类创建一个对象，让子类的显式原型指向这个对象本身）
- 借用构造函数，实现父类属性的继承（继承最大的用处是提高代码的复用，因此父类存在的属性，子类没有必要再写一份）

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

Person.prototype.running = function () {
  console.log("running");
};

//方式一：pass
// Student.prototype = Person.prototype;

//借用第三方，实现方法继承
let p = new Person();
Student.prototype = p;

function Student(name, age, classroom) {
  //借用构造函数的方式实现属性继承
  Person.call(this, name, age);
  this.classroom = classroom;
}

// Student.prototype.running = function () {
//   console.log("running");
// };
Student.prototype.study = function () {
  console.log("studying");
};
let stu1 = new Student("zhangcheng", 18, 2002);
console.log(stu1.name, stu1.age, stu1.classroom);
stu1.running();
stu1.study();

重学JavaScript高级（六）：以面向对象（ES5）搞懂原型原型链

通过组合借用继承的缺点
- 无论在什么情况下 都会调用两次父类的构造函数
  - 通过父类创建一个实例，在子类的函数中，通过构造函数继承属性
- 所有的子类实例 事实上会有两份父类属性
  - 一份存在实例对象上，另外一份存在父类创建的实例对象上

寄生组合式继承

是最终的解决方案

原型式继承函数

这种思想是道格拉斯·克罗克福德提出来的

为了理解这种思想，我们需要回顾一下上面为了实现方法继承的目的
- 在上面实现 方法继承，我们通过new 一个父类创建一个对象，但是会存在一些弊端
- new 方法实现了以下的功能：
- 1.创建一个空对象；
- 2.将父类的 显式原型赋值给对象的 隐式原型

因此为了 满足以上条件，且 不出现两份父类的元素，就出现了以下代码

//传入的o是父类的显式原型对象
function F(o){
    //让该函数的显式原型，指向父类的显式原型
    F.prototype = o
    //返回一个F类的对象，这个对象的隐式原型--->F类的显式原型--->o的显式原型
    return new F()
}

function Person(){
    
}
function Student(){
    
}
//这样就将Student的显式原型指向了新创建出来的对象
Student.prototype = F(Person.prototype)

//这样的继承方式，就不会有两份父类的属性

重学JavaScript高级（六）：以面向对象（ES5）搞懂原型原型链

通过以上思想，也可以使用Object.create()来创建

Object.create()方法创建的对象，需要手动指定该对象的隐式原型指向哪里

以下是实现的具体代码

function inherit(Subtype, Supertype) {
  //将子类的显式原型对象，指向新创建的对象
  //该对象的隐式原型对象，指向的是父类的显式原型对象
  Subtype.prototype = Object.create(Supertype.prototype);
  //给子类的显式原型对象，设置constructor
  Object.defineProperty(Subtype.prototype, "construtor", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: Subtype,
  });
}
//创建父类
function Person(name, age) {
  this.name = name;
  this.age = age;
}
//给父类添加方法
Person.prototype.running = function () {
  console.log("running");
};

//创建子类
function Student(name, age, classroom) {
  //借用构造函数的方式实现属性继承
  Person.call(this, name, age);
  this.classroom = classroom;
}

//使子类继承父类
inherit(Student, Person);

//给子类添加方法
//一定要写在继承之后！！
Student.prototype.study = function () {
  console.log("studying");
};

let stu1 = new Student("zhangcheng", 18, 2002);
console.log(stu1.name, stu1.age, stu1.classroom);
stu1.running();
console.log(stu1);
stu1.study();

Object是所有类的父类

函数对象最终也是继承自Object

Object.prototype.message = "zhangcheng"
function foo(){}
foo.message//zhangcheng

所以，我们创建出来的对象，可以使用toString等方法，是因为Object上面有这些方法

原型继承关系图（重要）

重学JavaScript高级（六）：以面向对象（ES5）搞懂原型原型链

首先要明确：构造函数以函数角度看时有相应的显式原型（prototype）;以对象角度（每个函数都可看成一个对象）有相应的 隐式原型（__proto__）
第二点：所有对象的隐式原型都指向**，创建它的，构造函数的显式原型**（Object.prototype的隐式原型除外，它指向null）
- 而构造函数的显式原型，本身就是对象，均由Object实例化出来的—>所以都指向Object的显式原型
第三点：Function/Object/Foo/所有函数都是Function的实例对象（均new Function()方式创建）
- 因此所有函数对象的隐式原型均指向创建它的构造函数的显式原型
因此 Object是Function的父类，Function是Object的构造函数

构造函数的实例方法和类方法

实例方法：只能通过创建出来的实例进行调用
类方法：：只能通过构造函数调用

//构造函数Person
function Person(name) {
  this.name = name;
}
//只能通过p1调用：实例方法
Person.prototype.study = function () {
  console.log("123");
};

//只能通过Person进行调用：类方法
Person.running = function () {
  console.log("456");
};

let p1 = new Person();
p1.study();
Person.running();

对象方法补充

hasOwnProperty

判断某个属性，是否属于对象本身的（不是在原型上的属性）

function Person(name){
    this.name = name
}
function Student(className){
    this.className = className
}
//Student 继承自 Person
let stu1 = new Student(2002)
stu1.hasOwnProperty("className")//true

stu1.hasOwnProperty("name")//false

in/for in

判断某个属性是否在某个对象上，或者原型上

function Person(name){
    this.name = name
}
function Student(className){
    this.className = className
}
//Student 继承自 Person
let stu1 = new Student(2002)
console.log("name" in stu1)//true
console.log("className" in stu1)//true

//注意，for  in  遍历对象的时候，会将原型链上出现的属性都遍历出来
for(let key in stu1){
    console.log(key)
}

instanceof

用于检测 构造函数的显式原型，是否出现在 某个实例对象原型链上
也可以大致理解为，某个实例对象，是否是该构造函数创造出来的

这个原理就是

会顺着stu1的隐式原型去查找，看所对应的原型上的constructor是否返回了所写内容
我们指定原型对象上面的constructor返回的是构造函数本身

function Person(name){
    this.name = name
}
function Student(className){
    this.className = className
}
//Student 继承自 Person
let stu1 = new Student(2002)

console.log(stu1 instanceof Student)//true
console.log(stu1 instanceof Person)//true

isPrototypeOf

用于检测某个对象，是否出现在某个实例对象的原型链上
- 也可以大致理解为：对象与对象之间的关系
- 用的比较少

原文链接：https://juejin.cn/post/7319297259644272674 作者：前端大菜鸟_

重学JavaScript高级（六）：以面向对象（ES5）搞懂原型原型链

面向对象原型继承（ES5）

普通对象原型(隐式原型)

函数的原型（显式原型）

显式原型中的属性

重写函数显式原型对象

面向对象的特性 – 继承

对象的原型链

通过原型链实现继承

组合借用继承

寄生组合式继承

原型式继承函数

Object是所有类的父类

原型继承关系图（重要）

构造函数的实例方法和类方法

对象方法补充

hasOwnProperty

in/for in

instanceof

isPrototypeOf

相关推荐

发表回复