javaScript原型链

计算机知识思维导图：javaScript原型链。网页展示前三层结构，可在线查看完整脑图并下载 GoMind 文件。

2026-08-25

计算机知识学习资料思维导图

## javaScript原型链
### javaScript原型链
#### 概念
##### JavaScript之继承（原型链）
##### 数据结构
#### prototype、__proto__的关系
##### dir(Array)
##### dir(new Array())
##### Array.prototype
##### Array.
##### 构造指向自己
##### __proto__
##### 进化链指针
##### JS内置构造器和自定义函数都是Function构造器的原型(prototype)
##### 只有Function.prototype是函数(function)类型
##### 不能new的目标
#### 继承控制
##### Object
##### class
##### function
#### 构造 Constructor
##### 声明对象
##### 实例对象

## javaScript原型链图解
### javaScript原型链图解
#### new Person()
##### \*
##### not prototype
##### __proto__
#### Person
##### \*
##### prototype
##### Untitled node
##### __proto__
#### Function
##### \*
##### prototype
##### Untitled node
##### __proto__
#### Object原型
##### prototype
#### Object
##### \*
##### prototype
##### __proto__
#### new Object()
##### \*
##### __proto__

## javaScript自定义继承图解
### javaScript自定义继承图解
#### People
##### prototype
##### __proto__ === Function.prototype
#### Chinese
##### prototype
##### __proto__ === Function.prototype (未受prototype赋值的继承影响)
#### new Chinese()
##### __proto__ === Chinese.prototype
##### constructor function(){}
#### Object原型
##### prototype
#### Function
##### \*
##### prototype
##### Untitled node
##### __proto__
#### new People()
##### Object.create(People.prototype);
##### __proto__
#### English
##### prototype
##### __proto__ === Function.prototype (未受prototype赋值的继承影响)
#### new English()
##### __proto__ === Chinese.prototype
##### constructor function(){}

> 仅展示前三层结构；请在线查看完整脑图或下载 GoMind 文件。

javaScript原型链

javaScript原型链

JavaScript之继承（原型链）

自己的构造,指向自己. 无限循环

Person.prototype.constructor === Person;

constructor(构造方法)

指向Object对象prototype(原型)

Person.prototype.__proto__ === Object.prototype

__proto__(原型链)

prototype(原型)

Person.__proto__ === Function.prototype

Function.__proto__ === Function.prototype

同时Function对象的__proto__(原型链)也指向Function的prototype(原型)

Untitled node

第一层指向,Function对象prototype(原型)

Person.__proto__.__proto__ === Object.prototype

Untitled node

第二层指向,Object对象prototype(原型)

Person.__proto__.__proto__.__proto__ === null

第三次指向,null

__proto__(原型链/遗传进化链)

Untitled node

var Person = function(){}; Person.prototype.type = 'Person'; Person.prototype.maxAge = 100;

实例对象没有prototype原型属性

new Person().__proto__ === Person.prototype

第一层指向,Person对象prototype(原型)

new Person().__proto__.__proto__ == Object.prototype

第二层指向,Object对象prototype(原型)

new Person().__proto__.__proto__ === Person.__proto__.__proto__

第二层指向,还等同Person对象的第二层指向

new Person().__proto__.__proto__.__proto__ === null

第三次指向,null

仅具有__proto__(原型链)

Untitled node

var p = new Person(); console.log(p.maxAge); p.name = 'rainy';

数据结构

概念

Untitled node

dir(Array)

true

new Array().__proto__ === Array.prototype

dir(new Array())

Untitled node

Array.prototype

可访问form直接方法

也可访问Array.__proto__内方法

也可访问Array.__proto__.__proto__.... 内方法[继承]

Untitled node

.hasOwnProperty("")

检验是否非进化链__proto__继承的属性

Array.

true

Array.prototype.constructor === Array

function Array() { [native code] }

Array.prototype.constructor.prototype.constructor.prototype.constructor ....

构造指向自己

Untitled node

遗传进化链 or 进化链指针

__proto__

new String().__proto__ === String.prototype

进化链指针

true

Array.__proto__ === Function.prototype

true

String.__proto__ === Function.prototype

true

Function.__proto__ === Function.prototype

JS内置构造器和自定义函数都是Function构造器的原型(prototype)

Untitled node

为了保证函数构造器们的__proto__指向的都是函数

只有Function.prototype是函数(function)类型

