1.原型是一个对象,其他对象可以通过它实现属性的继承
所有对象在默认的情况下都有一个原型,因为原型的本身也是对象,
所以一个类的真正原型是被类的内部[prototype]属性所指出。
每个函数都有一个属性叫做prototype,这个prototype的属性值是一个对象(属性的集合),默认的只有一个叫做constructor的属性,指向这个函数本身。

如上图,SuperType是是一个函数,右侧的方框就是它的原型。

注:上图来自 http://www.cnblogs.com/wangfupeng1988/p/3978131.html
2.什么可以称之为对象?
在JavaScript中一个对象:就是任何的无序的键值对的集合function var a={}
如果他不是一个主数据类型(undefined null boolean number string)其他的通通叫做对象。
JavaScript中的原型(prototype)是和函数(function紧密相连的)
var o={} 他不是有用function他有原型吗? 答:必须的
每一个通过new操作符生成出来的对象都持有一个属性__proto__,这个属性保存了创建他的构造函数的prototype的原型的引用。
 类的扩展方式有两类共三种:                             
说明一下,是在原型链上层扩展出来的。
两类:分为是否是function定义的类分为两种。
由function定义的只有一种,不是有function定义的有两种。
(1)由function定义的类
function person() {}//定义一个空对象
person.prototype.name="我是一个在原型链上层扩展出来的";//属性扩展
person.prototype.showName=function () {
alert(this.name);//this表示调用本函数的一个具体实例化的类
}
new person().showName();//调用方式
(2)不是由function定义的类,有隐示扩展和显示扩展。
(2.1)第一种扩展方式,显示扩展,通过Object
Object.getPrototypeOf(cat).name="猫咪";//通过object获取原型链

(2.2)第二种扩展方式,隐示扩展,通过__proto__属性。

cat.__proto__.age=;//我在上层《==》   cat.age=10;

(3)调用
cat.name+cat.age  //猫咪 10
   画图理解为:


梳理一下,类扩展方法
function  person() {
this.getName=function (str) {
alert(str);
}
}
person.prototype.getAge=function (age) {
alert(age);
}
1,实现一个空类继承function定义的类的属性.
方法为,让空类的对象所持有的原型的索引(__proto__)变成function类所持有的原型的索引(prototype)。
var b={};//空类
b.__proto__=per.prototype;//让空类 的对象所持有的原型的索引(__proto__)变成function类所持有的原型的索引(prototype) 原型链 上级对等 【此时为类的索引】
b.getAge();

2,简单方式实现继承

var b={};//空类
b.__proto__=new per();//指向per的per
b.__proto__.constructor=b;//继承后构造函数发生了改变,改变构造函数指向b本身的构造函数

使用图梳理一下原理:

索引的变化:

(1)

(2)如果per是空对象的话,类b就完全变成类per.
(3)当per不为空时,实质为,b.__proto__=new per();b类只接在per类后面。
此时b的构造函数是per的构造函数(b继承per而来的)
但是,我们需要的时b类自身的构造函数,可以使用以下方法实现继承后构造函数的改变。
b.__proto__.constructor=b;//只是改变构造函数
说明一下,此时为类b除去构造函数外继承与类per。

