学习目标:
    认识什么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. 在裸机centos7系统中部署django项目的过程

    概要 本文用一台安装了centos7.5系统的裸奔Linux机器(当然是虚拟机)详细讲解从无到有部署django项目的过程. 安装必要的工具 配置yum源 至于什么是yum源大家请自行百度,本人用的是 ...

  2. 【C++进阶：STL常见性质2】

    一般STL函数接收迭代器参数的规则为:[it1, it2) 左闭右开区间: vector<int> scores; scores.erase(scores.begin(),scores.e ...

  3. HashTable 和 HashMap 区别

    hashMap去掉了HashTable 的contains方法,但是加上了containsValue()和containsKey()方法. hashTable同步的,而HashMap是非同步的,效率上 ...

  4. postman的断言/环境变量的处理

    我们做接口测试都会有一个断言操作:也有一个变量被频繁使用,这时候可以用环境变量来处理 目录 1.postman之断言 2.postman之环境变量 1.postman之断言 同样以postman的登录 ...

  5. vi, Java, Ant, Junit自学报告 - 实训week1

    vi, Java, Ant, Junit自学报告 2017软件工程实训 15331023 陈康怡 vi Vi是linux系统的标准文本编辑器,采用指令的方式进行操作,此处仅记录部分常用的指令. vi模 ...

  6. TestNG 多线程测试

    TestNG以注解的方式实现多线程测试 import org.testng.annotations.Test; public class TreadDemo { // invocationCount ...

  7. PHP上传文件到阿里云OSS,nginx代理访问

    1. 阿里云OSS创建存储空间Bucket(读写权限为:公共读) 2. 拿到相关配置 accessKeyId:********* accessKeySecret:********* endpoint: ...

  8. Mac013--Docker安装

    一.Docker安装教程 参考:http://www.runoob.com/docker/macos-docker-install.html 可应用brew命令安装,也可自定义下载安装. 应用brew ...

  9. == 和 equals的区别

    == 和 equals的区别   基本类型:== 比较的是两个变量的面值大小 对象对象: 比较的是内存地址  特例: String a = "abc" String b = &qu ...

  10. sql 语句 的一些优化小总结

    1.用exists 代替 in 原理:exists 是存在一个即返回一个 而in是做全盘扫描得出所有条件内的数据 (高效) and exists (select 'x' from Person whe ...