本文思路:想了解原型链,必须知道什么是原型,那么原型又是怎么产生的,追本溯源的来理解原型链。
原型怎么来:
创建对象的三种方式:
1、字面量的方式——原始、简单,但是麻烦
2、调用系统的构造函数——挺好,但受限制
3、自定义构造函数——那就这种,又方便又自由
此时,我们来写个创造“人”的对象的构造函数,看代码:
function Person(name,age) {
this.name=name;
this.age=age;
this.makeTool=function () {
console.log("制造工具");
};
}
var p1 = new Person("Jack",18)
var p2 = new Person("Mark",21)
var p3 = new Person("Susan",18)
每当我们new一个person的时候,每个人都有名字、年龄,都会制造工具,但制造工具是相同的能力(方法)。
于是,我们给Person()这个构造函数一个属性prototype
:
Person.prototype.makeTool = function(){
console.log("制造工具")
}
我们可以通过p1.makeTool()
来调用这个方法,p1 p2 p3
都可以公用这个方法,这样我们就节省了内存,共享了数据,这也是prototype
的作用之一,prototype
就是原型。
充分理解原型链
//动物有名字,有体重,有吃东西的行为
//狗有名字,有体重,有毛色, 有吃东西的行为,还有咬人的行为
//金毛有名字,有体重,有毛色,性别, 有吃东西的行为,还有咬人的行为,保护主人的行为
function Animal(name,weight) {
this.name=name;
this.weight=weight;
}
//动物的原型的方法
Animal.prototype.eat=function () {
console.log("天天吃东西,就是吃");
};
//狗的构造函数
function Dog(color) {
this.color=color;
}
Dog.prototype=new Animal("哮天犬","50kg");
Dog.prototype.bitePerson=function () {
console.log("哼~汪汪~咬死你");
};
//金毛
function jinMao(sex) {
this.sex=sex;
}
jinMao.prototype=new Dog("黑白色");
jinMao.prototype.protectHost=function () {
console.log("汪汪汪,保护主人");
};
var jinMao=new ErHa("雄性");
console.log(jinMao.name,jinMao.weight,jinMao.color); //哮天犬 50kg 黑白色
jinMao.eat(); //天天吃东西,就是吃
jinMao.bitePerson(); //哼~汪汪~咬死你
jinMao.protectHost(); //汪汪汪,保护主人
以上代码画图表示原型链:
通过以上例子,再将原型链扩展:
每当代码读取某个对象的某个属性,都会执行一次搜索,目标是具有给定名字的属性,搜索首先从对象实例本身开始,如果在实例中找到了具有给定名字的属性或方法,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性或方法。
以上,便是对原型链的解读。
--end