学习目标:
    认识什么js是原型，原型、构成函数、实例对象关系；原型应用范围。

什么是原型
    函数有原型，函数有一个属性叫prototype，函数的这个原型指向一个对象，这个对象叫原型对象。这个原型对象有一个constructor属性，指向这个函数本身。

实例对象也存在原型，实例对象存在原型对象是__proto__，__proto__一般被叫隐身原型，这个隐身原型有一个constructor属性，该属性指向创建该实例的构造函数。

构造函数、实例对象和原型直接关系
构造函数和实例对象关系
     在每一个实例对象中的__proto__中同时有一个 constructor 属性，该属性指向创建该实例的构造函数：

实例对象__proto__和构造函数prototype关系
     在每一个实例对象中的__proto__指向构造函数中prototype 两个是相等的。

构造函数，prototype原型对象，实例对象，proto,constructor,直接关系

原型作用

  • 原型作用之一:数据共享,节省内存空间
  • 原型作用之二:为了实现继承

原型如何数据共享，节约内存空间
      JavaScript 面向对象编程

原型如何实现继承
比如，现在有一个"动物"对象的构造函数。

还有一个"猫"对象的构造函数。

怎样才能使"猫"继承"动物"呢？
     如果"猫"的prototype对象，指向一个Animal的实例，那么所有"猫"的实例，就能继承Animal了。

cat1实例对象与构造函数关系图如下


　　
       任何一个prototype对象都有一个constructor属性，指向它的构造函数。
       添加 Cat.prototype = new Animal();代码以后
       Cat.prototype.constructor指向Animal。

cat1实例对象与构造函数关系图如下

什么是Js原型？（1）（包括作用：继承）的更多相关文章

  1. js 原型链和继承（转）

    在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...

  2. 彻底弄懂JS原型与继承

    本文由浅到深,循序渐进的将原型与继承的抽象概念形象化,且每个知识点都搭配相应的例子,尽可能的将其通俗化,而且本文最大的优点就是:长(为了更详细嘛). 一.原型 首先,我们先说说原型,但说到原型就得从函 ...

  3. JS原型链与继承别再被问倒了

    原文:详解JS原型链与继承 摘自JavaScript高级程序设计: 继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承 和 实现继承 .接口继承只继承方法签名,而实 ...

  4. js原型链理解(2)--原型链继承

    1.原型链继承 2.constructor stealing(构造借用) 3.组合继承 js中的原型链继承,运用的js原型链中的__proto__. function Super(){ this.se ...

  5. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  6. js原型链与继承（初体验）

    js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...

  7. 深入理解JS原型链与继承

    我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...

  8. 前端面试题总结二(js原型继承)

    今天这篇文章整理了JS原型和继承的一些知识点,面试的时候  基!本!都!会!问!还不快认真阅读下文,看看你还有哪些知识点需要掌握吧~ 1.原型链 基本思想:利用原型让一个引用类型继承另外一个引用类型的 ...

  9. js原型与继承

    demofunction Fun(){}
var foo = new Fun();foo.__proto__ === Fun.prototype 摘要 1.js本身不提供类实现,es6引入了class ...

  10. JS原型继承与类的继承

    我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

随机推荐

  1. 麦子lavarel---10、一些第三方应用注意

    麦子lavarel---10.一些第三方应用注意 一.总结 一句话总结: 其实把重要的几个功能弄一个就好了,邮箱验证,手机号验证,支付验证,都是调用第三方接口,也很简单 1.关于页面和服务端校验的看法 ...

  2. 安装fedora23后的一些杂项设置

    Boxes是创建虚拟机的技术 tweak: 拧, 捏; 微调 he gave the boy's ear a painful tweak. it's a small tweak over the ra ...

  3. 用Vue来实现音乐播放器（二十）：Vuex初始化及歌手数据的配置

    state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件 ...

  4. 007-Spring Boot-@Enable*注解的工作原理-EnableConfigurationProperties、ImportSelector、ImportBeanDefinitionRegistrar

    一.@Enable* 启用某个特性的注解 1.EnableConfigurationProperties 回顾属性装配 application.properties中添加 tomcat.host=19 ...

  5. Vue组件父子间通信01

    子组件传递数据 用户已经登录 父组件接收数据 并显示列表,未登录不显示列表 /* 有两个组件,分别是main-component,header-component.main-component是由he ...

  6. 监控java的进程启动情况（bat）

    最近有个项目需要检测某个软件崩溃重启的间隔和重启时间,百度了一下,按照自己的需求做了相应的修改 @echo off rem 定义需监控程序的进程名和程序路径,可根据需要进行修改 set AppName ...

  7. webpack打包html里的img图片

    对待css里的图片, 因为已经通过引入css文件到js,打包了,可以正常通过module.rules.test检测到,然后正常打包. 但是对于html里的图片, 这个需要安装一个插件html-with ...

  8. js中对象的属性名和属性值

    代码 /** * 对象的属性名 * - 对象的属性名不强制遵循标识符的命名规范,可以是任意的名字,但在开发中 * 尽量遵循标识符的命名规范 */ // 创建对象obj1 var obj1 = new ...

  9. struts2导入多个xml引入报错<include>

    struts.xml <?xml version="1.0" encoding="UTF-8"?> <!-- 指定Struts 2配置文件的D ...

  10. ORA-00911: invalid character 错误解决

    多数情况如下: 控制面板--系统和安全---系统--高级系统设置--高级--环境变量--系统变量中 变量名:NLS_LANG 变量值:SIMPLIFIED CHINESE_CHINA.ZHS16GBK ...