1、demo代码如下:

2、画图如下:

3、规则:

1)每一个函数数据类型(普通函数/类)都有一个天生自带的属性:prototype(原型),并且这个属性是一个对象数据类型的值

2)并且prototype上浏览器天生给它加了一个属性construtor(构造函数),属性值是当前函数(类)本身

3)每一个对象数据类型(普通的对象、实例、prototype...)天生自带一个属性:__proto__(左右各两个_),属性值是当前实例所属类的原型(prototype)

4)Object 是js中所有对象数据类型的基类(最顶层的类)

5)在Object.prototype上没有__proto__这个属性

4、原型连模式:

5、原型链模式如图:

6、结果如下(对照画图):

f1.sum = function(){
 //修改自己的私有的sum
} f1.__proto__.sum = function(){
//修改所属类原型上的sum
}

更多内容请参考:https://github.com/mqyqingfeng/Blog/issues/2

https://github.com/creeperyang/blog/issues/9

javascript基础学习系列-原型链模式的更多相关文章

  1. javascript基础学习系列-DOM盒子模型常用属性

    最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...

  2. javascript基础学习系列-1

    JavaScript简介 JavaScript的用途 JavaScript用来制作web页面交互效果,提升用户体验. web前端三层来说:w3c的规范:行内样式(淘汰) 结构层 HTML 从语义的角度 ...

  3. JavaScript提高篇之面向对象之单利模式工厂模型构造函数原型链模式

    1.单例模式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

  5. 学习javascript基础知识系列第三节 - ()()用法

    总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...

  6. JavaScript之继承(原型链)

    JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...

  7. js面向对象、创建对象的工厂模式、构造函数模式、原型链模式

    JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...

  8. JavaScript 基础学习1-day14

    JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...

  9. 48.javascript基础学习

    javascript基础学习:   http://www.w3school.com.cn/jsref/index.asp jS的引入方式: 1.行间事件:为某一个具体的元素标签赋予js内容,oncli ...

随机推荐

  1. Visio画流程图风格设置

    第一步:选取设计下选用“简单” 第二步:设置颜色为“铅笔” 第三步:设置效果为“辐射” 第四步:效果

  2. 【SQL 代码】SQL复制数据表及表结构

    select * into 目标表名 from 源表名 from 源表名 以上两句都是将'源表'的数据插入到'目标表',但两句又有区别的: 第一句(select into from)要求目标表不存在, ...

  3. ASP.NET Core入门系列教程

    微软把这个新的框架叫:Razor Pages,以下文中我们将频繁提及—Razor Pages. 项目目录结构 wwwroot静态资源文件夹首先,Razor Pages项目中多了一个wwwroot的文件 ...

  4. 关于VIM自动缩进失效(filetype indent on无效)的详细分析

    关于VIM自动缩进失效(filetype indent on无效)的详细分析 set filetype=xml filetype indent on 执行对齐命令:ggvG

  5. Mybatis3——使用学习(一)

    目录 Mybatis Mybatis参考资源 Mybatis 使用 肯定TM要跑起来 XML映射配置文件 Mapper XML 文件 Mybatis Mybatis参考资源 Mybatis官网手册:h ...

  6. 《Redis入门指南(第2版)》读后感

    今天刚刚将此书看完,现在还能记住一些内容,还有一些感慨感想,正好又想写点什么了就随便记录一下吧!也许灵感明天就消失了呢? 首先觉得作者非常的厉害,年纪轻轻的就写出了这么一本非常不错的书籍! 然后就是对 ...

  7. 如何测试hello world

    最近在跟敏捷专家聊到了单元测试的相关内容. 我的问题主要集中在如何推广单元测试. 我们发现在很多团队,开发人员并不是十分愿意去写单元测试,我认为主要的原因是学习写单元测试是有成本的,很多开发同学并不愿 ...

  8. SQLServer 数据库变成单个用户后无法访问问题的解决方法

    USE master; GO DECLARE @SQL VARCHAR(MAX); SET @SQL='' SELECT @SQL=@SQL+'; KILL '+RTRIM(SPID) FROM ma ...

  9. windows系统安装完后要做的事情

    完成之后 1.netplwiz关闭开机输入密码 2.这台电脑右击->属性->高级系统设置->高级->性能设置->高级->虚拟内存: 把C盘设为无分页文件,选择一个大 ...

  10. pandas数组(pandas Series)-(5)apply方法自定义函数

    有时候需要对 pandas Series 里的值进行一些操作,但是没有内置函数,这时候可以自己写一个函数,使用 pandas Series 的 apply 方法,可以对里面的每个值都调用这个函数,然后 ...