构造函数和实例对象和原型对象之间的关系
图示:
构造函数可以实例化对象
构造函数中有一个属性叫prototype,是构造函数的原型对象
构造函数的原型对象(prototype)中有一个constructor 构造器,这个构造器指向的就是自己所在 的原型对象所在的构造函数
实例对象的原型对象(__proto__) 指向的是该构造函数的原型对象(prototype)
构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问
代码演示:
<script>
// 构造函数
function Chinese (uname, age, sex) {
this.head = 1;
this.legs = 2;
this.eyes = 2;
this.language = 'chinese';
this.skin = '黄皮肤';
this.uname = uname;
this.age = age;
this.sex = sex;
}
// 原型对象
Chinese.prototype.say = function () {
console.log(this.uname + '说话');
}
Chinese.prototype.ykz = function () {
console.log('用筷子');
}
// 实例化对象
let obj1 = new Chinese('张翠花', 23, '女');
console.log(obj1);
控制台打印结果:
Chinese {head: 1, legs: 2, eyes: 2, language: 'chinese', skin: '黄皮肤', …}
age: 23
ex: "女"
eyes: 2
head: 1
language: "chinese"
legs: 2
skin: "黄皮肤"
uname: "张翠花"
[[Prototype]]: Object
obj1.say(); // 张翠花说话
let obj2 = new Chinese('李二狗', 24, '男');
console.log(obj2);
控制台打印结果:
Chinese {head: 1, legs: 2, eyes: 2, language: 'chinese', skin: '黄皮肤', …}
age: 24
ex: "男"
eyes: 2
head: 1
language: "chinese"
legs: 2
skin: "黄皮肤"
uname: "李二狗"
[[Prototype]]: Object
obj2.say(); // 李二狗说话
console.log( obj1.say === obj2.say ); // true
</script>
详解:我们在构造函数Chinese中定义了一些公共的属性,但是把公共的方法(say)和(ykz)通 过 prototype 属性挂载到了它的原型函数上,这样做的目的是可以共享方法和属性,节省了内存。我们紧接着又实例化了两个对象 obj1 和 obj2,这样通过构造函数实例化出来的实例对象就拥有了公共的属性,也能访问公共的方法了
原型链图:
实例对象使用的属性或方法,现在实例中查找,如果有则使用自身的属性或方法,
如果没有,则通过__proto__指向的原型对象 查找方法,找到则使用,
如果找不到则继续向__proto__寻找,直到未找到时报错
原型链:由原型串联起来的链状结构
作用:提供我们查找成员的机制