js原型、构造函数和原型链的理解

仅此表达我个人的理解。

prototype 原型

首先原型（prototype）是什么，可以这么理解在js里面一切都是对象，而原型就是对象的属性啦，但是对象又分为两种，一种是普通对象，还有一种是函数对象，废话少说看代码吧：
在这里插入图片描述
由此可见，普通对象不具有prototype属性，只有函数对象才有prototype属性，但是他们都有一个共同点都有__proto __属性，也就是说只要是对象都有 __proto __属性。注意：__proto__属性不是规范的属性，对应的规范属性是[[Prototype]]

constructor 构造函数

首先说一下构造函数的特点：
1.需要new实例化，内部使用this对象指向即将要生成的实例对象
2.首字母大写，用于区分普通函数，因为和普通函数的写法一样
从上面的代码和控制台打印出来的东西可以知道，每一个函数对象都具有prototype属性，prototype原型对象下面又有一个constructor 属性，这个constructor属性指向的是prototype属性所在的构造函数Person，现在再来看一下下面的代码：

function Person(name){    // 构造函数
    this.name = name;
}
var a = new Person('pingfan');
console.dir(Person);
console.dir(a.constructor);

在这里插入图片描述
打印出来的东西是完全一样的，也就是说：a.constructor指向的是构造函数Person，Person.prototype.constructor指向的也是构造函数Person，用一个表达式解释一下：Person === a.constructor === Person.prototype.constructor 。

__proto__ 原型链

先说特点：是个对象就有，__proto__的指向取决于对象创建时的实现方式
为什么要叫它原型链呢？原型链的形成是真正是靠__proto__，因为当js查找对象的属性的时候，先从该对象本身开始查找是否存在这个属性，如果找不到就会往原型链上查找，会一直查找__proto__到null为止，并且不会查找自身的prototype属性。从而行成一条__proto__连起来的原型链。代码如下：

function Person(name){    // 构造函数
    this.name = name;
}
var a = new Person('pingfan');
console.dir(Person.prototype);
console.dir(a.__proto__);
console.log(a.__proto__.__proto__);
console.log(Person.prototype === a.__proto__, 'Person.prototype === a.__proto__');

在这里插入图片描述

						原型和原型链是JS实现继承的一种模型

js原型、构造函数和原型链的理解

猜你喜欢