面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法。

一、构造函数、原型与实例之间的关系

  每创建一个函数,该函数就会自动带有一个 prototype 属性。该属性是个指针,指向了一个对象,我们称之为 原型对象。什么是指针?指针就好比学生的学号,原型对象则是那个学生。我们通过学号找到唯一的那个学生。假设突然,指针设置 null, 学号重置空了,不要慌,对象还存在,学生也没消失。只是不好找了。

  原型对象上默认有一个属性 constructor,该属性也是一个指针,指向其相关联的构造函数。

  通过调用构造函数产生的实例,都有一个内部属性,指向了原型对象。所以实例能够访问原型对象上的所有属性和方法。

  

  所以三者的关系是,每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。通俗点说就是,实例通过内部指针可以访问到原型对象,原型对象通过constructor指针,又可以找到构造函数。

  下面看一个例子:

1
2
3
4
5
6
7
8
9
function Dog (name) {
    this.name = name;
    this.type = 'Dog'
}
Dog.prototype.speak = function () {
  alert('wang');
}
var doggie = new Dog('jiwawa');
doggie.speak();  //wang 

  以上代码定义了一个构造函数 Dog(),  Dog.prototype 指向的原型对象,其自带的属性construtor又指回了 Dog,即  Dog.prototype.constructor == Dog. 实例doggie由于其内部指针指向了该原型对象,所以可以访问到 speak方法。

  Dog.prototype 只是一个指针,指向的是原型对象,但是这个原型对象并不特别,它也只是一个普通对象。假设说,这时候,我们让 Dog.protptype 不再指向最初的原型对象,而是另一个类 (Animal)的实例,情况会怎样呢?

二、原型链

  前面我们说到,所有的实例有一个内部指针,指向它的原型对象,并且可以访问原型对象上的所有属性和方法。doggie实例指向了Dog的原型对象,可以访问Dog原型对象上的所有属性和方法;如果Dog原型对象变成了某一个类的实例 aaa,这个实例又会指向一个新的原型对象 AAA,那么 doggie 此时就能访问 aaa 的实例属性和 AA A原型对象上的所有属性和方法了。同理,新的原型对象AAA碰巧又是另外一个对象的实例bbb,这个实例bbb又会指向新的原型对象 BBB,那么doggie此时就能访问 bbb 的实例属性和 BBB 原型对象上的所有属性和方法了。

  这就是JS通过原型链实现继承的方法了。看下面一个例子:

//定义一个 Animal 构造函数,作为 Dog 的父类
function Animal () {
this.superType = 'Animal';
} Animal.prototype.superSpeak = function () {
alert(this.superType);
} function Dog (name) {
this.name = name;
this.type = 'Dog';
}
//改变Dog的prototype指针,指向一个 Animal 实例
Dog.prototype = new Animal();
//上面那行就相当于这么写
//var animal = new Animal();
//Dog.prototype = animal; Dog.prototype.speak = function () {
  alert(this.type);
}
var doggie = new Dog('jiwawa');
doggie.superSpeak(); //Animal

  解释一下。以上代码,首先定义了一个 Animal 构造函数,通过new Animal()得到实例,会包含一个实例属性 superType 和一个原型属性 superSpeak。另外又定义了一个Dog构造函数。然后情况发生变化,代码中加粗那一行,将Dog的原型对象覆盖成了 animal 实例。当 doggie 去访问superSpeak属性时,js会先在doggie的实例属性中查找,发现找不到,然后,js就会去doggie 的原型对象上去找,doggie的原型对象已经被我们改成了一个animal实例,那就是去animal实例上去找。先找animal的实例属性,发现还是没有 superSpeack, 最后去 animal 的原型对象上去找,诶,这才找到。

