javascript基础学习系列-原型链模式

1、demo代码如下:

2、画图如下:

3、规则:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }
span.s2 { font: 12.0px ".PingFang SC" }
span.Apple-tab-span { white-space: pre }

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

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

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

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

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

4、总结如下:

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

f1.sum = function(){
 //修改自己的私有的sum
}

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

原文地址:https://www.cnblogs.com/imsomnus/p/8245446.html

时间: 2024-11-08 23:04:43

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

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

最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)->和内容溢出无关系 clientHeight:height+(padding-top)+(padding-bottom)->和内容溢出无关系 clientLeft:左边框的宽度 clientTop:上边框的高度(border[Left/Top]Width) offset系列 offsetParen

JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即“子类型.prototype = new 父类型();”,实现方法如下

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

1.单例模式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>面向对象之单例模式</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 //对象数据类型

JS学习之原型和原型链模式

原型链模式1.每一个对象(实例也是对象)都有一个天生自带的属性:__proto__,这个属性指向当前所属类的原型(prototype) 2.每一个函数(类也是函数)都有一个天生自带的属性:prototype(原型),并且这个属性存储的值是一个对象数据类型的数据,浏览器默认给这个属性开辟一个堆内存 在这个堆内存中存储了相关的属性和方法 1)其中constructor就是天生自带的一个属性,constructor等于当前的函数本身 2)__proto__:prototype对应的值也是一个对象数据类

javascript精髓篇之原型链维护和继承.

一.两个原型 很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了.其实啊,光靠这一个属性是无法完成javascript的继承.我们在代码中使用的prototype完成继承在这里就不多说了.大家可以查一下资料.另外一个看不见的prototype成员.每一个实例都有有一条指向原型的prototype属性,这个属性是无法被访问到的,当然也就无法被修改了,因为这是维护javascript继承的基础. 1 //构

javascript基础学习(五)

javascript之函数 学习要点: 函数的介绍 函数的参数 函数的属性和方法 系统函数 一.函数的介绍 1.函数就是一段javascript代码.可以分为用户自定义函数和系统函数.   如果一个函数是javascript内置的函数,就称为系统函数.如果函数是自己编写的函数,就是自定义函数. 2.在javascript用function来定义一个函数.function 函数名(参数1,参数2,...){<语句块>  return 返回值} (PS:return语句可以省略) 3.函数的嵌套定

JavaScript之继承(原型链)

我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法.JavaScript不支持签名,因此只有实现继承.其中实现继承主要是依赖于原型链的.下面我将以原型链为重点说说继承的几种主要的方式: 原型链继承 借用构造函数继承 组合继承(重点) 第一部分:原型链继承 A 要说原型链继承,不得不首先介绍一下原型链的概念. 想象一下,如果使原型对象等于另一个对象的实例,则此时原型对象将包含一个指向另一

javascript基础学习(六)

javascript之对象 学习要点: 对象的属性和方法 对象的原型 一.对象 对象其实就是一种引用类型,而对象的值就是引用对象的实例. 二.创建对象 在javascript中有两种对象,一种是系统内置对象,另一种是用户自己创建的对象. 1.使用构造函数创建内置对象 在javascript中有很多内置的对象,每个内置的对象都有一个构造函数,直接使用构造函数就可以创建并初始化一个对象. 在javascript中可以使用new运算符来调用构造函数创建对象.如:var myObject=new Obj

JavaScript 基础学习(二)

JavaScript 基础学习(二) instanceof方法: var s = "hello"; var i = 8; //typeof 只能判断基本数据类型 alert(typeof(s)); alert(typeof (i)); //对于引用数据类型,用instanceof var s2=new String("hello2") alert(typeof(s2)); alert(s2 instanceof String);//true var n = new