学习目标:
    认识什么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. Apache2.4+PHP7.2环境搭建

    Editplus生成码:http://www.jb51.net/tools/editplus/ 阿帕奇下载地址:https://www.apachehaus.com/cgi-bin/download. ...

  2. hypermesh中怎么设置支反力（反作用力）

    Analysis page >> Control cards >> Global output request 勾选 SPCF 和 GPFORCE .

  3. 查看磁盘和文件的使用情况df和du

    df, du: disk filesystem, disk usage. df : 查看一级目录的使用情况, df -h du: 则是可以查看目录或者某个文件的占用磁盘空间的情况, du -h: 使用 ...

  4. 职位-CEO：CEO

    ylbtech-职位-CEO:CEO 首席执行官(Chief Executive Officer,缩写CEO),职位名称,是在一个企业中负责日常事务的最高行政官员,主司企业行政事务,又称作司政.行政总 ...

  5. 《JavaScript 高级程序设计》

    第 3 章 基本概念 3.5.2 位操作符 ECMAScript 中所有数值都是以 IEEE-754 64 位格式存储,但位操作符并不直接操作 64 位的值.而是先将 64 位的值转换成 32 位的整 ...

  6. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_01 Collection集合_5_迭代器的代码实现

    迭代器的类型和collection一样.都是String类型的 判断集合内是不是有元素 取出第一个元素 多次next获取所有的值 没有元素,再去取就会抛出异常. 适应while for循环的格式了解一 ...

  7. C#实现京东登录密码加密POST

    1.京东登录登录密码 function getEntryptPwd(pwd) { var pubKey = $('#pubKey').val(); if (!pwd || !pubKey || !Sy ...

  8. Spring Boot 之 springcache的使用

    一.开启 springcache,启动类添加 @EnableCaching 注解 @SpringBootApplication @EnableCaching public class Gatherin ...

  9. 来自python自学者的小问题

    我想使用python的第三方库,但是我的IDE给我一个错误代码: D:\untitled\venv\Scripts\python.exe "D:/py code/venv/sxsxsxsxs ...

  10. ODBC Driver Development

    ODBC Driver Development By Vikash Agarwal, May 01, 2002 Open your database system to the world. Vika ...