突然发现自己很久没写过什么东西了

其实从博客更新的速度上就可以看出一个人近期有没有成长

对 …… 我没有成长

也可以由此看出自己选择的企业是不是对的

对 …… 我不会离职……

略略略 来咬我啊……

于是乎 我把自己以前其他博客发的文章放出来了

欢迎骚扰 欢迎指点 小女子 不胜感激……

——————————————我是分割线————————————————

1.构造函数,实例

构造函数是用来创建对象的函数 与其他函数的区别在于调用方式不同
  • 如果通过new操作符来调用 就是构造函数
  • 如果没有通过new操作符来调用的就是普通函数

 
在var person1 = new person()中 通过new操作符 调用了函数person 并生成了person1
这里的person就成为构造函数 person1称为person函数对象的一个实例 
其实可以通过实例的constructor 访问对应的构造函数 (但是其实constructor并不是实例的属性)
 
 
2.原型对象
我们创建一个函数的时候 函数对象都会有一个prototype属性 这个属性是一个指针
指向他的原型对象 原型对象的本质也是一个对象
举个栗子:

3.构造函数 原型对象和实例的关系

由图可以看出
  • 函数对象的prototype指向原型对象 原型对象的constructor指向函数对象
  • 实例对象的prototype属性指向原型对象,这里的perototype是内部属性 是不允许访问的
  • 这个属性的作用:允许实例通过该属性访问原型对象中的属性和方法

解释:console.log(person1.constructor)时说到可以通过实例的constructor访问构造函数
但是constructor本质上是原型对象的属性
 
4.继承
原型链:继承的主要思路就事利用原型链 
      让一个引用类型继承另一个引用类型的属性和方法
  • 原型对象通过contructor属性指向构造函数
  • 实例通过prototype属性指向原型对象

 
原理上图

  • 首先我们创建了A和B 两个函数对象 同时也生成了他们的原型对象
  • 接着 给A的原型对象添加了sayA()方法
  • 然后是关键的一部B.prototype = new A();让函数对象B的prototype指针指向了一个A的实例
这也就是为什么最后B的原型对象里面不在有constructor属性 
(其实B本来有一个真正的原型对象 原本可以通过B.prototype访问 但是我们现在改写了这个指针
使他指向了另一个对象,所以B真正的原型对象现在没法被访问了 取而代之的这个新的原型对象是
A的一个实例 所以没有了constructor属性了)
  • 接下来给这个B.prototype指向的对象增加一个sayB方法
  • 然后生成了一个实例b1
  • 最后调用了b1的sayB方法 可以执行
因为b1有prorotype属性可以访问B.prototype里的方法
  • 调用了b1的sayA方法 可以执行
因为b1沿着prototype属性可以访问B.prototype ,B.prototype可以继续沿着prototype属性访问 A.prototype,最终在A.prototype上找到 了sayA方法 所以可以执行
 
所以现在的结果就相当于 b1继承了A的属性和方法 这种由prototype不断把实例和原型对象联系起来的结构就是原型链 也是js中 继承主要的实现方式
 
该篇文章参考思否! 主要方便自己记忆的同时 传播 好的内容 !希望对大家有所帮助!

JS继承(一)的更多相关文章

  1. js继承

    js继承有5种实现方式: 继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function ...

  2. js继承之call,apply和prototype随谈

    在js中,call,apply和prototype都可以实现对象的继承,下面我们看一个例子: function FatherObj1() { this.sayhello = "I am jo ...

  3. js继承精益求精之寄生式组合继承

    一.混合/组合继承的不足 上一篇JS继承终于混合继承,认真思考一下,发现其还是有不足之处的: 空间上的冗余:在使用原型链的方法继承父类的原型属性(Animal.prototype)的同时,也在子类的原 ...

  4. 老生常谈--Js继承小结

    一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.net/stoy ...

  5. Js继承小结

    Js继承小结 一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.n ...

  6. js继承实现

    JS实现继承可以分为:对象冒充和原型链继承 其中对象冒充又包括:临时变量,call 和 apply 临时变量方法: function Person(name,sex){ this.name = nam ...

  7. js继承之借用构造函数继承

    我的上一篇文章介绍了,原型链继承模式.但是单纯的原型链模式并不能很好地实现继承. 一.原型链的缺点 1.1 单纯的原型链继承最大的一个缺点,来自于原型中包含引用类型的值. 本来,我们没有通过原型链实现 ...

  8. js继承之原型链继承

    面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针, ...

  9. js继承的常用方法

    写在前面的话:这篇博客不适合对面向对象一无所知的人,如果你连_proto_.prototype...都不是很了解的话,建议还是先去了解一下JavaScript面向对象的基础知识,毕竟胖子不是一口吃成的 ...

  10. JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)

    一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...

随机推荐

  1. JAVA相关技术

    开发服务器环境: 1.Linux系统 CentOS 6.5\7 2.JDK1.8 3.tomcat 9 4.mysql 5.7 开发环境: 1.开发集成工具:idea 2.构建工具maven 仓库暂时 ...

  2. 安卓版的pvr图片查看

    public class PVRTDecompress { /* author:FormatFa mail :1758759399@qq.com date :2017-6-14 */ //modify ...

  3. jquery中对小数进行取整

    var uu=Math.floor(5.36) 向下取整 结果为5 var uu=Math.floor(5.88) 结果为5 Math.ceil(5.33) 向上取整,结果为6 Math.round( ...

  4. React高级指引

    深入JSX 本质上来讲,JSX是为React.createElement方法提供的语法糖 <MyButton color=}> Click Me </MyButton> 编译为 ...

  5. vue设置路由跳转参数,以及接收参数

    最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link  :to ...

  6. Python 内置函数math,random

    内置函数的一些操作 - math(数学模块) - random(随机模块) - 使用内置函数时注意需要导入 math - (ceil)向上取整,返回取整数 # 向上取整,返回向上取整的数 import ...

  7. 缓冲区 subprocess 黏包 黏包的解决方案

    缓冲区: 将程序和网络解耦输入缓冲区输出缓冲区 print('>>>>', server.getsockopt(SOL_SOCKET, SO_SNDBUF)) 查看输出缓冲区大 ...

  8. Docker笔记——搭建私有仓

    Docker Hub当然是首选镜像仓,如果不想对所有人公开只想在局域网或公司内部使用,则有必要搭建私有仓来存储分发镜像. 搭建私有仓当然可以直接运行以下命令来创建个registry容器: docker ...

  9. postman引用外部文件中的变量和数据

    接口参数显示: 点击collections下文件夹test0424右边的箭头,点击run按钮: DataFile导入txt文件: 预览文件数据: 运行,成功:

  10. 渐进反馈式搜索技术助力运维工程师——Linux命令高效检索

    日常生活工作中,我们通过搜索引擎查询相关资料时,经常遇到不知如何指定准确关键词的情况,仅仅根据指定大概范围的关键词时,搜索结果往往不能尽如人意. <信息导航>APP最新版本(Ver 1.1 ...