js中的原型继承需要注意的问题

1.js中的原型继承

首先要知道在js中是不支持继承的，可以借助其他的方式来模拟这种过程。二话不说先上代码：

<script type="text/javascript">function Person(name){this.name=name;}function Student(name){this.name=name;}//实现原型继承的方法Student.prototype=new Person();var s1=new Student("aa");var s2=new Student("bb");</script>

上面的代码片段就是实现了原型继承。关键就是：Student.prototype=new Person();

2.js中原型继承的概念

从内容1我们知道了实现了原型继承的方法,即将上级函数的实例赋值给下级函数的原型，那么在js中原型继承的概念是什么呢？

在js中原型继承：上级函数对下级函数的实例对象开放原型访问权限的行为。

3.js原型继承中需要注意的问题：

1.不知道有没有会对这种原型继承有疑问------为什么将下级函数的原型赋值给上级函数的实例之后，下级函数实例就可以访问上级函数的原型了呢？

解答：其实在上一篇关于原型的博客中我们了解到构造函数的实例对象都会有一个__proto__属性，该属性和该构造函数对应的原型是完全相同的。所以实现原型继承后下级函数实例可以访问上级函数的原型了

<script type="text/javascript">function Person(name){this.name=name;}var p1=new Person("cc");console.log(Person.prototype===p1.__proto__);//输出true</script>

2.实现原型继承后，下级函数的原型中原有的属性和方法还能不能使用了？

解答：其实关于这个问题，下级函数原型中原有的属性和方法能不能使用主要在于实现继承的代码的位置。为什么这么说呢？

我们可以通过测试下面的代码

第一种情况：将实现继承的代码放在设置下级函数原型属性之后，很明显从代码得出没有s1没有找到"study"属性

<script type="text/javascript">function Person(name){this.name=name;}function Student(name){this.name=name;}Student.prototype.study="学习";Student.prototype=new Person("pp");var s1=new Student("ss");console.log(s1.study);//输出undefined</script>

第二种情况：将实现继承的代码放在设置下级函数原型属性之前，那么s1可以得到"study"属性的

<script type="text/javascript">function Person(name){this.name=name;}function Student(name){this.name=name;}Student.prototype=new Person("pp");Student.prototype.study="学习";var s1=new Student("ss");console.log(s1.study);//输出"学习"</script>

4.有没有想过为什么会出现上面的情况呢，即原型继承之后为什么原有的属性消失不见的原因？

在js中，代码是从上依次执行的，所以在js中会出现很多替代的情况。在我们设置原型继承的时候，我们将上级函数的实例全部赋值给了下级函数的原型，所以下级函数原型原有的属性和方法会被全部替换，因此就出现了上面的情况。

5.其实上面的内容仅仅是原型继承的内容，没有涉及到任何原型链的东西。涉及到了一点函数属性查询的知识，如果能把上面的知识好好学习一下，学完之后肯定能对原型继承有了一定的理解。