图解JavaScript原型链继承

时间 2019-11-17

标签图解 javascript 原型继承栏目 JavaScript 繁體版

原文原文链接

结合阅读：html

JS原型与原型链终极详解app

对象的内部原型(__proto__)和构造器的原型（prototype）函数

JavaScript中的原型和继承（译文）this

js原型链继承的是_proto_，而不是prototype。spa

构造器的实例对象的_proto_指向构造器的原型prototype。prototype

全部构造器都来自Function.prototype，甚至包括根构造器Object及Function自身。code

全部构造器/函数（Function、Object、Array、Number、Boolean、String、RegExp、Error、Date..）的_proto_都指向Function.prototype。htm

全部构造器都继承了Function.prototype的属性及方法（length、call、apply、bind..）。对象

全部构造器都是普通js对象，能够给构造器添加/删除属性等，同时也继承了Object.prototype上的全部方法（toString、valueOf、hasOwnProperty..）。blog

每一个对象都有一个预约义的constructor属性，用来引用它的函数对象/构造器。constructor始终指向建立自身的构造函数。

补充：Function.prototype的_proto_指向Object.prototype。

数字1表示：带有Person的this属性；

数字2表示：带有Person的prototype属性；

数字3表示：带有Object的toString、valueOf、hasOwnProperty..属性及方法；

数字4表示：带有Person的静态属性；

数字5表示：带有Function的length、call、apply、bind..属性及方法。

var Person = function (name) {
   this.name = name;
};
Person.prototype.getName = function () {
   return this.name; 
};
Person.age = 23;
Person.getAge = function () {};var p = new Person();//重写原型Person.prototype = {　　getName: function () {};}//重写原型后，会致使：Person.prototype = new Object();   //constructor指向Objectp.constructor === Object;   //truePerson.prototype === Object;   //truep.constructor.prototype.constructor === Object;   //true//修正constructor指向Person.prototype.constructor = Person;