目录
一、原型
原型:每当定义一个实例对象(函数function也是Function的实例对象)时,就会生成一个__proto__属性,被称为隐式原型
;这个__proto__属性指向的是这个对象的构造函数的prototype,被称为显式原型
。每一个对象都会从原型中“继承”属性。
函数的prototype属性:
在定义函数时自动添加的, 默认值是一个空Object对象
对象的__proto__属性:
创建对象时自动添加的, 默认值为构造函数的prototype属性值
首先看一个例子,创建一个Student类,并创建类的实例对象student:
class Student{
constructor(name, score) {
this.name = name;
this.score = score;
}
introduce() {
console.log(`我是${this.name},考了${this.score}分。`)
}
}
const student = new Student('张三', 99)
console.log('student', student); // student Student { name: '张三', score: 99}
student.introduce(); // 我是张三,考了99分。
但是直接在控制台输入student,会发现只有name和score属性,没有introduce方法,但是有一个[[Prototype]]属性,用两个中括号括起来。
把[[Prototype]]展开,会发现introduce方法在[[Prototype]]中。
[[Prototype]]属性被称为student对象的显式原型。当我们要去找一个对象的属性或者方法时,如果在当前对象上找不到,就会沿着原型链去当前对象的显式原型
[[Prototype]]属性上去找。
原型对象中有一个属性constructor, 它指向函数对象。
可通过.__proto__属性访问原型,注意__proto__两边分别有两条下划线。
而Student()构造函数也有一个prototype属性,Student()构造函数的prototype属性实际上就等于student对象的__proto__属性。
下面用一张图来说明:
因此,构造函数的prototype属性就等于实例对象的__proto__属性,构造函数的prototype属性被称为显式原型
,实例对象的__proto__属性被称为隐式原型。
内存结构图:
二、原型链:
获取对象时,如果这个对象身上本身没有这个属性时,它就会去他的原型__proto__上去找,如果还找不到,就去原型的原型上去找…一直找到最顶层(Object.prototype)为止,Object.prototype对象也有__proto__属性值为null。
这里需要注意的是,Object是原型链的最顶层,所有构造函数的prototype都指向Object.prototype
再来看一个例子,创建一个Person类,再创建一个Teacher类继承自Person类,并创建实例对象teacher:
class Person {
constructor(name) {
this.name = name;
}
drink(){
console.log('喝水');
}
}
class Teacher extends Person {
constructor(name, subject) {
super(name);
this.subject = subject;
}
teach() {
console.log(`我是${this.name}, 教${this.subject}。`)
}
}
const teacher = new Teacher('哈默', '前端开发')
console.log('teacher', teacher);
teacher.teach();
teacher.drink();
控制台输出如下,teacher可以执行teach()和drink()方法。
展开teacher对象,发现找不到这两个方法,于是去找对象的原型,即__proto__属性,找到teach()方法,再展开下一层__proto__属性,找到drink()方法。
下面用一张图说明:
可以看到,teacher实例对象本身是没有teach()方法的,这时就会去teacher对象的__proto__隐式原型指向的Teacher.prototype显式原型上去找,此时找到了teach()方法并执行;同时,Teacher.prototype上仍然没有找到drink()方法,而Teacher.prototype也是一个对象,有自己的__proto__隐式原型,那么就去Teacher.prototype.__proto__上去找,Teacher.prototype.__proto__会指向Person()构造函数的显式原型Person.prototype,此时找到了drink()方法并执行,这就是原型链。
内存结构图
fn.test1();从fn出发,找到Fn的实例对象,找到test1,nice
fn.test2();从fn出发,找到Fn的实例对象,找不到test2,再从__proto__出发,找到test2();nice
fn.tostring();从fn出发,找到Fn的实例对象,找不到tostring(),再从__proto__出发,找不到tostring;再次从__prototype__,出发,在obj对象的原型中找到,but始终找不到啊
这里需要注意的是,Object是原型链的最顶层,所有构造函数的prototype都指向Object.prototype
注意
(1)通过__proto__形成原型链而非protrotype。
(2)__proto__属性是对象所独有的。
(3)prototype属性是函数所独有的。但是由于JS中函数也是一种对象,所以函数也拥有__proto__属性。
构造函数/原型/实例对象的关系(图解)
构造函数/原型/实例对象的关系2(图解)
构造函数的实例对象自动拥有构造函数原型对象的属性(方法) 利用的就是原型链
1. 每个函数function都有一个prototype,即显式原型
2. 每个实例对象都有一个__proto__,可称为隐式原型
3. 对象的隐式原型的值为其对应构造函数的显式原型的值
总结:
* 函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象
* 对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值
* 程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)