JavaScript原型模式(prototype)的更多相关文章

  1. Javascript原型模式总结梳理

    在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编 ...

  2. 面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统

    面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...

  3. Net设计模式实例之原型模式( Prototype Pattern)

    一.原型模式简介(Brief Introduction) 原型模式(Prototype Pattern):用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象. Specify the kin ...

  4. 二十四种设计模式:原型模式(Prototype Pattern)

    原型模式(Prototype Pattern) 介绍用原型实例指定创建对象的种类,并且通过拷贝这个原型来创建新的对象.示例有一个Message实体类,现在要克隆它. MessageModel usin ...

  5. 设计模式(四)原型模式Prototype(创建型)

      设计模式(四)原型模式Prototype(创建型) 1.   概述 我们都知道,创建型模式一般是用来创建一个新的对象,然后我们使用这个对象完成一些对象的操作,我们通过原型模式可以快速的创建一个对象 ...

  6. 乐在其中设计模式(C#) - 原型模式(Prototype Pattern)

    原文:乐在其中设计模式(C#) - 原型模式(Prototype Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 原型模式(Prototype Pattern) 作者:weba ...

  7. 原型模式-Prototype(Java实现)

    原型模式-Prototype 通过复制(克隆.拷贝)一个指定类型的对象来创建更多同类型的对象. 就像去蛋糕店买蛋糕一样. 柜台里的蛋糕都是非卖品. 只是为顾客提供一种参照. 当顾客看上某一个样式的蛋糕 ...

  8. 原型模式 prototype 创建型 设计模式(七)

    原型模式  prototype 意图 用原型实例指定需要创建的对象的类型,然后使用复制这个原型对象的方法创建出更多同类型的对象   显然,原型模式就是给出一个对象,然后克隆一个或者更多个对象 小时候看 ...

  9. JavaScript -- 原型:prototype的使用

    JavaScript -- 原型:prototype的使用 在 JavaScript 中,prototype 是函数的一个属性,同时也是由构造函数创建的对象的一个属性. 函数的原型为对象. 它主要在函 ...

  10. C# -- 等待异步操作执行完成的方式 C# -- 使用委托 delegate 执行异步操作 JavaScript -- 原型:prototype的使用 DBHelper类连接数据库 MVC View中获取action、controller、area名称、参数

    C# -- 等待异步操作执行完成的方式 C# -- 等待异步操作执行完成的方式 1. 等待异步操作的完成,代码实现: class Program { static void Main(string[] ...

随机推荐

  1. 教你管理SQL数据库系列(1-4)

    原文 教你管理 SQL Server 数据库(1)数据库的结构  http://bbs.51cto.com/thread-1084951-1.html教你管理 SQL Server 数据库(2)系统数 ...

  2. CentOS 7 巨大变动之 systemd 取代 SysV的Init

    1 systemd是什么 首先systmed是一个用户空间的程序,属于应用程序,不属于Linux内核范畴,Linux内核的主要特征在所有发行版中是统一的,厂商可以自由改变的是用户空间的应用程序.   ...

  3. ubuntu导入torch模块报错

    ubuntu下导入torch报错 >>> import torchIllegal instruction (core dumped) 安装pytorch 去pytorch官网下载py ...

  4. weak 的内部实现原理

    问题 weak 变量在引用计数为0时,会被自动设置成 nil,这个特性是如何实现的? 答案 在 Friday QA 上,有一期专门介绍 weak 的实现原理.https://mikeash.com/p ...

  5. 每天一个Linux命令(13)less命令

    less命令的作用与more十分相似,都可以用来浏览文字档案的内容,不同的是less命令允许用户向前或向后浏览文件,而more命令只能向前浏览. 用less命令显示文件时,用PageUp键向上翻页,用 ...

  6. ie6不认识

    1.   ie6 不认识这样连续写的类选择 .class1.class2{  } 2.   ie6 下不解析 css  input[type="text"] 等等类别的选择

  7. server.xml笔记

    本文总结自: http://www.importnew.com/26156.html 核心元素: 顶层元素: server service 连接器: connector 容器: engine > ...

  8. mac下搭建前端自动化工程

    好多年没有接触前端,发现前端行业发生了巨大的变化,很多新鲜术语,比如node.git.grunt.less.sass.预编译.自动化.模块化等等,看得让人晕头转向,不要担心,我会把这之前之后学习成果都 ...

  9. EntityFramework 学习 一 Update Entity Graph using DbContext:

    使用主键属性 每个实体必须有主键 默认值的id属性值必须为0 在context2中,它不知道实体的状态, 只能通过实体的主键来判断实体的状态 如果主键为0,则是新的对象,不为0 就是修改 Standa ...

  10. jQuery应用之eraser.js使用,实现擦除、刮刮卡效果

    jquery.eraser是一款使用鼠标或触摸的动作来擦除画布显示真正图片的插件.jquery.eraser插件的原理是用一个画布遮住图片,然后根据触摸或鼠标输入来擦除画布显示图片,您可以在参数中指定 ...