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

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

对 …… 我没有成长

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

对 …… 我不会离职……

略略略 来咬我啊……

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

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

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

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. Vue 动态路由传值

    一.动态路由传值 1.配置动态路由: const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. ...

  2. LayaAir疑难杂症之三:1.7版本click()、execCommand('copy')函数不生效

    问题描述 在使用Laya1.7引擎开发H5游戏时,引入Js原生函数click( ),模拟一次点击事件,发现无效.在使用Laya1.7引擎开发H5游戏时,引入Js原生函数execCommand('cop ...

  3. Git的操作理解

    1.本地和远程的关系相当于两个分支,是相互独立的. 2.本地分支属于本地仓库,一个仓库可以包含多个分支. 3.commit是为了告诉Git这次提交我改了哪些东西:       pull是将远程comm ...

  4. github 解决 Agent admitted failure to sign using the key

    公司迁移git 新库,重新迁移数据. 添加 ssh key  1. 首先要在新git 库管理平台 添加新的ssh-key : 本机上执行 ssh-keygen -t rsa -C "Your ...

  5. java面试题复习(五)

    41.阐述final.finally.finalize的区别 final:修饰符(关键字)有三种用法:如果一个类被声明为final,意味着它不能再派生出新的子类,即不能被继承,因此它和abstract ...

  6. websocket的子协议stomp协议

    stomp协议Spring实现 服务器注册EndPoint 用来与客户端建立websocket连接 websocket连接的建立应该与客户端与服务器之间的通道无关 jdk中 javax下的websoc ...

  7. mongodb插入数据获取本次插入的mongodb id

    最近接了一个别人的项目做二次开发,使用php进行mongodb的数据操作时,需要插入数据后得到相应的mongodb 中的id,简单代码如下 $data = array('test' => 'aa ...

  8. 每日算法之递推排序(P1866 编号)

    兔子也是数字控:每个兔子都有自己喜欢的数字区间,找出能让所有兔子都满意的组合. 将所有兔子喜欢的序号按从小到大排序,此时如果小序号的兔子选择了一个数字,则之后的兔子只要排除排在它之前的兔子数(由于已经 ...

  9. linux7 安装 zlib依赖库 与安装python 3.6

    Linux 安装zlib依赖库 进入src: cd /usr/local/src 下载zlib库: wget http://www.zlib.net/zlib-1.2.11.tar.gz 解压下载的t ...

  10. [Flutter] lib/main.dart:1: Warning: Interpreting this as package URI, 'package:flutter_app/main.dart'.

    lib/main.dart:1: Warning: Interpreting this as package URI, 'package:flutter_app/main.dart'. import ...