Javascript继承之理解__proto__、prototype、constructor三者的含义与用法

如何写出没有污染的继承

1.javascript中一切都是对象,每个对象都是基于原型对象创建的,每个对象中都有proto属性,这个属性指向的就是它基于的原型对象。

1
2
3
4
5
6
var Foo = function () {};
var foo = new Foo();
console.log(
Foo.__proto__ === Function.prototype, // true
foo.__proto__ === Foo.prototype, // true
);

2.只有构造函数对象才有prototype属性,构造函数的作用是创建对象,创建对象的时候,它要知道这个对象基于哪个原型来创建,这个prototype指向的就是这个原型。

1
2
var Foo = function () {};
// Foo.prototype 指向 Foo.prototype;

3.只有原型对象才有constructor属性,而且也是系统(浏览器)给创建的。前面说过构造函数对象的prototype属性会指向一个原型对象,那么这个原型对象中的constructor属性指向的就是这个构造函数。

1
2
3
4
5
var Foo = function () {};
var foo = new Foo();
console.log(
foo.constructor === Foo, // true
);

4.思想合并

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var Parent = function () {
this.name = 'parent';
};
Parent.prototype.sayName = function () {
alert(this.name);
};

var Son = function () {
Parent.apply(this, arguments);
this.name = 'son';
};
Son.prototype.__proto__ = Parent.prototype;

var parent = new Parent();
var son = new Son();
parent.sayName();
son.sayName();

console.log(
Parent.__proto__ === Function.prototype,
parent.__proto__ === Parent.prototype,
parent.constructor === Parent,
Son.__proto__ === Function.prototype,
son.__proto__ === Son.prototype,
son.constructor === Son
);

参考资料

文章目录
  1. 1. 如何写出没有污染的继承
  2. 2. 参考资料
,