没有构造函数(不是函数),不能new

Untitled node

function才有构造,object没有

Untitled node

不能new的目标

prototype、__proto__的关系

Object.setPrototypeOf(child, parent);

(function () {

  'use strict';



  var parent = {

    foo() {

      console.log("Hello from the Parent");

    }

  }



  var child = {

    foo() {

      super.foo();

      console.log("Hello from the Child");

    }

  }



  Object.setPrototypeOf(child, parent);

  child.foo(); // Hello from the Parent

               // Hello from the Child

})();

Object.prototype.extend

Object

class Porsche extends Car

(function () {

  'use strict';



  class Car {

    constructor() {

      console.log("Creating a new car");

    }

  }



  class Porsche extends Car {

    constructor() {

      super();

      console.log("Creating Porsche");

    }

  }



  let c = new Porsche();



})();

class

Untitled node

child.prototype = Object.create(parent.prototype)

注意,覆盖会造成自身数据结构的丢失

如需自定义数据结构需要在inherits()后赋予

function English(name, age, language) {

  People.call(this, name, age);

  this.language = language;

}



inherits(English, People);



// 需要在inherits其后进行,负责会被覆盖性丢失

English.prototype.introduce = function () {

  console.log('Hi, I am ' + this.getName());

  console.log('I speak ' + this.language);

}

通过prototype的覆盖获得parent所有的数据结构

作用

inherits(Chinese, People)

function inherits(child, parent) {

  var _proptotype = Object.create(parent.prototype);

  _proptotype.constructor = child.prototype.constructor;

  child.prototype = _proptotype;

}



function People(name, age) {

  this.name = name;

  this.age = age;

  console.log('people.');

}



People.prototype.getName = function () {

  return this.name;

}



function English(name, age, language) {

  People.call(this, name, age);

  this.language = language;

  console.log('English.');

}





// inherits(English, People);

dir(English)

Untitled node

调用call,使用当前this(English)执行People函数

作用

People.call(this, name, age)

function inherits(child, parent) {

  var _proptotype = Object.create(parent.prototype);

  _proptotype.constructor = child.prototype.constructor;

  child.prototype = _proptotype;

}



function People(name, age) {

  this.name = name;

  this.age = age;

  console.log('people.');

}



People.prototype.getName = function () {

  return this.name;

}



function English(name, age, language) {

//   People.call(this, name, age);

  this.language = language;

  console.log('English.');

}

inherits(Chinese, People) & People.call(this, name, age)

function inherits(child, parent) {

  var _proptotype = Object.create(parent.prototype);

  _proptotype.constructor = child.prototype.constructor;

  child.prototype = _proptotype;

}



function People(name, age) {

  this.name = name;

  this.age = age;

}



People.prototype.getName = function () {

  return this.name;

}



function English(name, age, language) {

  People.call(this, name, age);

  this.language = language;

}



inherits(English, People);



English.prototype.introduce = function () {

  console.log('Hi, I am ' + this.getName());

  console.log('I speak ' + this.language);

}



function Chinese(name, age, language) {

  People.call(this, name, age);

  this.language = language;

}



inherits(Chinese, People);



Chinese.prototype.introduce = function () {

  console.log('你好，我是' + this.getName());

  console.log('我说' + this.language);

}



var en = new English('Byron', 26, 'English');

var cn = new Chinese('色拉油', 27, '汉语');



en.introduce();

cn.introduce();

function

继承控制

Untitled node

声明对象

function Prince(name, age) {

    // [new obj()] 函数内部可以使用this关键字在构造函数内部，this指向的是构造出的新对象

    this.gender = "male";

    this.kind = true;

    this.rich = true;

    this.name = name;

    this.age = age;

  }



  // 通过原型链-增加函数方法

  Prince.prototype.toFrog = function () {

    console.log("Prince " + this.name + " turned into a frog.");

  };



  var prince = new Prince("charming", 25);// 构造函数Prince()中的this指向新创建的对象prince

  prince.toFrog();//Prince charming turned into a frog.

  console.log(prince);

  console.log(prince.kind);//true

  console.log(prince.age);// 25 - 实例才能访问到

  console.log(Prince.age);// undefined - 不能用类型名访问

Untitled node

实例对象

class Person {



    /* 默认方法，通过new命令生成对象实例时，自动调用该方法 */

    constructor(name, age, job) {

      this.name = name;

      this.age = age;

      this.job = job;

    }



