javascript代码实例教程-Javascript原型_js

上一篇: javascript代码实例教程-图片延迟... 下一篇:javascript代码实例教程-javascr...

javascript代码实例教程-Javascript原型

发布时间：2019-04-29 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Javascript原型，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

[htML] 
function SayHello() //先定义一份SayHello函数代码
 {
 alert("Hello, I';m " + this.name);
 };

 function PErson(name) //带参数的构造函数
 {
 this.name = name; //将参数值赋给给this对象的属性
 this.SayHello = SayHello; //给this对象SayHello方法赋值为前面那份SayHello代码。
 };

 VAR BillGates = new Person("Bill Gates"); //创建BillGates对象
 var SteveJobs = new Person("Steve Jobs"); //创建SteveJobs对象

 alert(BillGates.SayHello == SteveJobs.SayHello); //显示：true

function SayHello()     //先定义一份SayHello函数代码
    {
        alert("Hello, I'm " + this.name);
    };

    function Person(name)   //带参数的构造函数
    {
        this.name = name;   //将参数值赋给给this对象的属性
        this.SayHello = SayHello;   //给this对象SayHello方法赋值为前面那份SayHello代码。
    };

    var BillGates = new Person("Bill Gates");   //创建BillGates对象
    var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象

    alert(BillGates.SayHello == SteveJobs.SayHello); //显示：true

从上面代码可以看出，BillGates和SteveJobs的SayHello是共享以快内存的，dna是Person类和SayHello方法联系不够紧密。

Javascript中的对象都有以个PRototype属性，且此属性是个object型的对象。因此我们也可以给这个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”，那么由该函数构造出来的对象应该都会具有这个“原型”的特性。事实上，在构造函数的prototype上定义的所有属性和方法，都是可以通过其构造的对象直接访问和调用的。也可以这么说，prototype提供了一群同类对象共享属性和方法的机制。

用原型模式写出来如下:

[html]
function Person(name)
   {
       this.name = name;   //设置对象属性，每个对象各自一份属性数据
   };

   Person.prototype.SayHello = function() //给Person函数的prototype添加SayHello方法。
   {
       alert("Hello, I'm " + this.name);
   }

   var BillGates = new Person("Bill Gates");   //创建BillGates对象
   var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象

   BillGates.SayHello();   //通过BillGates对象直接调用到SayHello方法
   SteveJobs.SayHello();   //通过SteveJobs对象直接调用到SayHello方法

   alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello，所以显示：true

function Person(name)
    {
        this.name = name;   //设置对象属性，每个对象各自一份属性数据
    };

    Person.prototype.SayHello = function() //给Person函数的prototype添加SayHello方法。
    {
        alert("Hello, I'm " + this.name);
    }

var BillGates = new Person("Bill Gates"); //创建BillGates对象
var SteveJobs = new Person("Steve Jobs"); //创建SteveJobs对象

BillGates.SayHello(); //通过BillGates对象直接调用到SayHello方法
SteveJobs.SayHello(); //通过SteveJobs对象直接调用到SayHello方法

alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello，所以显示：true
再看一下下面的代码，两个对象的sayhello方法不是共享内存的:

[html]
function Person(name)   //带参数的构造函数
2     {
3         this.name = name;   //将参数值赋给给this对象的属性
4         this.SayHello = function() {alert("Hello, I'm " + this.name);};   //给this对象定义一个SayHello方法。
5     };
6
7     function Employee(name, salary)     //子构造函数
8     {
9         Person.call(this, name);        //将this传给父构造函数
10         this.salary = salary;       //设置一个this的salary属性
11         this.ShowMeTheMoney = function() {alert(this.name + " $" + this.salary);}; //添加ShowMeTheMoney方法。
12     };
13
14     var BillGates = new Person("Bill Gates");   //用Person构造函数创建BillGates对象
15     var SteveJobs = new Employee("Steve Jobs", 1234);   //用Empolyee构造函数创建SteveJobs对象
16
17     BillGates.SayHello();   //显示：I'm Bill Gates
18     SteveJobs.SayHello();   //显示：I'm Steve Jobs
19     SteveJobs.ShowMeTheMoney();   //显示：Steve Jobs $1234
20
21     alert(BillGates.constructor == Person); //显示：true
22     alert(SteveJobs.constructor == Employee); //显示：true
23
24     alert(BillGates.SayHello == SteveJobs.SayHello); //显示：false

书上说每一个对象的函数体，都在内存中存储着自己的副本，就像java的父类和子类一样，则虽然他们的结构是一样的但是不共享内存。

再看下面的例子:

[html]
function Person(name)   //基类构造函数
2     {
3         this.name = name;
4     };
5
6     Person.prototype.SayHello = function() //给基类构造函数的prototype添加方法
7     {
8         alert("Hello, I'm " + this.name);
9     };
10
11     function Employee(name, salary) //子类构造函数
12     {
13         Person.call(this, name);    //调用基类构造函数
14         this.salary = salary;
15     };
16
17     Employee.prototype = new Person(); //建一个基类的对象作为子类原型的原型，这里很有意思
18
19     Employee.prototype.ShowMeTheMoney = function() //给子类添构造函数的prototype添加方法
20     {
21         alert(this.name + " $" + this.salary);
22     };
23
24     var BillGates = new Person("Bill Gates");   //创建基类Person的BillGates对象
25     var SteveJobs = new Employee("Steve Jobs", 1234);   //创建子类Employee的SteveJobs对象
26
27     BillGates.SayHello();       //通过对象直接调用到prototype的方法
28     SteveJobs.SayHello();       //通过子类对象直接调用基类prototype的方法，关注！
29     SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类prototype的方法
30
31     alert(BillGates.SayHello == SteveJobs.SayHello); //显示：true，表明prototype的方法是共享的

prototype不但能让对象共享自己财富，而且prototype还有寻根问祖的天性，从而使得先辈们的遗产可以代代相传。当从一个对象那里读取属性或调用方法时，如果该对象自身不存在这样的属性或方法，就会去自己关联的prototype对象那里寻找；如果prototype没有，又会去prototype自己关联的前辈prototype那里寻找，直到找到或追溯过程结束为止。

在JavaScript内部，对象的属性和方法追溯机制是通过所谓的prototype链来实现的。当用new操作符构造对象时，也会同时将构造函数的prototype对象指派给新创建的对象，成为该对象内置的原型对象。对象内置的原型对象应该是对外不可见的，尽管有些浏览器(如Firefox)可以让我们访问这个内置原型对象，但并不建议这样做。内置的原型对象本身也是对象，也有自己关联的原型对象，这样就形成了所谓的原型链。

在原型链的最末端，就是Object构造函数prototype属性指向的那一个原型对象。这个原型对象是所有对象的最老祖先，这个老祖宗实现了诸如toString等所有对象天生就该具有的方法。其他内置构造函数，如Function, Boolean, String, Date和RegExp等的prototype都是从这个老祖宗传承下来的，但他们各自又定义了自身的属性和方法，从而他们的子孙就表现出各自宗族的那些特征。

觉得可用，就经常来吧！脚本宝典欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Javascript原型全部内容，希望文章能够帮你解决javascript代码实例教程-Javascript原型所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

上一篇: javascript代码实例教程-图片延迟... 下一篇:javascript代码实例教程-javascr...

猜你在找的js相关文章

全站导航更多