【javascript 基础篇】prototype & constructor & instanceof

之前每件事都差不多，直到现在才发现差很多。

现在才发现理清一件事的原委是多么快乐的一件事，我们共同勉励。

懒得扯淡，直接正题

不基于例子的讲原理都是扯淡，知乎一样的举例都是卖弄

例子

function A () {

};

A.prototype = {

};

function B () {

};

var a = new A();
B.prototype  = new A();
var b = new B();

console.log(a.constructor); //Object
console.log(A.constructor); //Function
console.log(a.hasOwnProperty('constructor')); // false
console.log(A.hasOwnProperty('constructor')); // false
console.log(a instanceof A); // true

console.log(b.constructor); // Object
console.log(B.constructor); // Function
console.log(b.hasOwnProperty('constructor')); // false
console.log(B.hasOwnProperty('constructor')); // false
console.log(b instanceof B); // true
console.log(b instanceof A); // true

prototype

constructor

例子分析

console.log(a.constructor); //Object
console.log(A.constructor); //Function
console.log(b.constructor); // Object
console.log(B.constructor); // Function

首先需要明确 constructor 属性是 Object.prototype 对象上的， Object.prototype.hasOwnProperty('constructor') === true，而实例对象上的 constructor 属性是从其原型链中取。

1. a的原型对象是A.prototype，指向了一个空对象，所以从Object.prototype 里面 查找 constructor 属性，返回 Object
2. 任何一个函数都是都是 Function 的一个实例，Function.prototype.constructor === Function
3. 再看一下 b，是 B 的实例，B 的 prototype 指向了 A 的实例，所以 b.constructor = a.constructor === Object
4. B.constructor 同 第二种情况一样

instanceof

语法

object instanceof constructor
# 参数
- object 检测的对象
- constructor 构造函数

用途

检测 constructor.prototype 是否存在于object的原型链上

例子分析

# 此处为文章前面的例子，只是把对于 instanceof 的判断集中起来
console.log(a instanceof A); // true
console.log(b instanceof B); // true
console.log(b instanceof A); // true

---

看 MDN instanceof有下面的例子(精简化)

function C(){} 
var o = new C();
o instanceof C; // true，因为 Object.getPrototypeOf(o) === C.prototype
o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true
C.prototype instanceof Object // true,同上

C.prototype = {};
var o2 = new C();
o2 instanceof C; // true
o instanceof C; // false,C.prototype指向了一个空对象,这个空对象不在o的原型链上.

乍一看，上面的例子，始终对于最后 o instanceof C 返回 false 不理解，其实只要明白 object.__proto__ 和 Constructor.prototype 是两个引用值，在使用 Constructor 创建实例 object 时， object.__proto__ === Constructor.prototype，之后 object.__proto__ 改变和 Constructor.prototype 任意其一改变都会导致最后 object.__proto__ !== Constructor.prototype

hasOwnProperty

例子分析

console.log(a.hasOwnProperty('constructor')); // false
console.log(A.hasOwnProperty('constructor')); // false
console.log(b.hasOwnProperty('constructor')); // false
console.log(B.hasOwnProperty('constructor')); // false

constructor 属性是从原型对象上继承的

相关资料

MDN instanceof
MDN constructor
MDN hasOwnProperty
MDN Prototype