    sayName() {

      console.log(this.name);

    }

  }



  var friend = new Person("Nicholas", 29, "Software Engineer");

  friend.sayName();// Nicholas

  console.log(friend.age);// 29

构造 Constructor

javaScript原型链图解

javaScript原型链图解

not prototype

not __proto__

__proto__

new Person().__proto__ === Person.prototype

new Person().__proto__.__proto__ === Object.prototype

new Person().__proto__.__proto__.__proto__ == null

new Person()

...

constructor

not __proto__

_proto__

证明指向:

Function.prototype.__proto__.debug = true;

Person.prototype.__proto__

prototype

Untitled node

not __proto__

__proto__

Person

constructor

__proto__

prototype

Untitled node

__proto__

Function.__proto__ === Function.prototype

Function

not __proto__

prototype

Object原型

not __proto__

prototype

__proto__

Object

not __proto__

__proto__

new Object()

javaScript自定义继承图解

javaScript自定义继承图解

function inherits(child, parent) {

  var _proptotype = Object.create(parent.prototype);

  _proptotype.constructor = child.prototype.constructor;

  child.prototype = _proptotype;

}



function People(name, age) {

  this.name = name;

  this.age = age;

}



People.prototype.getName = function () {

  return this.name;

}



function English(name, age, language) {

  People.call(this, name, age);

  this.language = language;

}



inherits(English, People);



English.prototype.introduce = function () {

  console.log('Hi, I am ' + this.getName());

  console.log('I speak ' + this.language);

}



function Chinese(name, age, language) {

  People.call(this, name, age);

  this.language = language;

}



function inherits(child, parent) {

  var _proptotype = Object.create(parent.prototype);

  _proptotype.constructor = child.prototype.constructor;

  child.prototype = _proptotype;

}



inherits(Chinese, People);



Chinese.prototype.introduce = function () {

  console.log('你好，我是' + this.getName());

  console.log('我说' + this.language);

}



var en = new English('Byron', 26, 'English');

var cn = new Chinese('色拉油', 27, '汉语');



en.introduce();

cn.introduce();

name

age

getName

constructor

__proto__ === Function.prototype.__proto__ === Object.prototype

prototype

not __proto__

__proto__ === Object.prototype

__proto__ === Function.prototype

People

not __proto__

__proto__ === Object.prototype

__proto__ === new People().__proto__ === People.prototype

function inherits(child, parent) {

  var _proptotype = Object.create(parent.prototype);

  _proptotype.constructor = child.prototype.constructor;

  child.prototype = _proptotype;

}



inherits(Chinese, People);

constructor

language (完成覆盖继承后再添加自有属性,否则就覆盖了)

prototype

not __proto__

__proto__ === Object.prototype

__proto__ === Function.prototype (未受prototype赋值的继承影响)

Chinese

not __proto__

__proto__ === Object.prototype

__proto__ === People.prototype

__proto__ === Chinese.prototype

new Chinese().__proto__ === Chinese.prototype

new Chinese().__proto__.__proto__ === People.prototype

new Chinese().__proto__.__proto__.__proto__ === Object.prototype

new Chinese().__proto__.__proto__.__proto__.__proto__ === null

People.call(this, name, age);

constructor function(){}

new Chinese()

not __proto__

prototype

Object原型

constructor

__proto__

prototype

Untitled node

__proto__

Function.__proto__ === Function.prototype

Function

Object.create(People.prototype);

__proto__

new People()

not __proto__

__proto__ === Object.prototype

__proto__ === new People().__proto__ === People.prototype

function inherits(child, parent) {

  var _proptotype = Object.create(parent.prototype);

  _proptotype.constructor = child.prototype.constructor;

  child.prototype = _proptotype;

}



inherits(Chinese, People);

constructor

language (完成覆盖继承后再添加自有属性,否则就覆盖了)

prototype

not __proto__

__proto__ === Object.prototype

__proto__ === Function.prototype (未受prototype赋值的继承影响)

English

not __proto__

__proto__ === Object.prototype

__proto__ === People.prototype

__proto__ === Chinese.prototype

new Chinese().__proto__ === Chinese.prototype

new Chinese().__proto__.__proto__ === People.prototype

new Chinese().__proto__.__proto__.__proto__ === Object.prototype

new Chinese().__proto__.__proto__.__proto__.__proto__ === null

People.call(this, name, age);

constructor function(){}

new English()