老生常谈——原型prototype

69 阅读2分钟

前言:首先我们要知道原型链有什么用?

* 最简单的说法就是可以实现"对象"之间属性的继承
* 原型链的使用也可以减少重复代码的编写
* 同时也是 JS 中面相对象编程的基础机制之一

1. 有哪些可以称之为对象呢(原型链中)?

1.1 实例对象

 对于从构造函数 new 出来的实例(实例化)就叫实例对象
 实例对象都是通过原型链来继承自身原型对象的属性和方法的

1.2 原型对象

由构造函数或者类的 prototype 属性来指向的对象就叫原型对象
原型对象包含共享的属性和方法,这些属性方法可以被我们的实例对象所继承

1.3 原型对象的原型对象(套娃)

每个原型对象本质也是一个对象,所以它自己也有自己的原型对象
也就是说可以逐一往上深究~,而这个往上找的过程就行程了一个链条,名为"原型链"

1.4 Object.prototype

原型链的最顶层,也就是套娃套到了尽头,所有的对象都继承它,再往上找就是 null

2. 关系图

1.jpg

3. 分析

使用构造函数(内置)创建对象
* const arr = new Array();
* const str = new String('Hello');
* const num = new Number(42);
* const bool = new Boolean(true);
* const date = new Date();
* const regex = new RegExp('[A-Za-z]+');
......

使用字面量语法创建对象(日常使用的方法)
* [] 创建数组
* '' 创建字符串
* true 创建布尔值
......

_proto_是 JS 对象的内部属性,用于指向对象的原型(prototype)
constructor是 JS 对象的属性,用于指向对象的构造函数
Object 是所有的对象的基础,也可以理解为是顶级对象

4. 应用

4.1. 继承

function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  console.log(this.name + '正在干饭!');
};

function Cat(name) {
  this.name = name;
}

//继承了 Animal 的方法
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.meow = function() {
  console.log('喵~');
};

let cat = new Cat('臭圆');
cat.eat(); // 臭圆正在干饭!
cat.meow(); //喵~

4.2. 扩展

Array.prototype.sum = function() {
  return this.reduce(function(total, num) {
    return total + num;
  }, 0);
};

var numbers = [1, 2, 3, 4, 5];

//这个时候任何数组都可以使用 sum 方法了
console.log(numbers.sum()); // 输出: 15

注:修改内置对象可能导致意外冲突,谨慎修改