JS学习笔记原型链及原型继承详解

本文阐述了JS学习笔记的原型链和原型继承。分享给大家参考，如下：

原型链

原型链是一种关系，实例对象和原型对象之间的关系，这种关系是由原型(_ _ prototype _)连接起来的

实例对象中有__proto__是一个叫prototype的对象，但不是浏览器使用的标准属性，有些浏览器在构造函数中不支持prototype属性，也是一个叫prototype的对象

请注意，原型中的方法可以相互访问

示例代码

函数动物(名称，年龄){ this.name=namethia.age=年龄；}//添加方法animal . prototype . eat=function(){ console . log('动物吃草')this . play()} animal . prototype . play=function(){ console . log('玩什么')} prototype的简单语法

与原型共享数据

第一种写作方式

函数Student(姓名、年龄、性别){ this.name=namethis.age=年龄；this.sex=sex} Student . prototype . height=' 188 ' Student . prototype . weight=' 55kg ' Student . prototype . study=function(){ console . log('好好学习我')} var stu=new Student('小红'，20，'男')console

第二种写作方式

函数Student(姓名、年龄、性别){ this.name=namethis.age=年龄；this.sex=sex} student.prototype={身高：' 188 '，体重：' 55 kg '，study : function(){ console . log('好好学习i')}} var stu=new Student('小红'，20，'男')console.dir()。

结果

我们会发现两种写法还是有区别的。第二种编写方法将导致构造函数属性消失，因此我们手动修改构造函数指向

最终代码

函数Student(姓名、年龄、性别){ this.name=namethis.age=年龄；this.sex=sex} Student . prototype={ constructor : Student，身高：' 188 '，体重：' 55 kg '，study : function(){ console . log('好好学习我')}} var stu=new Student('小红'，20，'。

好了，这次有了

实例对象使用属性或方法的规则

现在在实例中搜索实例对象使用的属性或方法。如果它存在，将使用它自己的属性或方法。如果不存在，将通过__proto__指向的原型对象使用。如果找不到，它将继续搜索__proto__，并报告错误，直到找不到为止。

构造函数以及实例对象和原型对象之间的关系

构造函数可以实例化一个对象。构造函数中的属性称为prototype，它是构造函数的原型对象。构造函数的原型对象中有一个构造函数。此构造函数指向其原型对象所在的构造函数实例对象的原型对象(_ _ prototype _)。构造函数的原型对象中的方法可以是

你能改变原型吗？

首先，我们需要知道这在构造函数和实例对象中指向什么

在这里，我创建了一个自定义构造函数Person，并在内部输出它

此外，一个eat方法被添加到Person的原型对象中，并且一个this也被输出。

然后我实例化了一个对象，并调用了eat方法。

让我们运行它，看看结果如何

输出结果

如此获得的

原型对象中的方法中的这个是实例对象

这在构造函数中是实例对象

接下来，我们尝试改变原型的方向

在这段代码中，我首先定义了一个Person自定义构造函数，并在原型中添加了eat方法

定义了一个学生函数，并在原型上定义了一个sayHi方法。

然后我把学生的原型指向了人的实例对象

然后实例化一个Student，然后尝试在stude实例上分别调用eat方法和sayHi方法。

运行结果

此时，我们可以通过以下代码确认stu实例对象的原型点已被更改

学生原型=新人(10)；摘要

原型指向一些可以改变的东西

实例对象的原型__proto__指向对象所在的构造函数的原型对象

如果构造函数的原型对象(原型)点改变，实例对象的原型(_ prototype _ _)点也将改变

实例对象和原型对象之间的关系由__proto__ prototype链接，这种关系就是原型链

如果原型方向改变，那么应该在原型改变方向之后添加原型方法

sayHi方法是在实例对象new Person(10)上创建的

原型最终指向哪里

实例对象中的__proto__指向构造函数的原型

以这段代码为例

测试一下

因此

每个实例对象的__proto__指向- Person.prototype-_ _ proto _ _指向- Object.prototype为空

看看html的dom对象，有一个有趣的原型链

祖传的JPG在这里献祭

实现继承

:实例的小知识判断方法

从左操作数的__proto__路由开始，从右操作数的原型开始，如果两条路由最终指向一个引用，则为真

1.使用调用借用构造函数继承

Advantage :实现了继承的属性，但值都不同

缺陷：不能继承父类原型上的方法

功能人(姓名、年龄、性别、体重){ this.name=namethis.age=年龄；this.sex=sexthis.weight=重量；} Person . prototype . say hi=function(){ console . log(' hello ')} function student(姓名、年龄、性别、体重、分数){//将当前实例对象传入person，借用一次即可达到继承效果person.call (this，姓名、年龄、性别、体重)；this.score=score} var stu1=新生('小明'，10，'男'，' 10kg '，' 100')2。原型实现继承

有了原型，学生的原型指向人，达到传承的效果。

优点：继承父原型上的方法

缺陷：实例化多个学生必须共享相同的姓名和年龄

学生原型构造函数=学生注释：使用原型继承时，需要将构造函数的方向改回正确的方向

函数Person(姓名、年龄){ this.name=namethis.age=年龄；} Person . prototype . eat=function(){ console . log(' Person eat ')} function Student(num，Score){ this . num=numthis . Score=Score }//inherits . prototype=new Person(' Xiaohong '，10)Student . prototype . constructor=Student var stu=new Student(2016002288，80) stu.eat()

组合遗传实际上是将上述两种方法结合起来实现遗传，具有两种方法的优点

函数Person(姓名、年龄、性别){ this.name=namethis.age=年龄；this.sex=sex} person . prototype . say hi=function(){ console . log(' hello ')} function student(姓名、年龄、性别、分数){//借用了构造函数person.call (this，姓名、年龄、性别)this。score=score }//更改了原型点//传无值student . prototype . eat=function(){ console . log(' eat ')；} var stu=new Student('小黑'，20，'男'，' 100分')console.log (stu.name，stu.age，stu.sex，stu . score)；Stu.sayHi()//你好stu.eat()//Eat 4。复制继承

与复制类似，一个对象中的属性和方法被直接复制到另一个对象中

函数person(){ } person . prototype . name=' Xiaohong ' person . prototype . age=18函数student(){ } var p=person . prototype；学生原型；for(键入p){ s[key]=p[key] } console.dir(学生)控制台

每次进去都很累，可以优化打包

函数扩展(子，父){ var p=Parent.prototypevar c=Child .原型；for(p中的var I){ c[I]=p[I]；}//这个属性直接指向父对象的原型属性，可以直接调用父对象的方法。为了达到继承的完备性，纯粹是备用属性c . par=p；}5.直接继承原型

优势：效率更高

缺陷：因为相当于一个地址转移过程，学生属性Person的修改也会改变

函数person(){ }；Person.prototype.name='小红；人。原型。年龄=18岁；函数student(){ }；学生原型=人原型；控制台目录（学生);控制台目录（人);学生原型年龄=25岁；安慰

6.利用空对象作中介实现继承

用这种方式修改学生的原型不会影响到人的原型

函数person(){ }；Person.prototype.name='小红；人。原型。年龄=11岁；函数student(){ }；var F=function(){ }；原型=人原型；学生。原型=新F()；学生。原型。构造者=学生；学生原型年龄=25岁；控制台。目录（个人)控制台。目录（学生)控制台

封装一下

函数扩展（子，父){ var F=function(){ }；原型=父原型；孩子。原型=新F()；孩子。原型。构造函数=子；孩子。par=父级。原型；}更多关于Java脚本语言相关内容还可查看本站专题： 《javascript面向对象入门教程》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。