学习目标:
    认识什么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. 高通平台msm8916修改开机logo【原创】

    经过两天的奋战终于把开机logo给搞定了啊. 首先修改开机logo要从哪里入手呢?先分析一下源码看看. ---> void display_image_on_screen() { struct ...

  2. ORA-00346，借助_allow_resetlogs_corruption开库

    Mon Aug 06 10:15:08 2018Errors in file /data/app/oracle/diag/rdbms/prod/prod/trace/prod_ora_6831.trc ...

  3. Delphi XE2 之 FireMonkey 入门(10) - 常用结构 TPoint、TPointF、TSmallPoint、TSize、TRect、TRectF 及相关方法

    它们都是结构, TPointF.TRectF 属新增, 其它也都有升级; 现在都拥有丰富的方法和方便的运算符重载; 且有一组相关的公共函数. 这组内容重要的是它们都来自 System.Types 单元 ...

  4. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_08 转换流_3_转换流的原理

    FileReader源码的构造方法.底层使用FileInputStram读取 编码不一样占用的字节大小也不一样.GBK一个汉字占用 2个字节. utf-8一个汉字占用三个字节 转换流InputStre ...

  5. 《计算机程式设计》Week5 课堂笔记

    本笔记记录自 Coursera课程 <计算机程式设计> 台湾大学 刘邦锋老师 Week5 Pointer 5-1 Pointer Definition and Declaration 指针 ...

  6. shell 比较符号

    if ［ 1 -ne 1 ］;then...fi这是指当1不等于1时执行then后的语句 -eq:等于-ne:不等于-le:小于等于-ge:大于等于-lt:小于-gt:大于

  7. Altium Designer chapter8总结

    元件库操作中需要注意如下: (1)原理图库:主要分三部分来完成(绘制元件的符号轮廓.放置元件引脚.设计规则检查). (2)多子件原理图库:操作与原理图库基本相同,就是新建part. (3)PCB封装库 ...

  8. EL表达式.jsp指令等

    1.JSP标准指令:<%@ 标准指令(属性 )%><%@ page %><%@ include %><%@ taglib %> 2.JSP程序代码元素: ...

  9. vue 中注册全局组件

    1  全局注册组件 建一个 js 文件, 注册全局组件, 并且暴露出去 然后再在 main.js  中引入       在页面就可以直接使用了    2 全局注册过滤器 建立文件, 包含所有过滤器方法 ...

  10. Java io基础

    1.什么是IO? Java IO即Java 输入输出系统.不管我们编写何种应用,都难免和各种输入输出相关的媒介打交道,其实和媒介进行IO的过程是十分复杂的,这要考虑的因素特别多,比如我们要考虑和哪种媒 ...