弄清JavaScript原型继承:prototype、constructor与__proto__

前言: 初学JavaScript时,学到原型继承的时候很容易搞不懂prototype、constructor与__proto__,但是只要在控制台不断尝试分析结果,多搜索就可以解决绝大部分疑惑

从廖雪峰网站学习JS的原型继承 - 廖雪峰的官方网站时,廖老师的讲解也很清楚了,但是评论区还是有人表示看不懂,从个人角度来说,我觉得是因为廖老师没有介绍constructor这个属性。

constructor即构造器,获得其构造函数:

Person = function (name) {
    this.name = name;
}
var person1=new Person('xiaoming')

弄清JavaScript原型继承:prototype、constructor与__proto__
Personconstructor是什么?当然是 Function

弄清JavaScript原型继承:prototype、constructor与__proto__

__proto__ 则是其构造函数的原型对象,即:

弄清JavaScript原型继承:prototype、constructor与__proto__

接下来就是 prototype 了, prototype是当你创建一个新的对象时该对象自动获得的一个属性。以 Person 为例:

弄清JavaScript原型继承:prototype、constructor与__proto__

该属性值为一个对象,而这个对象有一个属性 constructor ,指向原对象,即

弄清JavaScript原型继承:prototype、constructor与__proto__

JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。

当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefined

注意理解这句话,比如定义一个hello方法:

hello=function () {
	console.log('Hello,'+this.name+'!');
}

var person1=new Person('xiaoming')
var person2=new Person('xiaohong')

我们开始用Person创建了person1这个对象,当调用 person1.hello()时会在当前Person函数内找,找不到就在 Person.prototype上找:

弄清JavaScript原型继承:prototype、constructor与__proto__

找不到是因为没有绑定该函数:

弄清JavaScript原型继承:prototype、constructor与__proto__

注意:

弄清JavaScript原型继承:prototype、constructor与__proto__
到这里所有的应该都清晰了

弄清JavaScript原型继承:prototype、constructor与__proto__

借用网络上的一张图
弄清JavaScript原型继承:prototype、constructor与__proto__