前言:
js就严格意义上来讲它不是一个面向对象的语言,因为这里没有类的概念,但是呢它通过某些东西,却可以认为它是基于对象的一门语言,也就是说这里有对象,也有封装,继承和多态,本篇博客主要讲解js中的继承到底是什么原理!
1、什么是原型链
原型链是一种关系,实例对象和原型对象之间的关系,关系是通过原型(proto)来联系的!
首先明确第一点:每个对象都有__proto__属性,但是只有 函数对象才有prototype属性!
接着明确第二点:实例对象中__proto__是原型,浏览器使用的,构造函数中的prototype是原型,是程序员使用的
接下来图演示一下:
代码:
<script>
function Person(name, age) {
this.name = name;
this.age = age;
this.eat = function () {
console.log("吃啥啊");
}
};
Person.prototype.sex = "男";
Person.prototype.sayHi = function () {
console.log("你好啊");
};
var per = new Person("小明", "20");
console.dir(per);//查看类中的属性和方法
</script>
代码对应的图:如下图所示:
此时我们的实例对象可以访问原型对象的方法!
2、原型链是如何体现出继承的
代码
<script>
//人的构造函数
function Person(name, age,sex){
this.name = name;
this.sex = sex;
this.age = age;
}
//原型函数
Person.prototype.eat = function () {
console.log("人可以吃东西");
};
Person.prototype.sleep = function () {
console.log("人在睡觉");
};
Person.prototype.play = function () {
console.log("生活就是不一样的玩法而已");
}
//学生的构造函数
function Student(score) {
this.score = score;
}
//改变学生的原型指向即可
Student.prototype = new Person("小明", 10, "男");
//学生
Student.prototype.study = function () {
console.log("学习很累很累的偶");
}
var stu = new Student(100);
//此时学生对象继承了人的属性和方法,而且自己也能够添加自己的属性和方法
console.log(stu.name);
console.log(stu.age);
console.log(stu.sex);
stu.eat();
stu.play();
stu.sleep();
console.log("下面的是学生对象中自己有的");
console.log(stu.score);
stu.study();
</script>
代码对应的图:
这就实现了继承;下一篇博客讲述原型链的三种继承方式!