谈js中原型和原型属性的解释和常用方法

原型是javascript中笔记的难点。这里有一些关键的知识点来解释js中的原型。详情请见下文。

1原型设计模式。

英寸Net中，可以使用clone()实现原型方法。

原型法的主要思想是现在有一个A类，我想创建一个B类，基于A，可以扩展。我们称之为b a的原型。

2 javascript方法可以分为三类：

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

示例：

函数People(name){ this . name=name；//object这个方法。introduction=function(){ alert('我叫' this。姓名)；} }//类方法人。run=function () {alert('我可以运行')；}//原型方法people . prototype . introduccechinese=function(){ alert('我的名字是' this . name ')；}//测试var p1=新人(' wind king ')；p1。引入()；人们。run()；p1。introduccechinese()；3 obj1.func.call(obj)方法。

意思是把obj当作obj1，调用func方法。

好了，让我们一个一个解决问题：

原型是什么意思？

javascript中的每个对象都有一个prototype属性，在Javascript中对prototype属性的解释是返回对象类型prototype的引用。

a . prototype=new B()；理解原型不应将其与继承混淆。A的原型是b的一个实例，可以理解为A克隆了b中的所有方法和属性，A可以使用b的方法和属性，这里强调的是克隆而不是继承。有可能a的原型是b的实例，而b的原型也是a的实例.

我们先来看一个实验例子：

function baseClass(){ this . showmsg=function(){ alert(' baseClass :3360 showmsg ')；} }函数extend class(){ } extend class . prototype=new base class()；var实例=new extend class()；instance . showmsg()；//显示base class :3360 show msg。我们首先定义baseClass，然后我们想要定义extendClass，但是我们计划基于baseClass的一个实例来克隆extendclass，该实例还包含showMsg作为对象方法。

ExtendClass。prototype=newbaseClass()可以读作：Extendclass是由baseClass的一个实例作为原型克隆创建的。

然后有一个问题，如果extendClass本身包含一个与baseClass的方法同名的方法会怎么样？

以下是扩展实验2:

function baseClass(){ this . showmsg=function(){ alert(' baseClass :3360 showmsg ')；} } function extend class(){ this . showmsg=function(){ alert(' extend class :3360 showmsg ')；} } extend class . prototype=new base class()；var实例=new extend class()；instance . showmsg()；//Show extend class : showmsg实验证明，一个函数运行时，首先会在本体中寻找该函数，如果找到了，就会运行，如果没有找到，就会在原型中寻找该函数。或者可以理解为原型不会克隆同名的函数。

那么就会出现一个新的问题：

如果我想用extendClass的实例实例调用基类的对象方法showMsg会怎么样？

答案是你可以拨打：

extend class . prototype=new base class()；var实例=new extend class()；var base instance=new BaseClass()；baseinstance.showMsg.call(实例)；//在baseClass:showMsg中显示baseinstance.showmsg.call(实例)；阅读“调用实例作为基本实例，调用其对象方法showMsg”。

好吧，这里可能有人会问，为什么不用baseclass.showmsg.call(实例)；

这就是对象方法和类方法的区别。我们要调用的是基类的对象方法。

最后，如果下面的代码被清楚地理解了，那么这篇文章所说的就已经被理解了：

脚本类型=' text/JavaScript '函数基类(){ this。showmsg=function(){ alert('基类：3360 show msg ')；}这个。baseshomsg=function(){ alert('基类： baseshomsg ')；} }基类。showmsg=function(){ alert('基类：3360 show msg static ')；}函数extend class(){ this。showmsg=function(){ alert(' extend class :3360 showmsg ')；} }扩展类。showmsg=function(){ alert(' extend class :3360 showmsg static ')} extend class。prototype=新基类()；定义变量实例=新的扩展类()；实例。show msg()；//显示扩展类：3360 showmsgins。base showmsg()；//显示基类： base showmsgins。show msg()；//显示扩展类：3360 showmsgbaseclass。showmsg。呼叫(实例);//显示基类： showmsg static var基类实例=new基类()；baseinstance.showMsg.call(实例);//显示基类：3360 showmsg/scriptps:js的原型属性解释及常用方法

函数：原型

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

原型的定义

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

示例PT1CODE:

函数测试(){ }警报(测试。原型)；//输出"对象"给原型添加属性

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

示例PT2

代码：

函数鱼(名字，颜色){这个。name=name这条鱼。原型。livesin='水'；鱼。原型。价格=20；接下来让我们作几条鱼：

代码：

var fish1=new Fish('mackarel '，' gray ')；var fish2=新鱼('金鱼','橙色');var fish3=新鱼('鲑鱼','白');再来看看鱼都有哪些属性：

代码：

for(int I=1；I=3；I){ var fish=eval _ r(' fish ' I)；//我只是取得指向这条鱼的指针alert(fish.name '，' fish.color '，' fish.livesIn '，' fish。价格'；}输出应该是：

代码：

麦凯雷尔，灰色，水，20 ' '金鱼，橙色，水，20 ' '鲑鱼，白水，20 '你看到所有的鱼都有属性生活在和价格，我们甚至都没有为每一条不同的鱼特别声明这些属性。这时因为当一个对象被创建时，这个构造函数将会把它的属性原型赋给新对象的内部属性__原型_ _ .这个__原型_ _被这个对象用来查找它的属性。

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

用原型给对象添加函数

示例PT3

代码：

函数员工(姓名，工资){ this.name=namethis。工资=薪水；}员工。原型。get salary=function get salary function(){返回这个。工资；}员工。原型。addsalary=函数addsalary函数(加法){this .薪水=this .薪水加法；}我们可以象通常那样创建对象：

代码：

var boss1=新员工(‘琼’，20万；var boss2=新员工(‘金’，10万；var boss3=新员工(‘山姆’，15万)；并验证它：

代码：

alert(boss 1 . getsalary())；//输出200000 alert(boss 2 . getsalary())；//输出100000 alert(boss 3 . getsalary())；//输出150000以下是原型如何工作的示例。这个对象的每个实例(boss1、boss2、boss3)都有一个名为_ _ prototype _ _的内部属性，它指向其构造函数(Employee)的属性原型。当您执行getSalary或addSalary时，该对象将在其__proto__中找到并执行该代码。注意：此处没有代码副本(与示例DT8的图表进行比较)。