(希望这张图对大家的理解有帮助吧。) 

  

  这就说明,我们可以通过原型链的方式,实现 Dog 继承 Animal 的所有属性和方法。

  总结来说:就是当重写了Dog.prototype指向的原型对象后,实例的内部指针也发生了改变,指向了新的原型对象,然后就能实现类与类之间的继承了。(但是如果在重写原型对象之前,产生的实例,其内部指针指向的还是最初的原型对象。这个我下次再发篇文章讲。js 继承之借用构造函数继承

js 原型链、构造函数、原型与实例之间的关系的更多相关文章

  1. Jascript原型链以及Object和Function之间的关系

    先看一个简单的function变量 function fun1(name) { this.name = name; } console.log("fun1", fun1) 从结果可 ...

  2. JavaScript原型链以及Object,Function之间的关系

    JavaScript里任何东西都是对象,任何一个对象内部都有另一个对象叫__proto__,即原型,它可以包含任何东西让对象继承.当然__proto__本身也是一个对象,它自己也有自己的__proto ...

  3. Javascript 构造函数、原型对象、实例之间的关系

    # Javascript 构造函数.原型对象.实例之间的关系 # 创建对象的方式 # 1.new object() 缺点:创建多个对象困难 var hero = new Object(); // 空对 ...

  4. 从零开始学 Web 之 JS 高级(二)原型链,原型的继承

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. js 原型,原型链,原型链继承浅析

    对于网上的关于原型,原型链和原型链继承的晦涩语言说明就不累赘了,复制粘贴过来再解释一遍怕自己也整蒙了,本人最怕空气突然安静,四目对视,大眼对小眼,一脸懵逼. 我们先看下面

  6. jacascript中的原型链以原型

    今地铁上看慕课网js课程,又学习到关于原型的一些知识,记录如下.如有偏差欢迎指正: 三张图要连起来看哦~ 图解: 1.创建一个函数foo. 2.运用函数的prototype属性(这个属性就是实例对象的 ...

  7. 275 原型与原型链:显式原型prototype ,隐式原型__proto__,隐式原型链,原型链_属性问题,给原型对象添加属性/方法

    1.所有函数都有一个特别的属性 prototype : 显式原型属性 [普通构造函数的实例对象没有prototype 属性,构造函数有__proto__属性,原型对象有__proto__属性 ] 2. ...

  8. Javascript原型链和原型继承

    哇好久都没有写随笔啦,整个人都慵懒啦. 为了不让大家忘记我,把以前写过的一些慢慢发出来. 在JS 中, 有两条链子,作用域链 和 原型链. 作用域链相对容易理解,两点 - 函数限定变量作用域,就是说, ...

  9. 前端知识体系:JavaScript基础-原型和原型链-理解原型设计模式以及 JavaScript中的原型规则

    理解原型设计模式以及 JavaScript中的原型规则(原文地址) 1.原型对象:我们创建的每一个函数(JavaScript中函数也是一个对象)都有一个原型属性 prototype,原型属性实质上是一 ...

随机推荐

  1. upload上传 和 download下载

    文件上传:   <div class="upload-form"> <input id="fileUpload" type="fil ...

  2. 面向对象相关概念与在python中的面向对象知识(魔法方法+反射+元类+鸭子类型)

    面向对象知识 封装 封装的原理是,其成员变量代表对象的属性,方法代表这个对象的动作真正的封装是,经过深入的思考,做出良好的抽象(设计属性时用到),给出“完整且最小”的接口,并使得内部细节可以对外透明( ...

  3. Win10系统的开机启动项如何去关闭?

    我们在使用电脑时会安装许多的应用程序,而有些应用程序会默认在电脑开机时自行启动,不仅影响开机速度,还会在开机后占用电脑内存资源. 那么在Win10系统中,我们该如何查看有哪些开机启动项呢?我们又该怎么 ...

  4. 【网络协议】动态主机配置协议DHCP

    动态主机配置协议DHCP 当某组织获得一块地址后,就可以为本组织内的主机或者路由器分配IP地址.这个分配工作可以由系统管理员手动通过网络管理工具来完成.也可以由动态主机配置协议(Dynamic Hos ...

  5. 解决GitLab的Forbidden和Nginx启动失败

    通过宝塔安装的GitLab突然出现Forbidden,原因居然是IP并发过大,IP被禁 解决方法: 登录服务器,编辑文件 /etc/gitlab/gitlab.rb  ,将下面的截图内容放开注释(默认 ...

  6. 海康RTSP取流URL格式

    预览取流url [海康威视]举例说明: 主码流取流: rtsp://admin:12345@192.0.0.64:554/h264/ch1/main/av_stream 子码流取流: rtsp://a ...

  7. Linux根文件系统和目录结构及bash特性3

    bash的基础特性: 命令补全:        shell程序在接收到用户执行命令的请求,分析完成之后,最左侧的字符串会被当作命令        命令查找机制:            查找内部命令   ...

  8. PAT乙级1024

    题目链接 https://pintia.cn/problem-sets/994805260223102976/problems/994805297229447168 题解 第一遍也是没有全部AC,有3 ...

  9. Linux之screen用法

    Screen被称之为一个全屏窗口管理器,用他可以轻松在一个物理终端上获得多个虚拟终端的效果. Screen功能说明: 简单来说,Screen是一个可以在多个进程之间多路复用一个物理终端的窗口管理器,这 ...

  10. 使用幕布时,在Session过期后,弹出框加载出登陆的HTML的问题

    思路:在登陆页面判断当前加载的Url是否时login/index ,如果不是跳转到登陆页 //设置或获取对象指定的文件名或路径. var Url = window.location.pathname; ...