彻底深刻理解js原型链之prototype,__proto__以及constructor(一)

[linchwei]

摘抄自《http://www.0313.name/2017/01/13/prototype-proto-constructor.html》

前言

以下概念请花费一定的时间彻底理解,才能进行下一步,思考题一定要思考,这样才能彻底掌握原型链的知识点,教程中如果有任何的错误不足请指正!

函数对象

由function创造出来的函数,比如:

function a(){};
var b=function(){};

系统内置的函数对象

Function,Object,Array,String,Number

只有函数对象才有 prototype属性 ,重要的事情说三遍!

普通对象

除开函数对象之外的对象都是普通对象

var b='qwe'; // b 是字符串类型,属于普通对象
var c=123;; // c 是数字类型,属于普通对象

原型对象

prototype属性也叫原型对象,主要是为了实现继承和共享属性;

可以说我们的每一次编程,内在都有原型对象来发挥着作用,如果你没有掌握原型对象的含义,那么你的js还没有真正的入门!

function a(){};

首先对象 a 是由Function创造出来,是函数对象;那么根据我们以上的教程,a 就有了prototype属性,那么这个原型对象是怎么创造出来的呢?
来看下面这个例子:

var temp = new a();
a.prototype = new Object();
a.prototype = temp;

那么a的prototype属性就是这样创造出来的;

指针__proto__

JavaScript中，万物皆对象！所有的对象obj都具有proto属性(null和undefined除外),可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型

请看以下例子帮助理解:

function a(){};
var obj = new a();
console.log(a.__proto__ === Function.prototype); //true
console.log(a.prototype.__proto__ === Object.prototype); //true
console.log(obj.__proto__ === a.prototype); //true

构造函数属性constructor

假设 obj 是由函数对象 a 由new运算创造出来的，那么obj的constructor 的属性就存放着一个对 a 的引用，通过这个构造函数，我们还可以为 a添加其他属性和方法,
这个属性的最初设计是为了检测对象的数据类型，不过后来人们通过此属性的特性做了更多的事情

请看以下例子:

function a(){};
var obj=new a();
obj.constructor.b=`我是a的新的属性`;
console.log(a.b); //我是a的新的属性
console.log(a.constructor===Function); //true
console.log(a.prototype.constructor===a); //true
console.log(obj.constructor===a); //true

函数a是由Function创造出来,那么它的constructor指向的Function,obj是由new a()方式创造出来,那么obj.constructor理应指向a