原型与原型链

最新推荐文章于 2024-09-22 09:45:54 发布

「已注销」

最新推荐文章于 2024-09-22 09:45:54 发布

阅读量272

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/duola8789/article/details/82949181

版权

JavaScript 专栏收录该内容

94 篇文章 0 订阅

订阅专栏

普通对象与函数对象

JavaScript 中，对象分为普通对象和函数对象

通过new Function创建的都是函数对象，比如Function、Object、Array、Set、Map、Proxy、Symbol等，其他的对象都是普通对象

typeof Function 
// "function"

typeof Object 
// "function"

typeof Array 
// "function"

typeof Date
// "function"

typeof Boolean
// "function"

let a = new Object()
typeof a
//"object"

function b(){}
typeof b
// 'function'

注意，Math和JSON是普通对象，而非函数对象。

构造函数

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function() {
    alert(this.name)
  }
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');

上面的例子中， person1和person2是构造函数Person的实例，两个实例都有一个constructor属性，该属性是一个指针，指向自己的构造函数

console.log(person1.constructor == Person); //true
console.log(person2.constructor == Person); //true

实例的构造函数属性（constructor）指向构造函数

函数对象的构造函数是Function，所以：

console.log(Object.__proto__ === Function.prototype); // true

`constructor`属性

上面提到了，实例的constructor属性自己的构造函数，实际上，实例本身是没有constructor属性的，它是在其构造函数的原型上继承得来的：

person1.constructor === Person.prototype.constructor
// true

而原型上Person.prototype.constructor实际上是一个指针，指向prototype属性所在函数。所以会有：

Person.prototype.constructor === Person
// true

这就导致了之前我对constructor属性有一个误解，误认为constructor属性表明了Person.prototype的构造函数就是Person。

其实这是完全错误的理解。constructor属性是为了给实例使用表明其构造函数的属性，而非标识原型自己的构造函数，原型对象的构造函数是谁呢？下面会提到。

原型对象和`proto`属性

每个对象都有一个内部属性，__proto__，而只有函数对象才有prototype属性。

原型对象

除了Function.prototype之外，其余的原型对象（Person.prototype）是一个普通的对象，它是构造函数的（Person）的一个特殊的属性。

typeof Person.prototype
// "object"

Person.prototype.prototype
// undefined

Function.prototype很特殊，它是函数对象，但它没有原型对象

typeof Function.prototype
// "function"

Function.prototype.prototype
// undefined

`proto`属性

__proto__属性是实现继承的关键，所有对象都有这个属性，这个属性指向其构造函数的原型对象，而非指向其构造函数之间

前面提到过，对象分为了普通对象和函数对象，函数对象的构造函数都是Function，而普通对象，如果是某个构造函数的实例，其构造函数就是该函数，否则普通对象的构造函数都是Object

Person.__proto__ === Function.prototype
// true

person1.__proto__ === Person.prototype
// true

原型都是普通对象（除了Function.prototype外），其构造函数都是Object，所以：

Person.prototype.__proto__ === Object.prototype
// true

Function.prototype比较特殊，它是函数对象：

typeof Function.prototype
// "function"
typeof Object.prototype
// "object"
typeof Person.prototype
// "object

但是其构造函数并不是Function，而是Object（原因可以理解为在JS中，万物皆对象），所以：

Function.prototype.__proto__ === Object.prototype; 
// true

构造器

上面提到的Person是一个构造函数，而JS内置了构造函数也可以叫做构造器，比如Object、Array等，这些构造器（除了Math和JSON外）都是函数对象，所以其构造函数都是Function，所以：

Array.__proto__ === Function.prototype
// true

Object.__proto__ === Function.prototype
// true

Math.__proto__ === Object.prototype
// true

Function.__proto__ === Function.prototype
// true

原型链

原型链的实现是通过__proto__实现的，上面基本上已经列出了原型链的大部分路径，而原型链是如何结束的呢？

在原型链的尽头：

Object.prototype.__proto__ === null; // true

将Object.prototype.__proto__指向null，原型链至此结束，正如《道德经》里所说：

无，名天地之始

练习

那么，现在尝试列出一个完整的原型链

function Person(){};
// 构造函数

const person1 = new Person();
// Person的实例

// 链条1
person1.__proto__ === Person.prototype
Person.prototype.__proto__ === Object.prototype;
Object.prototype.__proto__ === null

// 链条2
Person.__proto__ === Function.prototype
Function.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null

// 链条3
Function.__proto__ === Function.prototype
Function.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null

`null`

注意，虽然typeof null是object，但null并不是Object，它是一种基本数据类型，期望这里将引用一个对象，之所以typeof null是object是一个历史遗留bug导致的

总结

原型和原型链是JS实现继承的一种模型。
型链的形成是真正是靠__proto__而非prototype

我们再举个例子，看看前面你真的理解了吗？

const animal = function(){};
const dog = function(){};

animal.price = 2000;
dog.prototype = animal;

const tidy = new dog();

console.log(dog.price) 
console.log(tidy.price)

结果dog.price是undefined，而tidy的price是2000，这是因为：

dog.__proto__ === Function.prototype
// true

tidy.__proto__ === dog.prototype
// true

tidy.__proto__ === animal
// true

实际上的继承是通过__proto__完成的，实例（tidy）和原型对象（dog.prototype）存在一个连接。不过，要明确的真正重要的一点就是，这个连接存在于实例（tidy）与构造函数的原型对象（dog.prototype）之间，而不是存在于实例（tidy）与构造函数（dog）之间。