谈谈js中的prototype及prototype属性解释和常用方法


Posted in Javascript onNovember 25, 2015

prototype是javascript中笔记难理解的一部分内容,下面通过几个关键知识点给大家讲解js中的prototype。具体内容请看下文详情。

1 原型法设计模式

在.Net中可以使用clone()来实现原型法

原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。

2 javascript的方法可以分为三类:

a 类方法
b 对象方法
c 原型方法

例子:

function People(name)
{
 this.name=name;
 //对象方法
 this.Introduce=function(){
 alert("My name is "+this.name);
 }
}
//类方法
People.Run=function(){
 alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
 alert("我的名字是"+this.name);
}
//测试
var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese();

3 obj1.func.call(obj)方法

意思是将obj看成obj1,调用func方法

好了,下面一个一个问题解决:

prototype是什么含义?

javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。

A.prototype = new B();

理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。

先看一个实验的例子:

function baseClass()
{
 this.showMsg = function()
 {
  alert("baseClass::showMsg"); 
 }
}
function extendClass()
{
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg

我们首先定义了baseClass类,然后我们要定义extentClass,但是我们打算以baseClass的一个实例为原型,来克隆的extendClass也同时包含showMsg这个对象方法。

extendClass.prototype = new baseClass()就可以阅读为:extendClass是以baseClass的一个实例为原型克隆创建的。

那么就会有一个问题,如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样?

下面是扩展实验2:

function baseClass()
{
 this.showMsg = function()
 {
  alert("baseClass::showMsg"); 
 }
}
function extendClass()
{
 this.showMsg =function ()
 {
  alert("extendClass::showMsg");
 }
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg();//显示extendClass::showMsg

实验证明:函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。

那么又会有一个新的问题:

如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?

答案是可以使用call:

extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg

这里的baseinstance.showMsg.call(instance);阅读为“将instance当做baseinstance来调用,调用它的对象方法showMsg”

好了,这里可能有人会问,为什么不用baseClass.showMsg.call(instance);

这就是对象方法和类方法的区别,我们想调用的是baseClass的对象方法

最后,下面这个代码如果理解清晰,那么这篇文章说的就已经理解了:

<script type="text/javascript">
function baseClass()
{
 this.showMsg = function()
 {
  alert("baseClass::showMsg"); 
 }
 this.baseShowMsg = function()
 {
  alert("baseClass::baseShowMsg");
 }
}
baseClass.showMsg = function()
{
 alert("baseClass::showMsg static");
}
function extendClass()
{
 this.showMsg =function ()
 {
  alert("extendClass::showMsg");
 }
}
extendClass.showMsg = function()
{
 alert("extendClass::showMsg static")
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); //显示extendClass::showMsg
instance.baseShowMsg(); //显示baseClass::baseShowMsg
instance.showMsg(); //显示extendClass::showMsg
baseClass.showMsg.call(instance);//显示baseClass::showMsg static
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg
</script>

ps:js的Prototype属性 解释及常用方法

函数:原型

每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译,使用其原文)。这个属性非常有用:为一个特定类声明通用的变量或者函数。

prototype的定义

你不需要显式地声明一个prototype属性,因为在每一个构造函数中都有它的存在。你可以看看下面的例子:

Example PT1
CODE:

function Test()
{
}
alert(Test.prototype); // 输出 "Object"

给prototype添加属性

就如你在上面所看到的,prototype是一个对象,因此,你能够给它添加属性。你添加给prototype的属性将会成为使用这个构造函数创建的对象的通用属性。
例如,我下面有一个数据类型Fish,我想让所有的鱼都有这些属性:livesIn="water"和price=20;为了实现这个,我可以给构造函数Fish的prototype添加那些属性。

Example PT2

CODE:

function Fish(name, color)
{
this.name=name;
this.color=color;
}
Fish.prototype.livesIn="water";
Fish.prototype.price=20;

接下来让我们作几条鱼:

CODE:

var fish1=new Fish("mackarel", "gray");
var fish2=new Fish("goldfish", "orange");
var fish3=new Fish("salmon", "white");

再来看看鱼都有哪些属性:

CODE:

for (int i=1; i<=3; i++)
{
var fish=eval_r("fish"+i); // 我只是取得指向这条鱼的指针
alert(fish.name+","+fish.color+","+fish.livesIn+","+fish.price);
}

输出应该是:

CODE:

"mackarel, gray, water, 20"
"goldfish, orange, water, 20"
"salmon, white water, 20"

你看到所有的鱼都有属性livesIn和price,我们甚至都没有为每一条不同的鱼特别声明这些属性。这时因为当一个对象被创建时,这个构造函数 将会把它的属性prototype赋给新对象的内部属性__proto__。这个__proto__被这个对象用来查找它的属性。

你也可以通过prototype来给所有对象添加共用的函数。这有一个好处:你不需要每次在构造一个对象的时候创建并初始化这个函数。为了解释这一点,让我们重新来看Example DT9并使用prototype来重写它:

用prototype给对象添加函数

Example PT3

CODE:

function Employee(name, salary)
{
this.name=name;    
this.salary=salary;
}
Employee.prototype.getSalary=function getSalaryFunction()
{
return this.salary;
}
Employee.prototype.addSalary=function addSalaryFunction(addition)
{
this.salary=this.salary+addition;
}

 我们可以象通常那样创建对象:

CODE:

var boss1=new Employee("Joan", 200000);
var boss2=new Employee("Kim", 100000);
var boss3=new Employee("Sam", 150000);

并验证它:

CODE:

alert(boss1.getSalary()); // 输出 200000
alert(boss2.getSalary()); // 输出 100000
alert(boss3.getSalary()); // 输出 150000

这里有一个图示来说明prototype是如何工作的。这个对象的每一个实例(boss1, boss2, boss3)都有一个内部属性叫做__proto__,这个属性指向了它的构造器(Employee)的属性prototype。当你执行 getSalary或者addSalary的时候,这个对象会在它的__proto__找到并执行这个代码。注意这点:这里并没有代码的复制(和 Example DT8的图表作一下对比)。

谈谈js中的prototype及prototype属性解释和常用方法

Javascript 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 #Javascript
使用Javascript写的2048小游戏
Nov 25 #Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 #Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 #Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 #Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 #Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 #Javascript
You might like
php网站地图生成类示例
2014/01/13 PHP
javascript prototype 原型链
2009/03/12 Javascript
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
从零学Python之hello world
2014/05/21 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
python中xlutils库用法浅析
2020/12/29 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
医院护士的求职信范文
2013/12/26 职场文书
旷课检讨书1000字
2014/02/14 职场文书
项目施工员岗位职责
2014/03/09 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
Redis基本数据类型String常用操作命令
2022/06/01 Redis